Alerts

Alert boxes are created with the alert class and colours can be modified an additional alert-type class. If you add a button with the attribute data-dismiss="alert" then the user can close the alert box but it will appear every time the page loads. You can increase the padding around the message by adding alert-block.

<div class="alert alert-dismissable alert-danger">
<span class="close" data-dismiss="alert">&times;</span>
<b>Danger!</b>: Message with a link: <a href="#">link text - kind of hard to see in this box</a>.
</div>

<div class="alert alert-info">
<b>Info!</b> Short message
</div>

<div class="alert alert-success alert-block">
<b>Success!</b><br />
A nice long message .....<br />
so I have made it into an alert-block <br />
for extra padding, <a href="#">very easy to see the link in this box</a>.
</div>
× Danger!: Message with a link: link text - kind of hard to see in this box.
Info! Short message
Success!
A nice long message .....
so I have made it into an alert-block
for extra padding, very easy to see the link in this box.

 

Labels

Work pretty much as per the bootstrap documentation

LabelsMarkup
Default <span class="label">Default</span>
Success <span class="label label-success">Success</span>
Warning <span class="label label-warning">Warning</span>
Important <span class="label label-important">Important</span>
Info <span class="label label-info">Info</span>
Inverse <span class="label label-inverse">Inverse</span>

 

Badges

Work pretty much as per the bootstrap documentation

NameExampleMarkup
Default 1 <span class="badge">1</span>
Success 2 <span class="badge badge-success">2</span>
Warning 4 <span class="badge badge-warning">4</span>
Important 6 <span class="badge badge-important">6</span>
Info 8 <span class="badge badge-info">8</span>
Inverse 10 <span class="badge badge-inverse">10</span>