Button

Colored

You can add color classes to brighten up the buttons by prefixing it with .btn-{color} class which will give you access to all of the classes outlined below.

<button class="btn btn-primary">Light</button>
<button class="btn btn-success">Dark</button>
<button class="btn btn-info">Black</button>
<button class="btn btn-warning">Simple</button>
<button class="btn btn-danger">Simple</button>
<button class="btn btn-link">Simple</button>

Disabled

You can make buttons appear inactive by adding the disabled attribute to the end of the elements tag.

<button class="btn btn-primary" disabled>Primary</button>
<button class="btn btn-light" disabled>Success</button>
<button class="btn btn-dark" disabled>Info</button>
<button class="btn btn-black" disabled>Warning</button>
<button class="btn btn-danger" disabled>Danger</button>
<button class="btn btn-link" disabled>Link</button>

Outlined

For an outlined appearance add the classbtn-outline attribute to the end of the elements tag. This will give the button a transparent background with a 1px border.
Note: Colors .btn-{color} need to be prefixed with this class in order to achieve the desired effect.

<button class="btn btn-primary btn-outline">Primary</button>
<button class="btn btn-light btn-outline">Success</button>
<button class="btn btn-dark btn-outline">Info</button>
<button class="btn btn-black btn-outline">Warning</button>
<button class="btn btn-danger btn-outline">Danger</button>
<button class="btn btn-link btn-outline">Link</button>

Sizes

mesh Buttons come in three different sizes - small, default & large, simply add btn-small or btn-large classes to achieve the desired effect.

<button class="btn btn-small">Small</button>
<button class="btn">Default</button>
<button class="btn btn-large">Large</button>

Blocks

Button blocks extend the full width of the container that they are in. Add them by using the btn-block class. If multiple block buttons are present, a slight margin bottom will separate them.

<button class="btn btn-block">Default Block</button>
<button class="btn btn-block btn-primary">Primary Block</button>
<button class="btn btn-block btn-primary btn-rounded">Rounded Block</button>

Icons

You are able to add font-awesome icons to any button by adding the <i> tag inside the <button>.
A <span> tag is required for the text inside the button. This will give a slight margin around the icon.
Icon buttons are available in large, default and small.

<button class="btn btn-icon btn-primary">
    <i class="far fa-hashtag"></i>
    <span>With Icon</span>
</button>
<button class="btn btn-icon btn-primary">
    <span>With Icon</span>
    <i class="far fa-hashtag"></i>
</button>
<button class="btn btn-icon btn-outline primary">
    <span>With Icon</span>
    <i class="far fa-hashtag"></i>
</button>
<button class="btn btn-icon btn-primary btn-large">
    <span>With Icon</span>
    <i class="far fa-hashtag"></i>
</button>
<button class="btn btn-icon btn-primary btn-small">
    <span>With Icon</span>
    <i class="far fa-hashtag"></i>
</button>

Just Icons

You can also just use icons within a button by adding the<btn-justicon> class. To make the button circular, add one of our border radius classes <br-circle>.

<button class="btn btn-primary btn-justicon">
    <i class="far fa-hashtag"></i>
</button>
<button class="btn btn-primary btn-justicon btn-large">
    <i class="far fa-hashtag"></i>
</button>
<button class="btn btn-primary btn-justicon br-circle">
    <i class="far fa-hashtag"></i>
</button>
<button class="btn btn-primary btn-justicon btn-large br-circle">
    <i class="far fa-hashtag"></i>
</button>
<button class="btn btn-primary btn-justicon br-circle btn-outline">
    <i class="far fa-hashtag"></i>
</button>
<button class="btn btn-primary btn-justicon btn-large br-circle btn-outline">
    <i class="far fa-hashtag"></i>
</button>

Rounded

Buttons can also be rounded with the <btn-rounded>

<button class="btn btn-primary btn-rounded">Rounded</button>
<button class="btn btn-primary btn-rounded btn-outline">Outline</button>
<button class="btn btn-primary btn-rounded" disabled>Disabled</button>

Loading

A loading class can be used with any button to add an animated spinner to the button using the :after pseudo selector.
Typically this class will be used with Javascript. You just simply add the btn-loading class, which will in turn, make the text transparent and add the spinner. The size of the button will remain the same.
Note: Any color classes can be added to the loading buttons.

<button class="btn btn-primary btn-loading">Loading</button>
<button class="btn btn-primary btn-loading btn-outline">Loading</button>
<button class="btn btn-primary btn-loading btn-small">Loading</button>
<button class="btn btn-primary btn-loading btn-large">Loading</button>