Contextual alternatives

Contextual alternatives

Progress bars use some of the same button and alert classes for consistent styles.

Progress bars use some of the same button and alert classes for consistent styles.

40% Complete (success)

40% Complete (success)

20% Complete

20% Complete

60% Complete (warning)

60% Complete (warning)

80% Complete (danger)

80% Complete (danger)

Striped

Striped

Uses a gradient to create a striped effect. Not available in IE9 and below.

Uses a gradient to create a striped effect. Not available in IE9 and below.

Animated

Animated

Add <code>.active</code> to <code>.progress-bar-striped</code> to animate the stripes right to left. Not available in IE9 and below.

Add <code>.active</code> to <code>.progress-bar-striped</code> to animate the stripes right to left. Not available in IE9 and below.

45% Complete

45% Complete

Toggle animation

Toggle animation

Stacked

Stacked

Place multiple bars into the same <code>.progress</code> to stack them.

Place multiple bars into the same <code>.progress</code> to stack them.

35% Complete (success)

35% Complete (success)

20% Complete (warning)

20% Complete (warning)

10% Complete (danger)

10% Complete (danger)

Media object

Media object

Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.

Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.

Default media

Default media

The default media displays a media object (images, video, audio) to the left or right of a content block.

The default media displays a media object (images, video, audio) to the left or right of a content block.

Generic placeholder image

Generic placeholder image

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.

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

Media heading

Nested media heading

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.

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.

The classes <code>.pull-left</code> and <code>.pull-right</code> also exist and were previously used as part of the media component, but are deprecated for that use as of v3.3.0. They are approximately equivalent to <code>.media-left</code> and <code>.media-right</code>, except that <code>.media-right</code> should be placed after the <code>.media-body</code> in the html.

The classes <code>.pull-left</code> and <code>.pull-right</code> also exist and were previously used as part of the media component, but are deprecated for that use as of v3.3.0. They are approximately equivalent to <code>.media-left</code> and <code>.media-right</code>, except that <code>.media-right</code> should be placed after the <code>.media-body</code> in the html.

Media alignment

Media alignment

The images or other media can be aligned top, middle, or bottom. The default is top aligned.

The images or other media can be aligned top, middle, or bottom. The default is top aligned.

Top aligned media

Top aligned media

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Middle aligned media

Middle aligned media

Bottom aligned media

Bottom aligned media

Media list

Media list

With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).

With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).

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 object -->

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 object -->

List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.

List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.

The most basic list group is simply an unordered list with list items, and the proper classes. Build upon it with the options that follow, or your own CSS as needed.

The most basic list group is simply an unordered list with list items, and the proper classes. Build upon it with the options that follow, or your own CSS as needed.

Cras justo odio

Cras justo odio

Dapibus ac facilisis in

Dapibus ac facilisis in

Morbi leo risus

Morbi leo risus

Porta ac consectetur ac

Porta ac consectetur ac

Vestibulum at eros

Vestibulum at eros

Add the badges component to any list group item and it will automatically be positioned on the right.

Add the badges component to any list group item and it will automatically be positioned on the right.

<span class="badge">14</span> Cras justo odio

<span class="badge">14</span> Cras justo odio

<span class="badge">2</span> Dapibus ac facilisis in

<span class="badge">2</span> Dapibus ac facilisis in

<span class="badge">1</span> Morbi leo risus

<span class="badge">1</span> Morbi leo risus

Linked items

Linked items

Linkify list group items by using anchor tags instead of list items (that also means a parent <code>&lt;div&gt;</code> instead of an <code>&lt;ul&gt;</code>). No need for individual parents around each element.

Linkify list group items by using anchor tags instead of list items (that also means a parent <code>&lt;div&gt;</code> instead of an <code>&lt;ul&gt;</code>). No need for individual parents around each element.

Button items

Button items