Components

Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.

Default thumbnails

By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.

Highly customizable

With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.

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.

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

Action Action

Why use thumbnails

Thumbnails (previously .media-grid up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.

Simple, flexible markup

Thumbnail markup is simple—a ul with any number of li elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.

Uses grid column sizes

Lastly, the thumbnails component uses existing grid system classes—like .span2 or .span3—for control of thumbnail dimensions.

The markup

As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup for linked images:

<ul class="thumbnails">
  <li class="span3">
    <a href="#" class="thumbnail">
      <img src="http://placehold.it/210x150" alt="">
    </a>
  </li>
  ...
</ul>

For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <a> for a <div> like so:

<ul class="thumbnails">
  <li class="span3">
    <div class="thumbnail">
      <img src="http://placehold.it/210x150" alt="">
      <h5>Thumbnail label</h5>
      <p>Thumbnail caption right here...</p>
    </div>
  </li>
  ...
</ul>

More examples

Explore all your options with the various grid classes available to you. You can also mix and match different sizes.

Examples

Side navs can be just links, links with headings, and links with icons.

Your account

Why use it

Markup

Marking up a side nav is at the core just writing an unordered list of links.

  <ul class="nav-group">
    <li class="active">
      <a class="nav-item" href="#">Home</a>
    </li>
    <li><a class="nav-item" href="#">Library</a></li>
    <li><a class="nav-item" href="#">Help</a></li>
  </ul>

Bootstrap also makes it easy to expand a regular list of links with multiple groups and headings.

  <h6 class="nav-label"></h6>
  <ul class="nav-group">
    ...
  </ul>
  <h6 class="nav-label"></h6>
  <ul class="nav-group">
    ...
  </ul>

Static navbar example

An example of a static (not fixed to the top) navbar with project name, navigation, and search form.

Navbar scaffolding

The navbar requires only a few divs to structure it well for static or fixed display.

<div class="navbar navbar-static">
  <div class="navbar-inner">
    <div class="container" style="width: auto;">
      ...
    </div>
  </div>
</div>

To make the navbar fixed, swamp the .navbar-static class for .navbar-fixed. In your CSS, you will also need to account for the overlap it causes by adding padding-top: 40px; to your <body>.

<div class="navbar navbar-fixed">
  ...
</div>

Brand name

A simple link to show your brand or project name only requires an anchor tag.

<a class="brand" href="#">
  Project name
</a>

Search form

Search forms receive custom styles in the navbar with the .navbar-search class. Include .pull-left or .pull-right on the form to align it.

<form class="navbar-search">
  <input type="text" class="search-query pull-left" placeholder="Search">
</form>

Nav links

Nav items are simple to add via unordered lists.

<ul class="nav">
  <li class="active">
    <a href="#">Home</a>
  </li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
</ul>

Adding dropdowns to the nav is super simple, but does require the use of our javascript plugin.

<ul class="nav">
  <li class="dropdown">
    <a href="#"
          class="dropdown-toggle"
          data-toggle="dropdown">
          Account
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
</ul>

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