Wrap any text and an optional dismiss button in .alert and one of the four contextual classes (e.g., .alert-success ) for basic alert messages.

Use the .alert-link utility class to quickly provide matching colored links within any alert.

Well done! You successfully read this important alert message .
Heads up! This alert needs your attention , but it's not super important.
Warning! Better check yourself, you're not looking too good .
Oh snap! Change a few things up and try submitting again.

Error!

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Take this action Or do this

Success!

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Take this action Or do this

Info!

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Take this action Or do this

Warning!

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Take this action Or do this

Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. twitter handle freegan cred raw denim single-origin coffee viral.

Tight pants next level keffiyeh trigger me on click haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel trigger me on hover terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa.

Pulsate any page elements.
Repeating Pulsate
NOTE! Pulsate works in Chrome, Safari and Firefox. Prettiest in Firefox since it supports Outline-radius

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.

  • 64x64

    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.

    64x64

    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.
    64x64

    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.
    64x64

    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.
  • 64x64

    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.

Extend Bootstrap's grid system with the thumbnail component to easily display grids of images, videos, text, and more.

Default
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.

Button Button

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

Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.

Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox. Versions earlier than Internet Explorer 10 and Opera 12 do not support animations.
Basic
60% Complete
40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete
Striped
60% Complete (success)
40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)
Animated
60% Complete
40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)
Stacked
35% Complete (success)
20% Complete (warning)
10% Complete (danger)
With label
60%
Animated When Appear With Custom Style
Available labels
Labels Class
Default label label-default
Success label label-success
Warning label label-warning;
Danger label label-danger
Info label label-info
Inverse label label-inverse
Available badges
Example Class
1 badge badge-default
2 badge badge-success
4 badge badge-warning
6 badge badge-danger
8 badge badge-info
10 badge badge-inverse

Provide pagination links for your site or app with the multi-page pagination component, or the simpler pager alternative. Simple pagination, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.

Basic
Colorful
Pager Default
Aligned links
Optional disabled state
page-clicked Event
Click on the pages to trigger the page-clicked event.
    page-changed Event
    Click on the pages to trigger the page-clicked event.
      Go to page:

      Use the well as a simple effect on an element to give it an inset effect.

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

      Add classes to an <img> element to easily style images in any project.

      A generic square placeholder image with rounded corners A generic square placeholder image where only the portion within the circle circumscribed about said square is visible A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera