Button with icon

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

button icon cog button icon heart button icon camera
<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

mini size small size normal size Medium size Large size

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

normal primary rounded button flat button normal button rounded button flat button

Tab

Test Soon

soon.

soon.

soon.

Alerts

Success! Best check yo self, you're not looking too good.
Danger! Best check yo self, you're not looking too good.
Warning! Change a few things up and try submitting again.
Info! Change a few things up and try submitting again.

Progress bars

60% Complete
40% Complete
45% Complete
35% Complete (success)
20% Complete (warning)
10% Complete (danger)

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>