Example page header Subtext for header
Wrap any text and an optional dismiss button in .alert and one of the four contextual classes (e.g., .alert-success) for basic alert messages.
Success!
Best check yo self, you're not looking too good...
<div class="alert alert-success">...</div>
<div class="alert alert-info">...</div>
<div class="alert alert-warning">...</div>
<div class="alert alert-danger">...</div>
Add any of the below mentioned modifier classes to change the appearance of a label.
Default Primary Success Info Warning Danger
<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-warning">Warning</span>
<span class="label label-danger">Danger</span>
Easily highlight new or unread items by adding a <span class="badge"> to links, Bootstrap navs, and more.
5 10 15 20 25 30 35
Default progress bar code example.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
With label
Remove the .sr-only class from within the progress bar to show a visible percentage. For low percentages, consider adding a min-width to ensure the label's text is fully visible.
Stacked Progress Bars
Place multiple bars into the same .progress to stack them.