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...
Well done!You successfully read this important alert message.
Heads up!This alert needs your attention, but it's not super important.
Warning!Best check yo self, you're not looking too good.
Oh snap!Change a few things up and try submitting again.
<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.