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.
Code Example
<a href="#" class="btn btn-primary">Primary</a>
Code Example
<a href="#" class="btn btn-dim btn-primary">Primary</a>
Code Example
<a href="#" class="btn btn-outline-primary">Primary</a>
Code Example
<a href="#" class="btn btn-dim btn-outline-primary">Primary</a>
- Button Extra LargeButton Large
- Button LargeButton Regular
- Button RegularButton Regular
- Button SmallButton Small
Code Example
<a href="#" class="btn btn-xl btn-primary">Button Large</a>
- Button Extra LargeButton Large
- Button LargeButton Regular
- Button RegularButton Regular
- Button SmallButton Small
Code Example
<a href="#" class="btn btn-xl btn-primary">Button Large</a>
- Left IconButton Left Icon
- Right IconButton Right Icon
- Action Button
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>
- Left IconButton Left Icon
- Right IconButton Right Icon
- Action Button
- Icon on RightAction Button
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>
