Headings
Buttons
Default Primary Success Info Warning Danger
Default Primary Success Info Warning Danger
Default Primary Success Info Warning Danger
Default Primary Success Info Warning Danger
Default Primary Success Info Warning Danger
Default Primary Success Info Warning Danger
Progress Bars
Info with progress-bar-info class.
Success with progress-bar-success class.
Warning with progress-bar-warning class.
Danger with progress-bar-danger class.
Inverse with progress-bar-inverse class.
Inverse with progress-bar-inverse class.
Alerts
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.
Breadcrumbs
Badges
Add modifier classes to change the appearance of a badge.
| Classes | Badges |
|---|---|
| No modifiers | 42 |
.badge-primary |
1 |
.badge-success |
22 |
.badge-info |
30 |
.badge-warning |
412 |
.badge-danger |
777 |
Easily highlight new or unread items with the .badge class
Wells
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic
Unordered List
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
Ordered List
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
Forms
@
@example.com
$
.00
@
@
@
Tables
Default styles
For basic stylinglight padding and only horizontal add the base class .table to any <table>.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
Add any of the following classes to the .table base class.
Adds zebra-striping to any table row within the <tbody> via the :nth-child CSS selector (not available in IE7-8).
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
Add borders and rounded corners to the table.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| Mark | Otto | @getbootstrap | |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
Enable a hover state on table rows within a <tbody>.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||