Labels
Heading font variations for labels
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Variations
Based on extra colors
Badges
Variations
100 200 300 400 500 600 700 900 1000 1100 1200
Usage examples
Collapse
Default style
Variations
List groups
Basic
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
Badges
- Cras justo odio
- 2 Dapibus ac facilisis in
- 195 Morbi leo risus
- 420 Porta ac consectetur ac
- 969 Vestibulum at eros
Basic contextual
- Dapibus ac facilisis in
- Cras sit amet nibh libero
- Porta ac consectetur ac
- Vestibulum at eros
- Cyanide
- Meadow
- Cocktail
- Mango
- Berry
- Cello
- Hearts
- Party
- Midnight
- Concrete
- hollow
Custom content
List group item heading
235 Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
List group item heading
77 Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
List group item heading
9244 Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
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.
-
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.
Jumbotron
Note: jumbotron has rounded corners when within .container
(not the case below). This is a Bootstrap design decision.
Hello, world!
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
White text color available
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
Lighter background
Hello, world!
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
Bordered with transparent background
Hello, world!
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
Progress bars
Basic
Variations
Using extra colors
Modal
Tooltips
Popover
Live demo
Four directions
Gritter notifications
Flex video
4:3 is the default size for the .flex-video element, and the assumption for .flex-video for chrome (controls) height is based on YouTube.
Because Vimeo places their chrome on the player itself, adding a class of .vimeo creates a container that is sized for the video only — no extra padding for the controls.
Contextual backgrounds
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
Donec ullamcorper nulla non metus auctor fringilla.
Donec ullamcorper nulla non metus auctor fringilla.
Donec ullamcorper nulla non metus auctor fringilla.
Donec ullamcorper nulla non metus auctor fringilla.
Donec ullamcorper nulla non metus auctor fringilla.
Donec ullamcorper nulla non metus auctor fringilla.
Donec ullamcorper nulla non metus auctor fringilla.
Donec ullamcorper nulla non metus auctor fringilla.
Donec ullamcorper nulla non metus auctor fringilla.
Donec ullamcorper nulla non metus auctor fringilla.
Donec ullamcorper nulla non metus auctor fringilla.
Wizard
- 1Step 1
- 2Step 2
- 3Step 3
- 4Step 4
- 5Step 5