Components
Tooltips on Text
Lorem ipsum dolor sit amet consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat quis nostrud exerci tation ullamcorper.
Four directions
Dismissible popover
Four directions
Bootstrap Alert
Wrap any text and an optional dismiss button in .alert and one of the four contextual classes (e.g., .alert-success) for basic alert messages.
Bootstrap Alert With Icon
Wrap any text and an optional dismiss button in .alert and one of the four contextual classes (e.g., .alert-success) for basic alert messages.
Server Load Limited
Server Load Limited
Server Load Limited
Server Load Limited
Labels & Badges
| Class | Labels | Badges |
|---|---|---|
| Default | Default | 6 |
| Danger | Danger | 4 |
| Warning | Warning | 7 |
| Success | Success | 8 |
| Info | Info | 2 |
| Primary | Primary | 5 |
| Dark | Dark | 12 |
| Mint | Mint | 12 |
| Pink | Pink | 12 |
| Purple | Purple | 12 |
Pagination
Sizing
Fancy larger or smaller pagination? Add .pagination-lg or .pagination-sm for additional sizes.
Basic Progress Bar
Add .progress to create a simple effect. Not available in IE8.
Striped Progress Bar
Add .progress-striped to create a striped effect. Not available in IE8.
Animated Progress Bar
Add .active to .progress-striped to animate the stripes right to left. Not available in IE9 and below.
Progress Bar
Add .progress-striped to create a striped effect. Not available in IE8.
Animated Progress Bar
Add .active to .progress-striped to animate the stripes right to left. Not available in IE9 and below.
Progress Bar
Add .active to .progress-striped to animate the stripes right to left. Not available in IE9 and below.
Breadcrumb
Thumbnails
Custom content
Jumbotron
Hello, world!
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
Media object
Media heading
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.Media heading
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.Nested media heading
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.Media heading
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.Media heading
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.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.
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.
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.
Media object
Media heading
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.Nested media heading
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.Nested media heading
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.Nested media heading
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.List group
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
List group with Badges
- 14 Cras justo odio
- 6Dapibus ac facilisis in
- 12 Morbi leo risus
- 8Porta ac consectetur ac
- 5Vestibulum at eros
List group with Linked items
Custom content
List group item heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed molestie venenatis convallis.
List group item heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed molestie venenatis convallis.
List group item heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed molestie venenatis convallis.