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

Checkbox 1 Checkbox 2 Checkbox 3
Checkbox 1 Checkbox 2 Checkbox 3
Checkbox 1 Checkbox 2 Checkbox 3
Checkbox 1 Checkbox 2 Checkbox 3
Checkbox 1 Checkbox 2 Checkbox 3
Checkbox 1 Checkbox 2 Checkbox 3
Checkbox 1 Checkbox 2 Checkbox 3
Checkbox 1 Checkbox 2 Checkbox 3

Examples Radio

Radio 1 Radio 2 Radio 3
Radio 1 Radio 2 Radio 3

##### 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

Show/Hide Fixed

Header Layout

Show/Hide

Sidebar Options

Show/Hide
Fixed Aside

Content View

Footer Options

Show/Hide Fixed

Main Color

Primary
Info
Success
Warning
Danger

Navbar

Dark
Light
Like Main Color

Sidebar

Dark
Light
Like Main Color