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>

Class Reference

Class	Values
class="btn btn-[value]"	primary | success | warning | danger | info | teal | indigo | purple | pink | light | dark

Outline Buttons

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

Class Reference

Class	Values
class="btn btn-outline-[value]"	primary | success | warning | danger | info | teal | indigo | purple | pink | dark

Rounded Buttons

A very rounded corner for both basic and outline buttons.

Class Reference

Class	Values
class="btn btn-oblong btn-[value]"	primary | success | warning | danger | info | teal | indigo | purple | pink | light | dark
class="btn btn-oblong btn-outline-[value]"

Buttons With Icons

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

Source Code

<button class="btn btn-primary"><i class="fa fa-send mg-r-10"></i> Send Message</button>

Source Code

<a href="" class="btn btn-primary btn-with-icon">
  <div class="ht-40 justify-content-between">
    <span class="pd-x-15">Send Message</span>
    <span class="icon wd-40"><i class="fa fa-send"></i></span>
  </div>
</a>
<!-- reverse -->
<a href="" class="btn btn-primary btn-with-icon">
  <div class="ht-40">
    <span class="icon wd-40"><i class="fa fa-send"></i></span>
    <span class="pd-x-15">Send Message</span>
  </div>
</a>

Class Reference

Class	Value / Description
class="btn btn-[value] btn-with-icon"	primary | success | warning | danger | info | teal | indigo | purple | pink | light | dark
class="ht-40"	Set an element of having a height of 40px.
class="wd-40"	Set an element of having a width of 40px.
class="pd-x-15"	Set a padding of 15px for both left and right.

NOTE: To know more about helper classes for height, check out the Utilities menu of this template.

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>

Class Reference

Class	Description
btn-icon	A class for button that only an icon is allowed, that means no text.

Adjusting The Thickness of Outline Button

Increasing the width of an outline button by adding only a single class coming from border utilities. Only applicable to outline buttons only.

Source Code

<button class="btn btn-outline-primary bd-2">Explore</button>

Class Reference

Class	Size
bd-[size]	1 | 2 | 3 | 4 | 5

Adding More Utility Classes to Button

Enhancing the button by adding some utility classes available and allowed for buttons.

Source Code

<button class="btn btn-primary pd-x-30 pd-y-15 tx-uppercase tx-bold tx-spacing-6 tx-12">Take a Tour</button>

<button class="btn btn-outline-primary btn-oblong bd-2 pd-x-30 pd-y-15 tx-uppercase tx-bold tx-spacing-6 tx-12">
  Take a Tour
</button>

Class Reference

Class	Size
pd-x-30	Set the padding for both left and right to 30px. Check more padding in Padding utilities.
pd-y-15	Set the padding for both top and bottom to 15px. Check more padding in Padding utilities.
tx-uppercase	Transform the text into uppercase. Check more case in Typography utilities.
tx-bold	Set the text font weight into bold. Check more weight in Typography utilities.
tx-spacing-6	Set the letter spacing of a text. Check more spacing in Typography utilities.

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>