Individual Buttons

You can create buttons by putting a <span> tag around your text and adding the class btn and one of btn-default, btn-primary, btn-success, btn-info, btn-warning, btn-danger, btn-link, btn-inverse. The different btn-type gives different coloured buttons and the contents of the <span> element is the button label.

 <span class="btn btn-default">Default</span> 
<span class="btn btn-default disabled">Primary</span>

Renders as:


Default - this button has been disabled


Example of all button types - enabled and disabled

Default Primary Success Info Warning Danger Link Inverse

Default Primary Success Info Warning Danger Link Inverse

To make the buttons do something, use a link <a> element instead of the <span> element. When a user clicks the button, they will follow the link.

Please note: You can't add custom javascript to the page to add your own action - javascript is seen as a security risk and so will be stripped by the editor upon saving the page.


Button groups

You can create groups of buttons using a <div> wrapper this the classes btn-group btn-group-justified.

For example:

<div class="btn-group btn-group-justified">
<a class="btn btn-default" href="#">Left</a>
<a class="btn btn-default" href="#">Middle</a>
<a class="btn btn-default" href="#">Right</a>

Renders as

By changing the class from btn-group to btn-group-vertical you get a vertical grouping

Button Button Button Button


If you want to group several button groups together, you can wrap them in another <div> with the class btn-toolbar.

1 2 3 4
5 6 7


Buttons with dropdown menus 

And finally you can have a dropdown menu of buttons

<div class="btn-group">
    <span class="btn btn-inverse">Action<span>
    <span class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<ul class="dropdown-menu">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>

Changing the size of the buttons


Utilize the extra button classes btn-minibtn-small, or btn-large to change size.

 <span class="btn btn-default btn-large">Large </span>
<span class="btn btn-default">Regular </span>
<span class="btn btn-default btn-small">Small </span>
<span class="btn btn-default btn-mini">Mini </span> 

Large Regular  Small  Mini