For quoting blocks of content from another source within your document.

Examples

Add .testimonial to any <blockquote>. To identify the source, add a <footer> element and wrap the name of the source in <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

John Doe, CEO

<blockquote class="testimonial">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer><cite>John Doe</cite>, CEO</footer>
</blockquote>

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Examples

Use .alert-striped-left or .alert-striped-right with any alert message to add a wider darkened left or right border.

No default class

Alerts don't have default classes, only base and modifier classes. A default gray alert doesn't make too much sense, so you're required to specify a type via contextual class. Choose from success, info, warning, or danger.

Well done! You successfully read this important alert message.

Heads up! This alert needs your attention, but it's not super important.

Warning! Better check yourself, you're not looking too good.

Oh snap! Change a few things up and try submitting again.

<div class="alert alert-success alert-striped-left" role="alert">...</div>
<div class="alert alert-info alert-striped-left" role="alert">...</div>
<div class="alert alert-warning alert-striped-right" role="alert">...</div>
<div class="alert alert-danger alert-striped-right" role="alert">...</div>

Provide contextual messages for users with the handful of available and flexible callouts.

Examples

Wrap any text in .callout and one of the four contextual classes (e.g., .callout-success) for basic callout messages.

No default class

Callouts don't have default classes, only base and modifier classes, so you're required to specify a type via contextual class. Choose from success, info, warning, or danger.

Well done! You successfully read this important alert message.

Heads up! This alert needs your attention, but it's not super important.

Warning! Better check yourself, you're not looking too good.

Oh snap! Change a few things up and try submitting again.

<div class="callout callout-success" role="callout">...</div>
<div class="callout callout-info" role="callout">...</div>
<div class="callout callout-warning" role="callout">...</div>
<div class="callout callout-danger" role="callout">...</div>

Responsive pricing tables that are easy to use.

The .pricing-plan-heading and .pricing-plan-footer elements are optional.

Default example

By default, mulitple pricing plans are meant to be shown inside a pricing table.

Lorem Ipsum is simply dummy text

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Beginner

FREE

5 GB upload quota
10 GB file storage
Up to 2 Mbps download speed
Professional support

Premium

$49 mo

20 GB upload quota
100 GB file storage
Exceptional download speed
Professional support

Elite

$99 mo

Unlimited upload quota
Unlimited file storage
Exceptional download speed
Priority professional support

<div class="pricing-plans">
  <div class="pricing-plan-heading">
    <h1>Lorem Ipsum is simply dummy text</h1>
    <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div class="row">
    <div class="col-md-4 col-sm-4">
      <div class="pricing-plan">
        <div class="pricing-plan-title">
          <span class="glyphicon glyphicon-knight icon"></span>
          <h1>Beginner</h1>
        </div>
        <div class="pricing-plan-price">FREE</div>
        <div class="pricing-plan-body">
          <ul>
            <li><strong>5 GB</strong> upload quota</li>
            <li><strong>10 GB</strong> file storage</li>
            <li><strong>Up to 2 Mbps</strong> download speed</li>
            <li><strong>Professional support</strong></li>
          </ul>
          <button class="btn btn-primary" type="button">Free Trial</button>
        </div>
      </div>
    </div>
    <div class="col-md-4 col-sm-4">
      <div class="pricing-plan">
        <div class="pricing-plan-title">
          <span class="glyphicon glyphicon-tower icon"></span>
          <h1>Premium</h1>
        </div>
        <div class="pricing-plan-price">$49 <small>mo</small></div>
        <div class="pricing-plan-body">
          <ul>
            <li><strong>20 GB</strong> upload quota</li>
            <li><strong>100 GB</strong> file storage</li>
            <li><strong>Exceptional</strong> download speed</li>
            <li><strong>Professional support</strong></li>
          </ul>
          <button class="btn btn-primary" type="button">Free Trial</button>
        </div>
      </div>
    </div>
    <div class="col-md-4 col-sm-4">
      <div class="pricing-plan">
        <div class="pricing-plan-title">
          <span class="glyphicon glyphicon-music icon"></span>
          <h1>Elite</h1>
        </div>
        <div class="pricing-plan-price">$99 <small>mo</small></div>
        <div class="pricing-plan-body">
          <ul>
            <li><strong>Unlimited</strong> upload quota</li>
            <li><strong>Unlimited</strong> file storage</li>
            <li><strong>Exceptional</strong> download speed</li>
            <li><strong>Priority professional support</strong></li>
          </ul>
          <button class="btn btn-primary" type="button">Free Trial</button>
        </div>
      </div>
    </div>
  </div>
  <div class="pricing-plan-footer">
    <p class="text-muted">Sed suscipit diam magna, ac rhoncus lorem condimentum id.</p>
  </div>
