Buttons

Documentation and examples of button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Example with Variations

Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.

Primary Primary
Secondary Secondary
Success Success
Danger Danger
Warning Warning
Info Info
Light Light
Dark Dark

Code Example

<a href="#" class="btn btn-primary">Primary</a>

Primary Primary
Secondary Secondary
Success Success
Danger Danger
Warning Warning
Info Info
Light Light
Dark Dark

Code Example

<a href="#" class="btn btn-dim btn-primary">Primary</a>

Primary Primary
Secondary Secondary
Success Success
Danger Danger
Warning Warning
Info Info
Light Light
Dark Dark

Code Example

<a href="#" class="btn btn-outline-primary">Primary</a>

Primary Primary
Secondary Secondary
Success Success
Danger Danger
Warning Warning
Info Info
Light Light
Dark Dark

Code Example

<a href="#" class="btn btn-dim btn-outline-primary">Primary</a>

Button Extra Large Button Large
Button Large Button Regular
Button Regular Button Regular
Button Small Button Small

Code Example

<a href="#" class="btn btn-xl btn-primary">Button Large</a>

Button Extra Large Button Large
Button Large Button Regular
Button Regular Button Regular
Button Small Button Small

Code Example

<a href="#" class="btn btn-xl btn-primary">Button Large</a>

Code Example

<a href="#" class="btn btn-round btn-lg btn-primary">Button Large</a>
<a href="#" class="btn btn-round btn-primary">Button Regular</a>
<a href="#" class="btn btn-round btn-primary"><em class="icon ni ni-setting"></em><span>Button Regular</span> </a>
<a href="#" class="btn btn-round btn-primary"><span>Button Regular</span><em class="icon ni ni-chevron-down"></em></a>
<a href="#" class="btn btn-round btn-primary btn-action"><span>Button Regular</span><em class="icon ni ni-chevron-down"></em></a>
<a href="#" class="btn btn-round btn-sm btn-primary">Button Small</a>

Code Example

<a href="#" class="btn btn-primary"><em class="icon ni ni-setting"></em><span>Button Regular</span> </a>
<a href="#" class="btn btn-primary"><span>Button Regular</span><em class="icon ni ni-chevron-down"></em></a>
<a href="#" class="btn btn-primary btn-action"><span>Button Regular</span><em class="icon ni ni-chevron-down"></em></a>

Code Example

<a href="#" class="btn btn-icon btn-lg btn-primary"><em class="icon ni ni-play"></em></a>

Use-Case Preview

Dashboards

Applications

Misc Pages

Components

Buttons

Example with Variations

Code Example

Code Example

Code Example

Code Example

Code Example

Code Example

Code Example

Code Example

Code Example