Colors Options
Use any of the available button classes to quickly create a styled button.
Examples Default
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
Sizes
Fancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes.
Examples
Create block level buttons—those that span the full width of a parent— by adding .btn-block .
Examples
Active States
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 Element
No need to add :active as it's a pseudo-class, but if you need to force the same appearance, go ahead and add .active.Examples
Disabled State
Add the disabled attribute to <button> buttons..Examples
Buttons Groups
Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with our buttons plugin.
Sizing
Instead of applying button sizing classes to every button in a group, just add .btn-group-* to each .btn-group, including when nesting multiple groups..Examples
Justified Button Groups
Make 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.Examples
Vertical Variation
Make a set of buttons appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.Example
Basic Example
Wrap a series of buttons with .btn in .btn-group .Examples
Button Toolbar
Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components. .Examples
Nesting
Place a .btn-group within another .btn-group when you want dropdown menus mixed with a series of buttons.Examples
Button Dropdowns
Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.
Single Button
Turn a button into a dropdown toggle with some basic markup changes.Examples
Split Button
Similarly, create split button dropdowns with the same markup changes, only with a separate button.Examples
Dropup Variation
Trigger dropdown menus above elements by adding .dropup to the parent.Examples
Sizing
Button dropdowns work with buttons of all sizes.Examples
Button with Icons
Add button in class next to the text <i class="fa fa-fw fa-gear">
Toolbar Only with Icons
Example
Buttons Only Icons
Example
Buttons with Icons
Example
Buttons button.js
Do more with buttons. Control button states or create groups of buttons for more components like toolbars.
Checkbox / Radio
Add data-toggle="buttons" to a .btn-group containing checkbox or radio inputs to enable toggling in their respective styles.Examples Checkboxes
Examples Radio
Stateful
Add data-loading-text="Loading..." to use a loading state on a button.Example
Single Toggle
Add data-toggle="button" to activate toggling on a single button.Example
