Buttons

Boilerstrap comes with Bootstrap‘s button styles built in already. This means it’s really easy to turn any text link into an attention-grabbing button using HTML class names.

Inserting a button

To convert a text link into a button, you simply need to create a link with the following code:

<a href="#" class="btn" title=""></a>button text</a>

The class="btn" is all that is required inside the <a> tag to add the button style.

a.btn

Adding color

Bootstrap includes a variety of button colours that can be applied as well, using additional classnames. The available color classes are btn-primary, btn-info, btn-success, btn-warning, btn-danger, btn-inverse, and btn-link. In order to apply a color to a button, the regular btn class must also be present. We would build a blue button like this:

<a href="#" class="btn btn-primary">button text</a>

a.btn a.btn-primary a.btn-info a.btn-success a.btn-warning a.btn-danger a.btn-inverse a.btn-link

Changing size

Bootstrap also includes a variety of button sizes that can be applied using additional classnames too! The available size classes in addition to the regular btn size are btn-large, btn-small, and btn-mini. In order to apply a size to a button, the regular btn class must also be present. We would build a large button like this:

<a href="#" class="btn btn-large">

a.btn-mini a.btn-small a.btn a.btn-large

Adding icons

We can mix any combination of these button classes together to produce exactly the buttons we want, in the colours and sizes we want, and we can also include and of the FontAwesome icons as well. The two buttons on the front-page of this site are designed like this:

<a href="#" class="btn btn-large btn-success" title="">
  <i class="icon-download-alt"></i> Download Boilerstrap
</a>

Download Boilerstrap

<a href="#" class="btn btn-large" title="">
  <i class="icon-github"></i> fork on Github
</a>

Fork on Github

Further reading

Learn more about Bootstrap’s button styles at the Bootstrap Documentation