Highlight items using a special class .label. Add any of the below mentioned modifier classes to change the appearance of a label.
| Name | Label | Class |
|---|---|---|
| Default | default | .label.label-default |
| Success | success | .label.label-success |
| Info | info | .label.label-info |
| Warning | warning | .label.label-warning |
| Danger | danger | .label.label-danger |
| Dark | dark | .label.label-dark |
Easily highlight new or unread items by adding a <span class="badge"> to links, Bootstrap navs, and more.
| Name | Badge | Class |
|---|---|---|
| Default | 1 | .badge.badge-default |
| Primary | 2 | .badge.badge-primary |
| Success | +3 | .badge.badge-success |
| Info | 7 | .badge.badge-info |
| Warning | 12 | .badge.badge-warning |
| Danger | 4 | .badge.badge-danger |
| Dark | 8 | .badge.badge-dark |
List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.
Basic Example
- A first item
- A second item 14
- A third item
- A fourth item
- And a fifth one 7
Contextual Classes
- A simple success list group item
- A simple primary list group item
- A simple info list group item
- A simple danger list group item
- A simple secondary list group item
- A simple warning list group item
- A simple light list group item
- A simple dark list group item
.alert and one of the seven contextual classes (e.g., .alert-success for basic alert messages.
Success!
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
Warning!
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
Success!
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
Warning!
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.
Basic
Striped
Animated
Labeled
Sizes
Stacked
Default Media
Media heading
This is some content from a media component. You can replace this with any content and adjust it as needed. This is some content from a media component. You can replace this with any content and adjust it as needed.
Nested Media heading
This is some content from a media component. You can replace this with any content and adjust it as needed.
Media heading
This is some content from a media component. You can replace this with any content and adjust it as needed. This is some content from a media component. You can replace this with any content and adjust it as needed.
Media heading
This is some content from a media component. You can replace this with any content and adjust it as needed.
Media List
Media heading
This is some content from a media component. You can replace this with any content and adjust it as needed. This is some content from a media component. You can replace this with any content and adjust it as needed.
Nested Media heading
This is some content from a media component. You can replace this with any content and adjust it as needed.
Nested Media heading
This is some content from a media component. You can replace this with any content and adjust it as needed.
Nested Media heading
This is some content from a media component. You can replace this with any content and adjust it as needed.
Media Alignment
Top aligned media
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Middle aligned media
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Bottom aligned media
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.