Remember

Button types

Button with icon

You can add icon from about 249 available icons to any choosen buttons. See some example below:

<a href="your link" class="btn |button type|"><i class="icon-|icon name|"></i> Your button text</a>

More variations

Wrap a series of buttons with .btn in .btn-group

<div class="btn-group">
<button class="btn btn-primary">primary</button>
<button class="btn btn-success">success</button>
<button class="btn btn-inverse">warning</button>
</div>

Button sizes

There are 5 button sizes: mini, small, normal, medium and large

Button edge

There are 3 button edge variations: normal, rounded and flat. Simply adding btn-rounded or btn-flat class and you'll get different button edge

Tab standard top

• One
• Two
• Three

Tabs left

Tabs right

Accordion

Progress bars

Pagination

Links are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.

<div class="pagination"> <ul> <li class="disabled"><a href="/">Prev</a></li> <li class="active"><a href="/">1</a></li> <li><a href="/">2</a></li> <li><a href="/">3</a></li> <li><a href="/">Next</a></li> </ul> </div>
						

Testimonial

There are many variations of passages of randomised words which don't look even slightly believable. You need to be sure there isn't anything embarrassing of text.

Nathan Doe

ZZ Design, www.sitename.com

Alerts

Table - default style

Table - default with Zebra-Striping

Table - default with borders

Table - default with hover enabled

Table - Cutting cell padding in half

Table - Color table rows