Others
Progress bars
Contextual alternatives
Progress bars use some of the same button and alert classes for consistent styles.
Striped
Uses a gradient to create a striped effect. Not available in IE8.
Animated
Add .active to .progress-striped to animate the stripes right to left. Not available in all versions of IE.
Stacked
Place multiple bars into the same .progress to stack them.
Sizing
Set progress size using classes like .progress-sm or .progress-xs
Breadcrumbs
Separators are automatically added in CSS through :before and content.
List group
Basic Example
The most basic list group is simply an unordered list with list items, and the proper classes. Build upon it with the options that follow, or your own CSS as needed.
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
Badges
The most basic list group is simply an unordered list with list items, and the proper classes. Build upon it with the options that follow, or your own CSS as needed.
- Cras justo odio 14
- Dapibus ac facilisis in 7
- Morbi leo risus 1
- Porta ac consectetur ac
- Vestibulum at eros
Custom content
Add nearly any HTML within, even for linked list groups like the one below.
List group item heading
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
List group item heading
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
List group item heading
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Linked items
Linkify list group items by using anchor tags instead of list items (that also means a parent <div> instead of an <ul>). No need for individual parents around each element.
Switchery
Checked by default
Only thing you need is to add a checked attribute to your checkbox input. Simple as that.
Multiple switches
You can add as many switches as you like, as long as their corresponding checkboxes have the same class.
Color variation
You can add as many switches as you like, as long as their corresponding checkboxes have the same class.