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 

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

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
8

 

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>
</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>
</ul>
</div>


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