Badges
Wrap contexual color with .badge to change backgroun of badge .badge-default .badge-primary .badge-success .badge-info .badge-warning.
Use .badge-bordered class to get 3px border radius badge.
Use .badge-square class to get square badge.
Use .badge-medium .badge-large class 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 .label to change backgroun of label .label-default .label-primary .label-success .label-info .label-warning.
Use .label-bordered class to get 3px border radius label.
Use .label-square class to get square label.
Use .label-medium .label-large class 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.