Available Icons

Includes 200 glyphs in font format from the Glyphicon Halflings set.

• glyphicon glyphicon-adjust
• glyphicon glyphicon-align-center
• glyphicon glyphicon-align-justify
• glyphicon glyphicon-align-left
• glyphicon glyphicon-align-right
• glyphicon glyphicon-arrow-down
• glyphicon glyphicon-arrow-left
• glyphicon glyphicon-arrow-right
• glyphicon glyphicon-arrow-up
• glyphicon glyphicon-asterisk
• glyphicon glyphicon-backward
• glyphicon glyphicon-ban-circle
• glyphicon glyphicon-barcode
• glyphicon glyphicon-bell
• glyphicon glyphicon-bold
• glyphicon glyphicon-book
• glyphicon glyphicon-bookmark
• glyphicon glyphicon-briefcase
• glyphicon glyphicon-bullhorn
• glyphicon glyphicon-calendar
• glyphicon glyphicon-camera
• glyphicon glyphicon-certificate
• glyphicon glyphicon-check
• glyphicon glyphicon-chevron-down
• glyphicon glyphicon-chevron-left
• glyphicon glyphicon-chevron-right
• glyphicon glyphicon-chevron-up
• glyphicon glyphicon-circle-arrow-down
• glyphicon glyphicon-circle-arrow-left
• glyphicon glyphicon-circle-arrow-right
• glyphicon glyphicon-circle-arrow-up
• glyphicon glyphicon-cloud
• glyphicon glyphicon-cloud-download
• glyphicon glyphicon-cloud-upload
• glyphicon glyphicon-cog
• glyphicon glyphicon-collapse-down
• glyphicon glyphicon-collapse-up
• glyphicon glyphicon-comment
• glyphicon glyphicon-compressed
• glyphicon glyphicon-copyright-mark
• glyphicon glyphicon-credit-card
• glyphicon glyphicon-cutlery
• glyphicon glyphicon-dashboard
• glyphicon glyphicon-download
• glyphicon glyphicon-download-alt
• glyphicon glyphicon-earphone
• glyphicon glyphicon-edit
• glyphicon glyphicon-eject
• glyphicon glyphicon-envelope
• glyphicon glyphicon-euro
• glyphicon glyphicon-exclamation-sign
• glyphicon glyphicon-expand
• glyphicon glyphicon-export
• glyphicon glyphicon-eye-close
• glyphicon glyphicon-eye-open
• glyphicon glyphicon-facetime-video
• glyphicon glyphicon-fast-backward
• glyphicon glyphicon-fast-forward
• glyphicon glyphicon-file
• glyphicon glyphicon-film
• glyphicon glyphicon-filter
• glyphicon glyphicon-fire
• glyphicon glyphicon-flag
• glyphicon glyphicon-flash
• glyphicon glyphicon-floppy-disk
• glyphicon glyphicon-floppy-open
• glyphicon glyphicon-floppy-remove
• glyphicon glyphicon-floppy-save
• glyphicon glyphicon-floppy-saved
• glyphicon glyphicon-folder-close
• glyphicon glyphicon-folder-open
• glyphicon glyphicon-font
• glyphicon glyphicon-forward
• glyphicon glyphicon-fullscreen
• glyphicon glyphicon-gbp
• glyphicon glyphicon-gift
• glyphicon glyphicon-glass
• glyphicon glyphicon-globe
• glyphicon glyphicon-hand-down
• glyphicon glyphicon-hand-left
• glyphicon glyphicon-hand-right
• glyphicon glyphicon-hand-up
• glyphicon glyphicon-hd-video
• glyphicon glyphicon-hdd
• glyphicon glyphicon-header
• glyphicon glyphicon-headphones
• glyphicon glyphicon-heart
• glyphicon glyphicon-heart-empty
• glyphicon glyphicon-home
• glyphicon glyphicon-import
• glyphicon glyphicon-inbox
• glyphicon glyphicon-indent-left
• glyphicon glyphicon-indent-right
• glyphicon glyphicon-info-sign
• glyphicon glyphicon-italic
• glyphicon glyphicon-leaf
• glyphicon glyphicon-link
• glyphicon glyphicon-list
• glyphicon glyphicon-list-alt
• glyphicon glyphicon-lock
• glyphicon glyphicon-log-in
• glyphicon glyphicon-log-out
• glyphicon glyphicon-magnet
• glyphicon glyphicon-map-marker
• glyphicon glyphicon-minus
• glyphicon glyphicon-minus-sign
• glyphicon glyphicon-move
• glyphicon glyphicon-music
• glyphicon glyphicon-new-window
• glyphicon glyphicon-off
• glyphicon glyphicon-ok
• glyphicon glyphicon-ok-circle
• glyphicon glyphicon-ok-sign
• glyphicon glyphicon-open
• glyphicon glyphicon-paperclip
• glyphicon glyphicon-pause
• glyphicon glyphicon-pencil
• glyphicon glyphicon-phone
• glyphicon glyphicon-phone-alt
• glyphicon glyphicon-picture
• glyphicon glyphicon-plane
• glyphicon glyphicon-play
• glyphicon glyphicon-play-circle
• glyphicon glyphicon-plus
• glyphicon glyphicon-plus-sign
• glyphicon glyphicon-print
• glyphicon glyphicon-pushpin
• glyphicon glyphicon-qrcode
• glyphicon glyphicon-question-sign
• glyphicon glyphicon-random
• glyphicon glyphicon-record
• glyphicon glyphicon-refresh
• glyphicon glyphicon-registration-mark
• glyphicon glyphicon-remove
• glyphicon glyphicon-remove-circle
• glyphicon glyphicon-remove-sign
• glyphicon glyphicon-repeat
• glyphicon glyphicon-resize-full
• glyphicon glyphicon-resize-horizontal
• glyphicon glyphicon-resize-small
• glyphicon glyphicon-resize-vertical
• glyphicon glyphicon-retweet
• glyphicon glyphicon-road
• glyphicon glyphicon-save
• glyphicon glyphicon-saved
• glyphicon glyphicon-screenshot
• glyphicon glyphicon-sd-video
• glyphicon glyphicon-search
• glyphicon glyphicon-send
• glyphicon glyphicon-share
• glyphicon glyphicon-share-alt
• glyphicon glyphicon-shopping-cart
• glyphicon glyphicon-signal
• glyphicon glyphicon-sort
• glyphicon glyphicon-sort-by-alphabet
• glyphicon glyphicon-sort-by-alphabet-alt
• glyphicon glyphicon-sort-by-attributes
• glyphicon glyphicon-sort-by-attributes-alt
• glyphicon glyphicon-sort-by-order
• glyphicon glyphicon-sort-by-order-alt
• glyphicon glyphicon-sound-5-1
• glyphicon glyphicon-sound-6-1
• glyphicon glyphicon-sound-7-1
• glyphicon glyphicon-sound-dolby
• glyphicon glyphicon-sound-stereo
• glyphicon glyphicon-star
• glyphicon glyphicon-star-empty
• glyphicon glyphicon-stats
• glyphicon glyphicon-step-backward
• glyphicon glyphicon-step-forward
• glyphicon glyphicon-stop
• glyphicon glyphicon-subtitles
• glyphicon glyphicon-tag
• glyphicon glyphicon-tags
• glyphicon glyphicon-tasks
• glyphicon glyphicon-text-height
• glyphicon glyphicon-text-width
• glyphicon glyphicon-th
• glyphicon glyphicon-th-large
• glyphicon glyphicon-th-list
• glyphicon glyphicon-thumbs-down
• glyphicon glyphicon-thumbs-up
• glyphicon glyphicon-time
• glyphicon glyphicon-tint
• glyphicon glyphicon-tower
• glyphicon glyphicon-transfer
• glyphicon glyphicon-trash
• glyphicon glyphicon-tree-conifer
• glyphicon glyphicon-tree-deciduous
• glyphicon glyphicon-unchecked
• glyphicon glyphicon-upload
• glyphicon glyphicon-usd
• glyphicon glyphicon-user
• glyphicon glyphicon-volume-down
• glyphicon glyphicon-volume-off
• glyphicon glyphicon-volume-up
• glyphicon glyphicon-warning-sign
• glyphicon glyphicon-wrench
• glyphicon glyphicon-zoom-in
• glyphicon glyphicon-zoom-out

