Components

Reusable patterns for navigation, alerts, popovers, and much more

Media grid

Display thumbnails of varying sizes on pages with a low HTML footprint and minimal styles.

Example thumbnails

Thumbnails in the .media-grid can be any size, but they work best when mapped directly to the built-in Bootstrap grid system. Image widths like 90, 210, and 330 combine with a few pixels of padding to equal the .span2, .span4, and .span6 column sizes.

Large

Medium

Small

Coding them

Media grids are easy to use and rather simple on the markup side. Their dimensions are purely based on the size of the images included.

<ul class="media-grid">
  <li>
    <a href="#">
      <img class="thumbnail" src="http://placehold.it/330x230" alt="">
    </a>
  </li>
  <li>
    <a href="#">
      <img class="thumbnail" src="http://placehold.it/330x230" alt="">
    </a>
  </li>
</ul>

Basic alerts

.alert-message

One-line messages for highlighting the failure, possible failure, or success of an action. Particularly useful for forms.

Get the javascript »

×

Holy guacamole! Best check yo self, you’re not looking too good.

×

Oh snap! Change this and that and try again.

×

Well done! You successfully read this alert message.

×

Heads up! This is an alert that needs your attention, but it’s not a huge priority just yet.

Example code

<div class="alert-message warning">
  <a class="close" href="#">×</a>
  <p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p>
</div>

Block messages

<div class="alert-message block-message">

For messages that require a bit of explanation, we have paragraph style alerts. These are perfect for bubbling up longer error messages, warning a user of a pending action, or just presenting information for more emphasis on the page.

Get the javascript »

×

Holy guacamole! This is a warning! Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

×

Oh snap! You got an error! Change this and that and try again.

  • Duis mollis est non commodo luctus
  • Nisi erat porttitor ligula
  • Eget lacinia odio sem nec elit
×

Well done! You successfully read this alert message. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum.

×

Heads up! This is an alert that needs your attention, but it’s not a huge priority just yet.

Example code

<div class="alert-message block-message warning">
  <a class="close" href="#">×</a>
  <p><strong>Holy guacamole! This is a warning!</strong> Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
  <div class="alert-actions">
    <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
  </div>
</div>

Modals

Modals—dialogs or lightboxes—are great for contextual actions in situations where it’s important that the background context be maintained.

Get the javascript »

Tooltips

Twipsies are super useful for aiding a confused user and pointing them in the right direction.

Get the javascript »

Lorem ipsum dolar sit amet illo error ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt sed dicta quae accusantium fugit voluptas nemo voluptas voluptatem rem quae aut veritatis quasi quae.

Popovers

Use popovers to provide subtextual information to a page without affecting layout.

Get the javascript »

Popover Title

Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.