BACK CLOSE
  1. Dashboard
  2. UI Elements

Alerts

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.

Notifications

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

List Group

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

Basic example with Badges
  • 14 Cras justo odio
  • 2 Dapibus ac facilisis in
  • 1 Morbi leo risus
Linked items
Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros
Contextual classes
Dapibus ac facilisis in Cras sit amet nibh libero Porta ac consectetur ac Vestibulum at eros
Custom content

Add nearly any HTML within, even for linked list groups like the one below.

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Tooltips

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.

Popovers

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

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

Media Objects

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.

Thumbnails

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

Default
100%x180
100%x180
100%x180
100%x180
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

Progress Bars

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

Labels and Badges

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

Pagination

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

Dynamic Pagination

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:

      Wells

      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!

      Image shapes

      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