Buttons
Basic Buttons

Twelve predefined button styles, each serving its own semantic purpose.

Source Code

<button class="btn btn-primary">Primary</button>
<button class="btn btn-primary active">Active</button>
<button class="btn btn-primary disabled">Disabled</button>
Outline Buttons

Twelve predefined outline button styles, each serving its own semantic purpose.

Available in all colors same with the button above.

Buttons With Icons

A button variant for basic and outline buttons with additional icons.

Icon Only Buttons

A button variant for using only icons.



Source Code

<a href="#" class="btn btn-primary btn-icon">
  <div><i class="fa fa-send"></i></div>
</a>
Button Groups

Group a series of buttons together on a single line with the button group.

Source Code

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary pd-x-25 active">General Settings</button>
  <button type="button" class="btn btn-secondary pd-x-25">Privacy Settings</button>
  <button type="button" class="btn btn-secondary pd-x-25">Account Settings</button>
</div>