Buttons

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Bootstrap documentation


<button class="btn btn-primary" type="button">Primary</button>
<button class="btn btn-secondary" type="button">Secondary</button>
<button class="btn btn-success" type="button">Success</button>
<button class="btn btn-danger" type="button">Danger</button>
<button class="btn btn-warning" type="button">Warning</button>
<button class="btn btn-info" type="button">Info</button>
<button class="btn btn-light" type="button">Light</button>
<button class="btn btn-dark" type="button">Dark</button>
<button class="btn btn-link" type="button">Link</button>

Outline buttons

<button class="btn btn-outline-primary" type="button">Primary</button>
<button class="btn btn-outline-secondary" type="button">Secondary</button>
<button class="btn btn-outline-success" type="button">Success</button>
<button class="btn btn-outline-danger" type="button">Danger</button>
<button class="btn btn-outline-warning" type="button">Warning</button>
<button class="btn btn-outline-info" type="button">Info</button>
<button class="btn btn-outline-light" type="button">Light</button>
<button class="btn btn-outline-dark" type="button">Dark</button>

Light buttons

<button class="btn btn-primary-light" type="button">Primary light</button>
<button class="btn btn-secondary-light" type="button">Secondary light</button>
<button class="btn btn-success-light" type="button">Success light</button>
<button class="btn btn-danger-light" type="button">Danger light</button>
<button class="btn btn-warning-light" type="button">Warning light</button>
<button class="btn btn-info-light" type="button">Info light</button>

Buttons with icons

<button class="btn btn-primary" type="button">
  Primary
  <i class="fe fe-mail ml-2"></i>
</button>

<button class="btn btn-outline-primary" type="button"> 
  Primary outline
  <i class="fe fe-user ml-2"></i>
</button>

<button class="btn btn-primary-light" type="button">
  Primary light
  <i class="fe fe-download ml-2"></i>
</button>

Sizing

<button class="btn btn-primary btn-lg" type="button">Large button</button>
<button class="btn btn-secondary btn-lg" type="button">Large button</button>
<button class="btn btn-primary btn-sm" type="button">Small button</button>
<button class="btn btn-secondary btn-sm" type="button">Small button</button>
<button class="btn btn-primary btn-lg btn-block" type="button">Block level button</button>
<button class="btn btn-secondary btn-lg btn-block" type="button">Block level button</button>

States

<a class="btn btn-primary btn-lg active" href="#" role="button" aria-pressed="true">Primary link</a>
<a class="btn btn-secondary btn-lg active" href="#" role="button" aria-pressed="true">Link</a>
<button class="btn btn-lg btn-primary" type="button" disabled="">Primary button</button>
<button class="btn btn-secondary btn-lg" type="button" disabled="">Button</button>