Badges
Wrap contexual color with .badgeto change backgroun of badge .badge-default.badge-primary.badge-success.badge-info.badge-warning.
Use .badge-borderedclass to get 3px border radius badge.
Use .badge-squareclass to get square badge.
Use .badge-medium .badge-largeclass for different sizes.
Tooltip
Use data-placement="left/top/right/bottom"to change the tooltip position.
Popover
Use data-placement="left/top/right/bottom"to change the popover position.
Alerts
Progress Bars
Basic Progress bar
With label
Large radius
Without radius
Contextual alternatives
Progress Bar Stripe
Progress Bar Stripe with animation
Panels
Basic panel
Panel with heading and footer
Contextual alternatives
Thumbnails
Thumbnails
Thumbnails
Labels
Labels comes with a same class as badge .labelto change backgroun of label .label-default.label-primary.label-success.label-info.label-warning.
Use .label-borderedclass to get 3px border radius label.
Use .label-squareclass to get square label.
Use .label-medium .label-largeclass for different sizes.
Labels with heading.
Heading 1 Default
Heading 2 Default
Heading 3 Default
Heading 4 Default
Heading 5 Default
Heading 6 Default
Notes
Default
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
Primary
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
Info
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
Warning
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
List Groups
Basic List group
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
Badge List group
- 14 Cras justo odio
- 8 Dapibus ac facilisis in
Linked Item
Contextual Classes
- Dapibus ac facilisis in
- Cras sit amet nibh libero
- Porta ac consectetur ac
- Vestibulum at eros
Media Object
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.