Button Styles
Contextual
You can easily style a button or a link by adding the base class btnand then by applying a color variation class.
btn-primarybtn-secondarybtn-successbtn-infobtn-warningbtn-dangerYou can also achieve outline styles for your buttons by using the related classes.
btn-outline-primarybtn-outline-secondarybtn-outline-successbtn-outline-infobtn-outline-warningbtn-outline-dangerFinally, there is also an alternative style which you can use with your buttons.
btn-alt-primarybtn-alt-secondarybtn-alt-successbtn-alt-infobtn-alt-warningbtn-alt-dangerRipple Effect
You can easily add a ripple effect on click to any button you want by adding data-toggle="click-ripple".
Sizes
You might need various button sizes based on your content and context. Making your buttons smaller or larger is as easy as adding an extra size variation class. It can be applied along with any other color or shape variation class to create the button that fits you best.
btnbtn-sm
btn
btnbtn-lg
btnbtn-herobtn-sm
btnbtn-hero
btnbtn-herobtn-lg
Button Variations
Square
You can easily have a square button by adding the btn-squareclass.
Rounded
The same way, by adding the btn-roundedclass, you can have rounded buttons.
No Border
You can even remove the border from your buttons styles (default and outline), by adding the btn-noborderclass.
Disabled
If you need to disable a button, just add the disabledattribute.
Button with Icons
Default
You can use any icon you like with your buttons! Prefer the ones that better represent the action of each button.
Variations
You can use icons with any button variation you want, they will adjust accordingly.
You can also use the .btn-circleclass to create circle buttons with only icons.
Button Groups, Dropdowns & Toolbars
Groups and Dropdowns
Grouping buttons or creating dropdowns/dropups in various sizes is just a few lines away.
You can also have vertical button groups with dropdowns or dropups
Toolbars
Create toolbars by using icons and buttons.
You can also change toolbar’s size easily.