Standard pagination

Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.

<div class="pagination">
  <ul>
    <li><a href="#">Prev</a></li>
    <li><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><a href="#">Next</a></li>
  </ul>
</div>

Options

• Disabled and active states

Links are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.

• «
• 1
• 2
• 3
• 4
• 5
• »

<div class="pagination">
  <ul>
    <li class="disabled"><a href="#">&laquo;</a></li>
    <li class="active"><a href="#">1</a></li>
    ...
  </ul>
</div>

You can optionally swap out active or disabled anchors for spans to remove click functionality while retaining intended styles.

<div class="pagination">
  <ul>
    <li class="disabled"><span>&laquo;</span></li>
    <li class="active"><span>1</span></li>
    ...
  </ul>
</div>

• Sizes

Fancy larger or smaller pagination? Add .pagination-large, .pagination-small, or .pagination-mini for additional sizes.

• «
• 1
• 2
• 3
• 4
• 5
• »
• «
• 1
• 2
• 3
• 4
• 5
• »
• «
• 1
• 2
• 3
• 4
• 5
• »
• «
• 1
• 2
• 3
• 4
• 5
• »

<div class="pagination pagination-large">
  <ul>
    ...
  </ul>
</div>
<div class="pagination">
  <ul>
    ...
  </ul>
</div>
<div class="pagination pagination-small">
  <ul>
    ...
  </ul>
</div>
<div class="pagination pagination-mini">
  <ul>
    ...
  </ul>
</div>

• Alignment

Add one of two optional classes to change the alignment of pagination links: .pagination-centered and .pagination-right.

• «
• 1
• 2
• 3
• 4
• 5
• »

<div class="pagination pagination-centered">
  ...
</div>

• «
• 1
• 2
• 3
• 4
• 5
• »

<div class="pagination pagination-right">
  ...
</div>

Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.

• Default example

By default, the pager centers links.

• Previous
• Next

<ul class="pager">
  <li><a href="#">Previous</a></li>
  <li><a href="#">Next</a></li>
</ul>

• Aligned links

Alternatively, you can align each link to the sides:

• ← Older
• Newer →

<ul class="pager">
  <li class="previous">
    <a href="#">&larr; Older</a>
  </li>
  <li class="next">
    <a href="#">Newer &rarr;</a>
  </li>
</ul>

• Optional disabled state

Pager links also use the general .disabled utility class from the pagination.

• ← Older
• Newer →

<ul class="pager">
  <li class="previous disabled">
    <a href="#">&larr; Older</a>
  </li>
  ...
</ul>

• Hero unit

A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Learn more

<div class="hero-unit">
  <h1>Heading</h1>
  <p>Tagline</p>
  <p>
    <a class="btn btn-primary btn-large">
      Learn more
    </a>
  </p>
</div>

• Page header

A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small, element as well most other components (with additional styles).

Example page header Subtext for header

<div class="page-header">
  <h1>Example page header 
  <small>
  	Subtext for header
  </small>
 </h1>
</div>

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.

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.

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="span4">
    <a href="#" class="thumbnail">
      <img data-src="holder.js/300x200" 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="span4">
    <div class="thumbnail">
      <img data-src="holder.js/300x200" alt="">
      <h3>Thumbnail label</h3>
      <p>Thumbnail caption...</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.