logo logo-dark

Do you know the latest update of 2022? A overview of our is now available on YouTube
Components

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>
© 2022 DashLite. Template by Softnio