Button groups
Button dropdowns
Turn a button into a dropdown toggle with some basic markup changes.
Basic Buttons
Buttons
Bootstrap includes six predefined button styles, each serving its own semantic purpose.
Square Buttons
Use .squareclass for square buttons.
Round Buttons
Use .roundclass for round buttons.
Single button dropdowns
Button dropdowns
Turn a button into a dropdown toggle with some basic markup changes.
Split Buttons
Split button dropdowns
Similarly, create split button dropdowns with the same markup changes, only with a separate button.
Basic Button group
Group a series of buttons together on a single line with the button group. Wrap a series of buttons with .btnin .btn-group.
Buttons with Icon
Bootstrap includes six predefined button styles, each serving its own semantic purpose.
Button dropdowns with icons
Split button dropdowns with icon
Button group with icon
Button group with icons and text.
Icon Buttons
Simple Icon Button
Use .btn-icon.btn-pureclasses for only icon buttons
Icon Button dropdowns
Split icon button dropdowns
Icon Button group
Icon Button group without text.
Combine sets of button groups into Button toolbarfor more complex components.
Sizes
Add .btn-lgor .btn-smfor Fancy larger or smaller buttons size.
Buttons with Icons in different sizes
Button Dropdowns Sizes
Button dropdowns work with buttons of all sizes.
Buttons with Icons in different sizes
Button Group Sizes
Instead of applying button sizing classes to every button in a group, just add .btn-group-* to each .btn-group.
Button Group with Icons in different sizes
Block level buttons
Create block level buttons—those that span the full width of a parent—by adding .btn-block.
Button tags
The .btn classes are designed to be used with the <button>element. However, you can also use these classes on <a>or <input>elements.
Gradient Raised buttons
Gradient Raised Button With Shadow
Outline Buttons
Replace the default modifier classes with the .btn-outline ones to remove all background images and colors on any button.
Outline buttons
Use a class .btn-outline-*to quickly create a outline button.
Square buttons
Use a class .squarewith outline button class to create square outline button.
Round buttons
Use a class .roundwith outline button class to create round outline button.
Single outline button dropdowns
Split Outline button dropdowns with dropdown background
Split Outline button dropdowns
Outline Button group
Outline button group
Outline buttons with Icons
Outline Buttons with icon.
Split Outline button dropdowns with icon & dropdown outline
Outline Button group with icon
Outline button group with icons and text.
Outline Icon Buttons
Outline Icon Buttons.
Outline Icon Button group
Icon Button group without text.
Combine sets of button groups into Button toolbarfor more complex components.
Sizes
Add .btn-lgor .btn-smfor Fancy larger or smaller buttons size.
Buttons with Icons in different sizes
Outline Button Dropdowns Sizes
Button dropdowns work with buttons of all sizes.
Icon Buttons in different sizes
Button Group Sizes
Instead of applying button sizing classes to every button in a group, just add .btn-group-* to each .btn-group.
Button Group with Icons in different sizes
Block level buttons
Create block level buttons—those that span the full width of a parent—by adding .btn-block.
Nesting Button group
Place a .btn-groupwithin another .btn-groupfor dropdown menu buttons.
Nesting Button group with outline
Vertical variation
Make a set of buttons appear vertically.
Vertical variation with different colors
Vertical variation with Outlines
Vertical variation with Outlines
Basic Social Buttons
Use
.btn-socialclass with.btn-SOCIAL_NAMEclass like.btn-facebookfor social buttons with icons.Round Social Buttons
Use
.btn-socialclass with.btn-SOCIAL_NAMEclass like.btn-facebookfor social buttons with icons.Social Outline Buttons
Use
.btn-outline-SOCIAL_NAMEclass like.btn-outline-facebookfor social outline buttons.Social Round Outline Buttons
Use
.btn-outline-SOCIAL_NAMEclass like.btn-outline-facebookfor social outline buttons.Flat Social Buttons
Use
.btn-SOCIAL_NAME-flatclass like.btn-facebook-flatclass for flat social buttons.Social Icon Buttons
Use
.btn-social-iconclass for social icon buttons.Use
.btn-roundclass for round buttons.Social Icon and Round Outline Buttons
Social Block Buttons