Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Learn more

Panel Styles

Panel Default

Panel content

Panel Info

Panel content

Panel Warning

Panel content

Panel Success

Panel content

Panel Danger

Panel content

Panel Primary

Panel content

List Groups

With Badges & Labels

  • 14 Cras justo odio
  • 2 Dapibus ac facilisis in
  • 1 Morbi leo risus

List Group

  • Cras justo odio
  • Porta ac consectetur ac
  • Vestibulum at eros

Tabs


Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor.

Food truck fixie locavore Exercitation +1 labore velit, blog sartorial PBR leggings next Vegan fanny sapiente accusamus tattooed echo park.

Etsy mixtape wayfarers Bootply.com tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony.

Tabs Justified


Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor.

Food truck fixie locavore Exercitation +1 labore velit, blog sartorial PBR leggings next Vegan fanny sapiente accusamus tattooed echo park.

Etsy mixtape wayfarers gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony.

Tabs Dropdown


Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor.

Food truck fixie locavore Exercitation +1 labore velit, blog sartorial PBR leggings next Vegan fanny sapiente accusamus tattooed echo park.

Breadcrumbs

Pagination

Pager

Modal

Modal small

Popovers

Tooltips

Labels & Badge

Default Primary Success Info Warning Danger Default

Labels Sizes

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New

Progress Bars

35% Complete (info)
20% Complete (success)
10% Complete (warning)
60% Complete
35% Complete (info)
20% Complete (success)
10% Complete (warning)
35% Complete (info)
20% Complete (success)
10% Complete (warning)

Contextual classes

Use contextual classes to style list items, default or linked. Also includes .active state.
  • Dapibus ac facilisis in
  • Cras sit amet nibh libero
  • Porta ac consectetur ac
  • Vestibulum at eros

Custom content

With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.
100%x200

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

100%x200

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

100%x200

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.