Use any of the available button classes to quickly create a styled button.
Examples Custom Colors
Examples Gray Colors
Colors Outline Options
To an existing button, add the class .btn-outline
Examples Default Outline
Examples Custom Colors Outline
Fancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes.
Create block level buttons—those that span the full width of a parent— by adding .btn-block .
Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. For <button> elements, this is done via :active. For <a> elements, it's done with .active . However, you may use .active on <buttons>s (and include the aria-pressed="true" attribute) should you need to replicate the active state programmatically.
Button ElementNo need to add :active as it's a pseudo-class, but if you need to force the same appearance, go ahead and add .active.
Disabled StateAdd the disabled attribute to <button> buttons..
SizingInstead of applying button sizing classes to every button in a group, just add .btn-group-* to each .btn-group, including when nesting multiple groups..
Justified Button GroupsMake a group of buttons stretch at equal sizes to span the entire width of its parent. Also works with button dropdowns within the button group.
Vertical VariationMake a set of buttons appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.
Basic ExampleWrap a series of buttons with .btn in .btn-group .
Button ToolbarCombine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components. .
NestingPlace a .btn-group within another .btn-group when you want dropdown menus mixed with a series of buttons.
Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.
Single ButtonTurn a button into a dropdown toggle with some basic markup changes.
Split ButtonSimilarly, create split button dropdowns with the same markup changes, only with a separate button.
Dropup VariationTrigger dropdown menus above elements by adding .dropup to the parent.
SizingButton dropdowns work with buttons of all sizes.
Button with Icons
Add button in class next to the text <i class="fa fa-fw fa-gear">
Toolbar Only with Icons
Buttons Only Icons
Buttons with Icons
Do more with buttons. Control button states or create groups of buttons for more components like toolbars.
Checkbox / RadioAdd data-toggle="buttons" to a .btn-group containing checkbox or radio inputs to enable toggling in their respective styles.
StatefulAdd data-loading-text="Loading..." to use a loading state on a button.
Single ToggleAdd data-toggle="button" to activate toggling on a single button.