Components

Dozens of reusable components are built into Bootstrap to provide 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>

Fixed navbar

What is it

Our navbar is a fixed bar that houses a website’s logo or name, primary navigation, and search form.

Customizable

All elements within, and the entire navbar as well, are optional. You can choose to include a logo/name, nav, search, and a secondary nav—or any combination of that.

Dropdowns included

As part of the main navigation, we’ve included the ability for you to add dropdowns to your nav. Check out the secondary nav above (right aligned) to see how it’s done. Dropdowns <li> tags also support .active for showing current page selection.

Note: When using the navbar on any page, be sure to account for the overlap it causes by adding padding-top: 40px; to your <body>.

Tabs and pills

Create simple secondary navigation with a <ul>. Swap between tabs or pills by adding the appropriate class.

Great for sub-sections of content like our account settings pages and user timelines for toggling between pages of like content. Available in tabbed or pill styles.

Basic tabs example

Tabs can be used as regular navigation (loading external pages in the same tab) or as tabbable content areas for swapping out panes of content. We have a tabs plugin that can be used to integrate the latter.

<ul class="tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
  <li><a href="#">Settings</a></li>
  <li><a href="#">Contact</a></li>
</ul>

Tabbable tabs

As mentioned above, you can bring your tabs to life with a simple plugin. Here we have integrated all four variations of the tabs—default (top), right, bottom, left—with example tab areas.

Section 1
Section 2
Section 3
Section 4

Oh hai #1!

Oh hai #2!

Oh hai #3!

Oh hai #4!

Section 1
Section 2
Section 3

Section 1

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.

Section 2

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.

Section 3

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.

Section 1
Section 2
Section 3

Section 1

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.

Section 2

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.

Section 3

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.

Oh hai #1!

Oh hai #2!

Oh hai #3!

Oh hai #4!

Section 1
Section 2
Section 3
Section 4

In addition to tabs, we have pills! Though a bit more limited in functionality, they share much of the same markup.

Basic pills example

<ul class="pills">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
  <li><a href="#">Settings</a></li>
  <li><a href="#">Contact</a></li>
</ul>

Vertical pill nav

With a pill-style nav, you can also stack the list items to have a simple sidebar. We don't offer left or right aligned versions here because that's easy enough to customize based on your own needs

Breadcrumbs

Breadcrumb navigation is used as a way to show users where they are within an app or a site, but not for primary navigation.

<ul class="breadcrumb">
  <li><a href="#">Home</a> <span class="divider">/</span></li>
  <li><a href="#">Middle page</a> <span class="divider">/</span></li>
  <li><a href="#">Another one</a> <span class="divider">/</span></li>
  <li class="active">You are here</li>
</ul>

Step nav

Placeholder for now!

Pagination

Ultra simplistic and minimally styled pagination inspired by Rdio. The large block is hard to miss, easily scalable, and provides large click areas.

←
10
11
…
20
21
→

←
10
11
12
13
14
→

<div class="pagination">
  <ul>
    <li class="prev disabled"><a href="#">&larr; Previous</a></li>
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li class="next"><a href="#">Next &rarr;</a></li>
  </ul>
</div>

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.

Take this action Or do this

×

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

Take this action Or do this

×

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

Take this action Or do this

×

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

Take this action Or do this

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 »