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.

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>