Available Icons

Includes 200 glyphs in font format from the Glyphicon Halflings set.

How to Use

For performance reasons, all icons require a base class and individual icon class. To use, place the following code just about anywhere. Be sure to leave a space between the icon and text for proper padding.

<span class="glyphicon glyphicon-search"></span>

Examples

Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star"></span> Star
</button>

Supplement Facts Table

<div class="supplement-facts-table">
  <p class="caution"><b>Caution:</b> Contraindicated in known allergy to plants of the daisy family. Not to be used during pregnancy and lactation unless otherwise directed by a qualified health care professional.</p>
  <table class="table-product">
    <thead>
      <tr>
        <th class="title" colspan="3">Supplement Facts</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="servings" colspan="3">Serving Size: 3 Tablets <span>Servings per Container: 30</span></td>
      </tr>
      <tr>
        <td class="stroke-large" colspan="3"></td>
      </tr>
      <tr>
        <td class="amount-title" colspan="3">Amount per Serving <span>%DV</span></td>
      </tr>
      <tr>
        <td class="stroke-small" colspan="3"></td>
      </tr>
      <tr>
        <td class="name">Calories</td>
        <td class="measure">4</td>
        <td class="percent"></td>
      </tr>
      <tr>
        <td class="name">Vitamin A</td>
        <td class="measure">1,200 IU</td>
        <td class="percent">25%</td>
      </tr>
      <tr>
        <td class="stroke-large" colspan="3"></td>
      </tr>
      <tr>
        <td class="ingredient" colspan="3">
          <p>Proprietary Blend: 766 mg</p>
          <p>Defatted wheat (germ), carrot (root), calcium lactate, nutritional yeast, bovine adrenal, bovine liver, magnesium citrate, bovine spleen, ovine spleen, bovine kidney, dried pea (vine) juice, dried alfalfa (whole plant) juice, mushroom, oat flour, soybean lecithin, and rice (bran).</p>
        </td>
      </tr>
      <tr>
        <td class="stroke-large" colspan="3"></td>
      </tr>
      <tr>
        <td class="disclaimer" colspan="3">
          <p>†Daily Value (DV) not established.</p>
        </td>
      </tr>
    </tbody>
  </table>
  <div class="other">
    <p>Other Ingredients: Honey, glycerin, arabic gum, ascorbic acid, calcium stearate, cholecalciferol, pyridoxine hydrochloride, starch, sucrose (beets), vitamin A palmitate, cocarboxylase, and riboflavin.</p>
  </div>
