Loading. Please Wait.

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

Anchor Element
Add the .active class to <a> buttons.

Examples

Primary Link Link
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

Navbar Options

Header Layout

Sidebar Options

Content View

Footer Options

Main Color

Navbar

Sidebar