Basic Buttons
Outline buttons
Use class
btn-outline
on anybtn
Round Buttons
Outline buttons
Use class
btn-outline
on anybtn
Button Sizing
Large buttons
Use class
btn-lg
on anybtn
Small buttons
Use class
btn-sm
on anybtn
Block level buttons
Use class
btn-block
on anybtn
Button Groups
Block toolbar
Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.
Sizing
Instead of applying button sizing classes to every button in a group, just add
btn-group-*
to eachbtn-group
, including each one when nesting multiple groups.
Vertical Group
Use class
btn-group-vertical
Square Buttons
Outline buttons
Use class
btn-outline
on anybtn
Light Buttons
Elevated Buttons
Dropdown Buttons
Split Dropdowns
Split dropdowns are used to seperate links from dropdowns
Buttons with icons
Social Media
Utility classes to provide social media context
Icon buttons
Outline Icons
Round Icons
Elevated Icons