Web Style Guide

Glyphicons

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.

Don't mix with other components

Icon classes cannot be combined with other elements. They are designed to be standalone elements.

<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

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

Supplement Facts
Serving Size: 3 Tablets Servings per Container: 30
Amount per Serving %DV
Calories 4
Vitamin A 1,200 IU 25%
Vitamin C 4 mg 6%
Vitamin D 312 IU 80%
Thiamine 0.2 mg 15%
Riboflavin 0.2 mg 15%
Vitamin B6 1 mg 50%

Proprietary Blend: 766 mg

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

†Daily Value (DV) not established.

Other Ingredients: Honey, glycerin, arabic gum, ascorbic acid, calcium stearate, cholecalciferol, pyridoxine hydrochloride, starch, sucrose (beets), vitamin A palmitate, cocarboxylase, and riboflavin.

For other contraindications and cautions specific to this product, please refer to the Contraindications and Cautions for MediHerb Botanicals.

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

Tooltips & popovers in button groups require special setting

When using tooltips or popovers on elements within a .btn-group, you'll have to specify the option container: 'body' to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).

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.

Element-specific usage

This only works with <a> elements as the <button> doesn't pick up the styles we use to justify content (some display: table-cell;-fu).

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

Plugin dependency

Button dropdowns require the dropdown plugin to be included in the site.

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

Cross-browser compatibility

Avoid using <select> elements here as they cannot be fully styled in WebKit browsers.

Tooltips & popovers in input groups require special setting

When using tooltips or popovers on elements within an .input-group, you'll have to specify the option container: 'body' to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).

Don't mix with form groups

Do not apply input group classes directly to form groups. An input group is an isolated component.

Basic Example

@

.00

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

Requires JavaScript tabs plugin

For tabs with tabbable areas, you must use the tabs JavaScript plugin.

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.

Safari and responsive justified navs

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">
  ...
</ul>
 
<ul class="nav nav-pills nav-justified">
  ...
</ul>

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

Link functionality not impacted

This class will only change the <a>'s appearance, not its functionality. Use custom JavaScript to disable links here.

<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

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New
<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.

Cross-browser compatibility

Badges won't self collapse in Internet Explorer 8 because it lacks support for the :empty selector.

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.

Hello, world!

Suspendisse eu bibendum libero. Aliquam eu elit vel elit tincidunt rhoncus. Maecenas placerat sem vel magna ultrices eu tristique enim convallis. Fusce dignissim mattis adipiscing.

Learn more

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

...

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.

Button Button

...

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.

Button Button

...

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.

Button Button

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

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! Best check yo self, you're not looking too good.
Oh snap! Change a few things up and try submitting again.
<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.

Warning! Best check yo self, you're not looking too good.
<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>

Ensure proper behavior across all devices

Be sure to use the <button> element with the data-dismiss="alert" data attribute.

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

Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Best check yo self, you're not looking too good.
Oh snap! Change a few things up and try submitting again.
<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>