Example page header Subtext for header
Wrap any text and an optional dismiss button in .alertand 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...
<divclass="alert alert-success">...</div><divclass="alert alert-info">...</div><divclass="alert alert-warning">...</div><divclass="alert alert-danger">...</div>Add any of the below mentioned modifier classes to change the appearance of a label.
DefaultPrimarySuccessInfoWarningDanger
<spanclass="label label-default">Default</span><spanclass="label label-primary">Primary</span><spanclass="label label-success">Success</span><spanclass="label label-warning">Warning</span><spanclass="label label-danger">Danger</span>
Easily highlight new or unread items by adding a <span class="badge">to links, Bootstrap navs, and more.
5101520253035
Default progress bar code example.
<divclass="progress"><divclass="progress-bar"role="progressbar"aria-valuenow="60"aria-valuemin="0"aria-valuemax="100"style="width: 60%;"><spanclass="sr-only">60% Complete</span></div></div>With label
Remove the .sr-onlyclass from within the progress bar to show a visible percentage. For low percentages, consider adding a min-widthto ensure the label's text is fully visible.
Stacked Progress Bars
Place multiple bars into the same .progressto stack them.