Buttons

Default buttons

Size small .btn-sm

<button class="btn btn-sm btn-primary">Primary</button>
<button class="btn btn-sm btn-secondary">Secondary</button>
Size large .btn-lg

<button class="btn btn-lg btn-primary">Primary</button>
<button class="btn btn-lg btn-secondary">Secondary</button>

Outline buttons .btn-outline-*


<button class="btn btn-outline-primary">Primary</button>
<button class="btn btn-outline-secondary">Secondary</button>
<button class="btn btn-outline-success">Success</button>
<button class="btn btn-outline-info">Info</button>
<button class="btn btn-outline-warning">Warning</button>
<button class="btn btn-outline-danger">Danger</button>
Size small .btn-sm

<button class="btn btn-sm btn-outline-primary">Primary</button>
<button class="btn btn-sm btn-outline-secondary">Secondary</button>
Size large .btn-lg

<button class="btn btn-lg btn-outline-primary">Primary</button>
<button class="btn btn-lg btn-outline-secondary">Secondary</button>

Pill buttons .btn-pill


<button class="btn-pill btn-pill-primary">Primary</button>
<button class="btn-pill btn-pill-secondary">Secondary</button>
<button class="btn-pill btn-pill-dark">Dark</button>
<button class="btn-pill btn-pill-success">Success</button>
<button class="btn-pill btn-pill-info">Info</button>
<button class="btn-pill btn-pill-warning">Warning</button>
<button class="btn-pill btn-pill-danger">Danger</button>
Size small .btn-pill-sm

<button class="btn-pill btn-pill-sm btn-pill-primary">Primary</button>
<button class="btn-pill btn-pill-sm btn-pill-secondary">Secondary</button>
Size large .btn-pill-lg

<button class="btn-pill btn-pill-lg btn-pill-primary">Primary</button>
<button class="btn-pill btn-pill-lg btn-pill-secondary">Secondary</button>

Shadow buttons .btn-shadow


<button class="btn-shadow btn-shadow-primary">Primary</button>
<button class="btn-shadow btn-shadow-secondary">Secondary</button>
<button class="btn-shadow btn-shadow-dark">Dark</button>
<button class="btn-shadow btn-shadow-success">Success</button>
<button class="btn-shadow btn-shadow-info">Info</button>
<button class="btn-shadow btn-shadow-warning">Warning</button>
<button class="btn-shadow btn-shadow-danger">Danger</button>
Size small .btn-shadow-sm

<button class="btn-shadow btn-shadow-sm btn-shadow-primary">Primary</button>
<button class="btn-shadow btn-shadow-sm btn-shadow-secondary">Secondary</button>
Size large .btn-shadow-lg

<button class="btn-shadow btn-shadow-lg btn-shadow-primary">Primary</button>
<button class="btn-shadow btn-shadow-lg btn-shadow-secondary">Secondary</button>

Button block .btn-block


<button class="btn btn-shadow-primary btn-block">Primary</button>
<button class="btn btn-shadow-secondary btn-block">Secondary</button>

<button class="btn-pill btn-pill-primary btn-block">Primary</button>
<button class="btn-pill btn-pill-secondary btn-block">Secondary</button>

<button class="btn-shadow btn-shadow-primary btn-block">Primary</button>
<button class="btn-shadow btn-shadow-secondary btn-block">Secondary</button>