</div>
  <p class="contraindications">For other contraindications and cautions specific to this product, please refer to the <a href="">Contraindications and Cautions for MediHerb Botanicals</a>.</p>

Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with our buttons plugin.

Basic Example

<div class="btn-group">
  <button class="btn btn-default">Left</button>
  <button class="btn btn-default">Middle</button>
  <button class="btn btn-default">Right</button>
</div>

Button Toolbar

Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.

<div class="btn-toolbar">
   
  <div class="btn-group">
    ...
  </div>
   
  <div class="btn-group">
    ...
  </div>
   
</div>

Sizing

Instead of applying button sizing classes to every button in a group, just add .btn-group-* to the .btn-group.

<div class="btn-group btn-group-lg">...</div>
<div class="btn-group">...</div>
<div class="btn-group btn-group-sm">...</div>
<div class="btn-group btn-group-xs">...</div>

Nesting

Place a .btn-group within another .btn-group when you want dropdown menus mixed with a series of buttons.

<div class="btn-group btn-group-lg">...</div>
<div class="btn-group">...</div>
<div class="btn-group btn-group-sm">...</div>
<div class="btn-group btn-group-xs">...</div>

Vertical Variation

Make a set of buttons appear vertically stacked rather than horizontally.

<div class="btn-group-vertical">
  ...
</div>

Justified link variation

Make a group of buttons stretch at the same size to span the entire width of its parent. Also works with button dropdowns within the button group.

<div class="btn-group btn-group-justified">
  ...
</div>

Button Dropdowns

Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.

Single Button Dropdowns

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Split Button Dropdowns

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Sizing

<!-- Large button group -->
<div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
    Large button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>
 
<!-- Small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
    Small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>
 
<!-- Extra small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
    Extra small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

Dropup Variation

<div class="btn-group dropup">
  <button type="button" class="btn btn-default">Dropup</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Input Groups

Extend form controls by adding text or buttons before, after, or on both sides of any text-based input. Use .input-group with an .input-group-addon to prepend or append elements to a .form-control.

Basic Example

<div class="input-group">
  <span class="input-group-addon">@</span>
  <input type="text" class="form-control" placeholder="Username">
</div>
 
<div class="input-group">
  <input type="text" class="form-control">
  <span class="input-group-addon">.00</span>
</div>
 
<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control">
  <span class="input-group-addon">.00</span>
</div>

Sizing

Add the relative form sizing classes to the .input-group itself and contents within will automatically resize—no need for repeating the form control size classes on each element.

<div class="input-group input-group-lg">
  <span class="input-group-addon">@</span>
  <input type="text" class="form-control" placeholder="Username">
</div>
 
<div class="input-group">
  <input type="text" class="form-control">
  <span class="input-group-addon">.00</span>
</div>
 
<div class="input-group input-group-sm">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control">
  <span class="input-group-addon">.00</span>
</div>

Checkbox and radio addons

Place any checkbox or radio option within an input group's addon instead of text.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox">
      </span>
      <input type="text" class="form-control">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio">
      </span>
      <input type="text" class="form-control">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Button addons

