Easily highlight new or unread items by adding a <span class="badge"> to links, Bootstrap navs, and more.
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.
Add .active to .progress-striped to animate the stripes right to left. Not available in IE9 and below.
Place multiple bars into the same .progress to stack them.
List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
List
Link
By default, all the .panel does is apply some basic border and padding to contain some content.
Basic example
Panel with heading
Panel with footer
Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.
Use the well as a simple effect on an element to give it an inset effect.
Group a series of buttons together on a single line with the button group.
Wrap a series of buttons with .btn in .btn-group.
Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.
Instead of applying button sizing classes to every button in a group, just add .btn-group-* to the .btn-group.
Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.
Extend form controls by adding text or buttons before, after, or on both sides of any text-based input. Use .input-group with an .input-group-addon to prepend or append elements to a single .form-control.