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.

Different Types

The basic styling of buttons.


<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>

Button Sizes

Small buttons, large buttons, all buttons! Add the classes btn-sm for small buttons and btn-lg for large buttons.


 <button class="btn btn-sm btn-default">small button</button>
 <button class="btn btn-sm btn-primary">small button</button>
 <button class="btn btn-default">default button</button>
 <button class="btn btn-primary">default button</button>
 <button class="btn btn-lg btn-default">large button</button>
 <button class="btn btn-lg btn-primary">large button</button>

Full Width

Block level buttons? Easy! Use the class btn-full


<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>

Outline Buttons

Easily create buttons with outlines.


<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>

Gradient Buttons

Easily create buttons with gradients, too.


<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>

Pill Buttons

Easily create pill buttons with the class btn-pill


<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>

Disabled Buttons

Disable buttons with the class is-disabled


<button class="btn btn-default is-disabled">default</button>
<button class="btn btn-primary is-disabled">primary</button>

Button Modifiers

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