Building stylized buttons is easy. All buttons are built with the btn class. Just add some of these classes
to get the designs you need.
The basic styling of buttons.
EXAMPLE
<button class="btn btn-default">default</button>
<button class="btn btn-primary">primary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-link">button Link</button>Small buttons, large buttons, all buttons! Add the classes btn-sm for small buttons
and btn-lg for large buttons.
EXAMPLE
<p>
<button class="btn btn-sm btn-default">small button</button>
<button class="btn btn-sm btn-primary">small button</button>
</p>
<p>
<button class="btn btn-default">default button</button>
<button class="btn btn-primary">default button</button>
</p>
<p>
<button class="btn btn-lg btn-default">large button</button>
<button class="btn btn-lg btn-primary">large button</button>
</p>
Block level buttons? Easy! Use the class btn-full
EXAMPLE
<p><button class="btn btn-full btn-lg btn-default">full width button</button></p>
<p><button class="btn btn-full btn-lg btn-primary">full width button</button></p>
Easily create buttons with outlines.
EXAMPLE
<button class="btn btn-default">default</button>
<button class="btn btn-primary-outline">primary</button>
<button class="btn btn-success-outline">Success</button>
<button class="btn btn-info-outline">Info</button>
<button class="btn btn-warning-outline">Warning</button>
<button class="btn btn-danger-outline">Danger</button>
<button class="btn btn-link-outline">button Link</button>Easily create buttons with gradients, too.
EXAMPLE
<button class="btn btn-default-gradient">default</button>
<button class="btn btn-primary-gradient">primary</button>
<button class="btn btn-success-gradient">Success</button>
<button class="btn btn-info-gradient">Info</button>
<button class="btn btn-warning-gradient">Warning</button>
<button class="btn btn-danger-gradient">Danger</button>
Easily create pill buttons with the class btn-pill
EXAMPLE
<button class="btn btn-pill btn-default-gradient">default</button>
<button class="btn btn-pill btn-primary-outline">primary</button>
<button class="btn btn-pill btn-success">Success</button>
<button class="btn btn-pill btn-info-gradient">Info</button>
<button class="btn btn-pill btn-warning-outline">Warning</button>
<button class="btn btn-pill btn-danger">Danger</button>
Disable buttons with the class is-disabled
EXAMPLE
<button class="btn btn-default is-disabled">default</button>
<button class="btn btn-primary is-disabled">primary</button>
Here's a quick review of all the different types of buttons you can create
| Type | Class |
|---|---|
btn btn-default |
|
btn btn-pill btn-default |
|
btn btn-default-gradient |
|
btn btn-default-outline |
|
btn btn-primary |
|
btn btn-pill btn-primary |
|
btn btn-primary-gradient |
|
btn btn-primary-outline |
|
btn btn-success |
|
btn btn-pill btn-success |
|
btn btn-success-gradient |
|
btn btn-success-outline |
|
btn btn-info |
|
btn btn-pill btn-info |
|
btn btn-info-gradient |
|
btn btn-info-outline |
|
btn btn-warning |
|
btn btn-pill btn-warning |
|
btn btn-warning-gradient |
|
btn btn-warning-outline |
|
btn btn-danger |
|
btn btn-pill btn-danger |
|
btn btn-danger-gradient |
|
btn btn-danger-outline |