Default Buttons
You can easily style a button or a link by adding the base class btn
and then by applying a color variation class.
btn-default
btn-primary
btn-success
btn-info
btn-warning
btn-danger
Button 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.
btn
btn-xs
btn
btn-sm
btn
btn
btn-lg
Square Buttons
You can easily have a square button by adding the btn-square
class.
Rounded Buttons
The same way, by adding the btn-rounded
class, you can have rounded buttons.
Disabled Buttons
If you need to disable a button, just add the disabled
attribute.
Buttons with Icons
You can use any icon you like with your buttons! Prefer the ones that better represent the action of each button.
You can use icons with any button variation you want, they will adjust accordingly.
Using social icons, it is easy to create share or social login buttons.
Button Group and Dropdowns
Grouping buttons or creating dropdowns is just a few lines away.
You can also have vertical and justified button groups
Toolbars
Create toolbars by using icons and buttons.
You can also change toolbar’s size easily.