Other Components

Popovers, Tooltips

Popovers

Basic popovers Popover with header

Contextual classes

Tooltips

List Group

List group

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros

Linked items

Button items

Disabled item

Contextual classes

  • Dapibus ac facilisis in
  • Cras sit amet nibh libero
  • Porta ac consectetur ac
  • Vestibulum at eros

Custom content

Progress Bars

Progress bars

With label

60%

Striped

Animated

Stacked

Sizing

.progress-lg
Default size
.progress-sm
Wells

Default well

Look, I'm in a well!
Look, I'm in a large well!
Look, I'm in a small well!

Contextual alternatives

.bg-primary
.bg-info
.bg-success
.bg-warning
.bg-danger
.bg-inverse
Thumbnails

Thumbnails

Custom content

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.

Read more Next

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.

Read more Next

Media Objects

Default media

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.

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.

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.

Media alignment

Top aligned media

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Middle aligned media

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Bottom aligned media

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Pagination

Default pagination

Disabled and active states

Sizing

Pager

Aligned links

Optional disabled state

Use class .rounded for the .list-group , .progress , .well , .thumbnail , .pagination and .pager to make those rounded.
List Group

List group

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros

Linked items

Button items

Disabled item

Contextual classes

  • Dapibus ac facilisis in
  • Cras sit amet nibh libero
  • Porta ac consectetur ac
  • Vestibulum at eros

Custom content

Progress Bars

Progress bars

With label

60%

Striped

Animated

Stacked

Sizing

.progress-lg
Default size
.progress-sm
Wells

Default well

Look, I'm in a well!
Look, I'm in a large well!
Look, I'm in a small well!

Contextual alternatives

.bg-primary
.bg-info
.bg-success
.bg-warning
.bg-danger
.bg-inverse
Thumbnails

Thumbnails

Custom content

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.

Read more Next

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.

Read more Next

Pagination

Default pagination

Disabled and active states

Sizing

Pager

Aligned links

Optional disabled state

Use class .circle for the .progress , .well , .pagination and .pager to make those circle.
Wells

Default well

Look, I'm in a well!
Look, I'm in a large well!
Look, I'm in a small well!

Contextual alternatives

.bg-primary
.bg-info
.bg-success
.bg-warning
.bg-danger
.bg-inverse
Pagination

Default pagination

Disabled and active states

Sizing

Pager

Aligned links

Optional disabled state

Progress Bars

Progress bars

With label

60%

Striped

Animated

Stacked

Sizing

.progress-lg
Default size
.progress-sm