Pagination

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.

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

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

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

Pager

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.

    <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:

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

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

Labels and badges

Labels

Labels Markup
Default <span class="label">Default</span>
Success <span class="label label-success">Success</span>
Warning <span class="label label-warning">Warning</span>
Important <span class="label label-important">Important</span>
Info <span class="label label-info">Info</span>
Inverse <span class="label label-inverse">Inverse</span>

Badges

Name Example Markup
Default 1 <span class="badge">1</span>
Success 2 <span class="badge badge-success">2</span>
Warning 4 <span class="badge badge-warning">4</span>
Important 6 <span class="badge badge-important">6</span>
Info 8 <span class="badge badge-info">8</span>
Inverse 10 <span class="badge badge-inverse">10</span>
Easily collapsible

For easy implementation, labels and badges will simply collapse (via CSS's :empty selector) when no content exists within.


Typographic components

  • 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).

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

Thumbnails

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

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


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.