</div>

Single plan example

If you want to present just a single pricing plan, use .pricing-plan-single for a wider layout.

Lorem Ipsum is simply dummy text

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

$49 mo

Unlimited upload quota and storage
Exceptional download speed
Feel safe with our professional support
50+built-in templates
Customizable plan with lower price

<div class="pricing-plan-single">
  <div class="pricing-plan-heading">
    <h1>Lorem Ipsum is simply dummy text</h1>
    <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div class="pricing-plan-body">
    <div class="row">
          <div class="col-md-6">
            <div class="pricing-plan-price">$49 <small>mo</small></div>
          </div>
          <div class="col-md-6">
            <ul>
              <li><strong>Unlimited</strong> upload quota and storage</li>
              <li><strong>Exceptional</strong> download speed</li>
              <li>Feel safe with our<strong> professional support</strong></li>
              <li><strong>50+</strong>built-in templates</li>
              <li>Customizable plan with <strong>lower price</strong></li>
            </ul>
            <button class="btn btn-primary btn-lg" type="button">
              <strong>SIGN UP</strong>
              <div><small>30-days free trial<br/>
              All major credit cards accepted</small></div>
            </button>
          </div>
    </div>
  </div>
  <div class="pricing-plan-footer">
    <p class="text-muted">Sed suscipit diam magna, ac rhoncus lorem condimentum id.</p>
  </div>
</div>

Style an inline list to display social network icons.

A social icons list, which displays the icons dimmed and has a hover effect.

<ul class="list-social-icons">
  <li><a class="twitter" href="http://www.twitter.com/scottdorman" target="_blank"></a></li>
  <li><a class="github" href="http://www.github.com/scottdorman" target="_blank"></a></li>
  <li><a class="rss" href="http://www.geekswithblogs.net/sdorman" target="_blank"></a></li>
</ul>

You can always show the icons dimmed by adding .list-social-icons-dim or in full color by adding .list-social-icons-bright. Adding either of these classes will also disable the hover effect.

<ul class="list-social-icons list-social-icons-bright">
  ...
</ul>
<ul class="list-social-icons list-social-icons-dim">
  ...
</ul>

Fancy larger or smaller icons? Add .list-social-icons-sm, .list-social-icons-lg, or .list-social-icons-xl for additional sizes.

<ul class="list-social-icons list-social-icons-sm">
  ...
</ul>
<ul class="list-social-icons list-social-icons-lg">
  ...
</ul>
<ul class="list-social-icons list-social-icons-xl">
  ...
</ul>

Navs available in Bootstrap have shared markup, starting with the base .nav class, as well as shared states. Swap modifier classes to switch between each style.

Using navs for tab panels requires JavaScript tabs plugin

For tabs with tabbable areas, you must use the tabs JavaScript plugin. The markup will also require additional role and ARIA attributes – see the plugin's example markup for further details.

Make navs used as navigation accessible

If you are using navs to provide a navigation bar, be sure to add a role="navigation" to the most logical parent container of the <ul>, or wrap a <nav> element around the whole navigation. Do not add the role to the <ul> itself, as this would prevent it from being announced as an actual list by assistive technologies.

Tabs

Note the .nav-tabs class requires the .nav base class.

<ul class="nav nav-tabs nav-tabs-pivot">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

Justified

Easily make tabs equal widths of their parent at screens wider than 768px with .nav-justified. On smaller screens, the nav links are stacked.

Justified navbar nav links are currently not supported.

Safari and responsive justified navs

As of v8.0, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing. This bug is also shown in the justified nav example.

<ul class="nav nav-tabs nav-justified nav-tabs-pivot">
  ...
</ul>

Using dropdowns

Add dropdown menus with a little extra HTML and the dropdowns JavaScript plugin.

Tabs with dropdowns

<ul class="nav nav-tabs nav-tabs-pivot">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

Boxed content

While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component.