Buttons in input groups are a bit different and require one extra level of nesting. Instead of .input-group-addon, you'll need to use .input-group-btn to wrap the buttons. This is required due to default browser styles that cannot be overridden.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Buttons with dropdowns

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input type="text" class="form-control">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
        <ul class="dropdown-menu pull-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Segmented buttons

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default" tabindex="-1">Action</button>
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
          <span class="caret"></span>
          <span class="sr-only">Toggle Dropdown</span>
        </button>
        <ul class="dropdown-menu" role="menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div>
      <input type="text" class="form-control">
    </div><!-- /.input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default" tabindex="-1">Action</button>
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
          <span class="caret"></span>
          <span class="sr-only">Toggle Dropdown</span>
        </button>
        <ul class="dropdown-menu pull-right" role="menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div>
    </div><!-- /.input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

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.

Tabs

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

<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">...</a></li>
  <li><a href="#">...</a></li>  
</ul>

Pills

Take that same HTML, but use .nav-pills instead:

<ul class="nav nav-pills">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">...</a></li>
  <li><a href="#">...</a></li>  
</ul>

Pills are also vertically stackable. Just add .nav-stacked.

<ul class="nav nav-pills nav-stacked">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">...</a></li>
  <li><a href="#">...</a></li>  
</ul>

Justified navigation

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

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

Disabled links

For any nav component (tabs, pills, or list), add .disabled for gray links and no hover effects.

<ul class="nav nav-pills">
  <li><a href="#">Clickable link</a></li>
  <li><a href="#">Clickable link</a></li>
  <li class="disabled"><a href="#">Disabled link</a></li>
</ul>

Using dropdowns

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

Tabs with dropdowns

<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Help</a></li>
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <span class="caret"></span></a>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </li>
  </ul>

Pills with dropdowns

<ul class="nav nav-pills">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Help</a></li>
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <span class="caret"></span></a>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </li>
  </ul>

Indicate the current page's location within a navigational hierarchy.

Separators are automatically added in CSS through :before and content.

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

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

<ul div class="pagination">
  <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>

Disabled and Active States

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

<ul class="pagination">
  <li class="disabled"><a href="#">Prev</a></li>
  <li class="active"><a href="#">1</a></li>
  ...
</ul>

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

<ul class="pagination">
  <li class="disabled"><span>Prev</span></li>
  <li class="active"><span>1</span></li>
  ...
</ul>

Sizing

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

<ul class="pagination pagination-lg">...</ul>
<ul class="pagination">...</ul>
<ul class="pagination pagination-sm">...</ul>

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

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="#">Previous</a></li>
  <li class="next"><a href="#">Next</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="#">Previous</a></li>
  <li class="next"><a href="#">Next</a></li>
</ul>

Labels

Example

<h3>Example heading <span class="label label-default">New</span></h3>

Available variations

Add any of the below mentioned modifier classes to change the appearance of a label.

Labels	Markup
Default	<span class="label">Default</span>
Primary	<span class="label label-primary">Primary</span>
Success	<span class="label label-success">Success</span>
Info	<span class="label label-info">Info</span>
Warning	<span class="label label-warning">Warning</span>
Danger	<span class="label label-danger">Danger</span>

Badges

Easily highlight new or unread items by adding a <span class="badge"> to links, Bootstrap navs, and more.

<a href="#">Inbox <span class="badge">42</span></a>

Self collapsing

When there are no new or unread items, badges will simply collapse (via CSS's :empty selector) provided no content exists within.

Adapts to active nav states

Built-in styles are included for placing badges in active states in pill and list navigations.

<ul class="nav nav-pills nav-stacked">
  <li class="active">
    <a href="#">
      <span class="badge pull-right">42</span>
      Home
    </a>
  </li>
  ...
</ul>

A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site.

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
</div>

To make the jumbotron full width, and without rounded corners, place it outside all .containers and instead add a .container within.

<div class="jumbotron">
  <div class="container">
    ...
  </div>
</div>

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 as most other components (with additional styles).

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

Thumbnails

Extend the grid system with the thumbnail component to easily display grids of images, videos, text, and more.

Default Thumbnails

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

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img data-src="holder.js/100%x180" alt="...">
    </a>
  </div>
  ...
</div>

Custom thumbnails

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

<div class="row">
  <div class="col-sm-12 col-md-8">
    <div class="thumbnail">
      <img data-src="holder.js/300x200" alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
   
  <div class="col-sm-12 col-md-8">
    <div class="thumbnail">
      <img data-src="holder.js/300x200" alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
   
  <div class="col-sm-12 col-md-8">
    <div class="thumbnail">
      <img data-src="holder.js/300x200" alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. For inline dismissal, use the alerts jQuery plugin.

Examples

Wrap any text and an optional dismiss button in .alert and one of the four contextual classes (e.g., .alert-success) for basic alert messages.

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

Dismissable alerts

Build on any alert by adding an optional .alert-dismissable and close button.

<div class="alert alert-warning alert-dismissable">
  <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
  <strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>

Links in alerts

Use the .alert-link utility class to quickly provide matching colored links within any alert.

<div class="alert alert-success">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger">
  <a href="#" class="alert-link">...</a>
</div>