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>
Code Example
<a href="#" class="btn btn-xl btn-primary">Button Large</a>
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>
  • lg
  • Rg
  • Sm
  • lg
  • Rg
  • Sm
Code Example
<a href="#" class="btn btn-icon btn-lg btn-primary"><em class="icon ni ni-play"></em></a>
Switch Demo Layout
Use Case Concept
Preview Settings
Main UI Style
Default
Clean
Sidebar Style
White
Light
Dark
Theme
Primary Skin
Default
Blue
Egyptian
Purple
Green
Red
Looking for Coronavirus Real & Live Data Tracking Dashboard? Check out
CovStats
Looking for Coronavirus
Live Data Dashboard?