Style

Shortcodes & Illustrations

Handy shortcodes and a set of scalable vector illustrations kindly provided by DesignModo.

Buttons

	`btn btn-primary`
	`btn btn-info`
	`btn btn-success`
	`btn btn-warning`
	`btn btn-danger`
	`btn btn-inverse`

Inline labels

Default Primary Success Info Warning Danger Home 42

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

Images

<img src="/portals/28/..." class="img-rounded">
<img src="/portals/28/..." class="img-circle">
<img src="/portals/28/..." class="img-polaroid">

Button sizes

	`btn btn-primary btn-lg`
	`btn btn-primary`
	`btn btn-primary btn-sm`
	`btn btn-primary btn-xs`

Alerts

× Well done! You successfully read this important alert message.

× Heads up! This alert needs your attention, but it's not super important.

× Warning! Better check yourself, you're not looking too good.

× Oh snap! Change a few things up and try submitting again.

<div class="alert alert-success">
<a class="close" data-dismiss="alert">&times;</a>
...
</div>
<div class="alert alert-info">
<a class="close" data-dismiss="alert">&times;</a>
...
</div>
<div class="alert alert-warning">
<a class="close" data-dismiss="alert">&times;</a>
...
</div>
<div class="alert alert-danger">
<a class="close" data-dismiss="alert">&times;</a>
...
</div>

Progress bar

<div class="progress">
<div class="bar" data-percentage="60">
</div>
</div>

Table

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter