Included glyphs

Bootstrap comes with all 160 of Glyphicons Halflings set, all available in font formats for easy coloring, sizing, and placement.

• glyphicon-glass
• glyphicon-music
• glyphicon-search
• glyphicon-envelope
• glyphicon-heart
• glyphicon-star
• glyphicon-star-empty
• glyphicon-user
• glyphicon-film
• glyphicon-th-large
• glyphicon-th
• glyphicon-th-list
• glyphicon-ok
• glyphicon-remove
• glyphicon-zoom-in
• glyphicon-zoom-out
• glyphicon-off
• glyphicon-signal
• glyphicon-cog
• glyphicon-trash
• glyphicon-home
• glyphicon-file
• glyphicon-time
• glyphicon-road
• glyphicon-download-alt
• glyphicon-download
• glyphicon-upload
• glyphicon-inbox
• glyphicon-play-circle
• glyphicon-repeat
• glyphicon-refresh
• glyphicon-list-alt
• glyphicon-lock
• glyphicon-flag
• glyphicon-headphones
• glyphicon-volume-off
• glyphicon-volume-down
• glyphicon-volume-up
• glyphicon-qrcode
• glyphicon-barcode
• glyphicon-tag
• glyphicon-tags
• glyphicon-book
• glyphicon-bookmark
• glyphicon-print
• glyphicon-camera
• glyphicon-font
• glyphicon-bold
• glyphicon-italic
• glyphicon-text-height
• glyphicon-text-width
• glyphicon-align-left
• glyphicon-align-center
• glyphicon-align-right
• glyphicon-align-justify
• glyphicon-list
• glyphicon-indent-left
• glyphicon-indent-right
• glyphicon-facetime-video
• glyphicon-picture
• glyphicon-pencil
• glyphicon-map-marker
• glyphicon-adjust
• glyphicon-tint
• glyphicon-edit
• glyphicon-share
• glyphicon-check
• glyphicon-move
• glyphicon-step-backward
• glyphicon-fast-backward
• glyphicon-backward
• glyphicon-play
• glyphicon-pause
• glyphicon-stop
• glyphicon-forward
• glyphicon-fast-forward
• glyphicon-step-forward
• glyphicon-eject
• glyphicon-chevron-left
• glyphicon-chevron-right
• glyphicon-plus-sign
• glyphicon-minus-sign
• glyphicon-remove-sign
• glyphicon-ok-sign
• glyphicon-question-sign
• glyphicon-info-sign
• glyphicon-screenshot
• glyphicon-remove-circle
• glyphicon-ok-circle
• glyphicon-ban-circle
• glyphicon-arrow-left
• glyphicon-arrow-right
• glyphicon-arrow-up
• glyphicon-arrow-down
• glyphicon-share-alt
• glyphicon-resize-full
• glyphicon-resize-small
• glyphicon-plus
• glyphicon-minus
• glyphicon-asterisk
• glyphicon-exclamation-sign
• glyphicon-gift
• glyphicon-leaf
• glyphicon-fire
• glyphicon-eye-open
• glyphicon-eye-close
• glyphicon-warning-sign
• glyphicon-plane
• glyphicon-calendar
• glyphicon-random
• glyphicon-comment
• glyphicon-magnet
• glyphicon-chevron-up
• glyphicon-chevron-down
• glyphicon-retweet
• glyphicon-shopping-cart
• glyphicon-folder-close
• glyphicon-folder-open
• glyphicon-resize-vertical
• glyphicon-resize-horizontal
• glyphicon-hdd
• glyphicon-bullhorn
• glyphicon-bell
• glyphicon-certificate
• glyphicon-thumbs-up
• glyphicon-thumbs-down
• glyphicon-hand-right
• glyphicon-hand-left
• glyphicon-hand-up
• glyphicon-hand-down
• glyphicon-circle-arrow-right
• glyphicon-circle-arrow-left
• glyphicon-circle-arrow-up
• glyphicon-circle-arrow-down
• glyphicon-globe
• glyphicon-wrench
• glyphicon-tasks
• glyphicon-filter
• glyphicon-briefcase
• glyphicon-fullscreen
• glyphicon-dashboard
• glyphicon-paperclip
• glyphicon-heart-empty
• glyphicon-link
• glyphicon-phone
• glyphicon-pushpin
• glyphicon-euro
• glyphicon-usd
• glyphicon-gbp
• glyphicon-sort
• glyphicon-sort-by-alphabet
• glyphicon-sort-by-alphabet-alt
• glyphicon-sort-by-order
• glyphicon-sort-by-order-alt
• glyphicon-sort-by-attributes
• glyphicon-sort-by-attributes-alt
• glyphicon-unchecked
• glyphicon-expand
• glyphicon-collapse
• glyphicon-collapse-top

Glyphicons attribution

Glyphicons Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creator have made this possible at no cost to you as developers. As a thank you, we ask you to include an optional link back to Glyphicons whenever practical.

How to use

Add the appropriate class to any inline element. All icon classes are prefixed with glyphicon- for easy styling. To use, place the following code just about anywhere:

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

Want to change the icon color? Just change the color of the parent element.

When using beside strings of text, as in buttons or nav links, be sure to leave a space after the icon for proper spacing.

Icon examples

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

Buttons

Button group in a button toolbar

<div class="btn-toolbar">
  <div class="btn-group">
    <a class="btn btn-default" href="#"><span class="glyphicon glyphicon-align-left"></span></a>
    <a class="btn btn-default" href="#"><span class="glyphicon glyphicon-align-center"></span></a>
    <a class="btn btn-default" href="#"><span class="glyphicon glyphicon-align-right"></span></a>
    <a class="btn btn-default" href="#"><span class="glyphicon glyphicon-align-justify"></span></a>
  </div>
</div>

Dropdown in a button group

<div class="btn-group">
  <a class="btn btn-primary" href="#"><span class="glyphicon glyphicon-user"></span> User</a>
  <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
  <ul class="dropdown-menu">
    <li><a href="#"><span class="glyphicon glyphicon-pencil"></span> Edit</a></li>
    <li><a href="#"><span class="glyphicon glyphicon-trash"></span> Delete</a></li>
    <li><a href="#"><span class="glyphicon glyphicon-ban-circle"></span> Ban</a></li>
    <li class="divider"></li>
    <li><a href="#"><span class="glyphicon glyphicon-"></span> Make admin</a></li>
  </ul>
</div>

Large button

<a class="btn btn-default btn-large" href="#"><span class="glyphicon glyphicon-star"></span> Star</a>

Small button

<a class="btn btn-default btn-small" href="#"><span class="glyphicon glyphicon-star"></span></a>

Navigation

<ul class="nav nav-pills nav-stacked">
  <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
  <li><a href="#"><span class="glyphicon glyphicon-book"></span> Library</a></li>
  <li><a href="#"><span class="glyphicon glyphicon-pencil"></span> Applications</a></li>
  <li><a href="#"><span class="glyphicon glyphicon-"></span> Misc</a></li>
</ul>

Form fields

<div class="control-group">
  <label class="control-label" for="inputIcon">Email address</label>
  <div class="controls">
    <div class="input-group">
      <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
      <input class="col col-lg-2" id="inputIcon" type="text">
    </div>
  </div>
</div>

Toggleable, contextual menu for displaying lists of links. Made interactive with the dropdown JavaScript plugin.

Example

Wrap the dropdown's trigger and the dropdown menu within .dropdown, or another element that declares position: relative;. Then add the menu's HTML.

<div class="dropdown">
  <!-- Link or button to toggle dropdown -->
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
    <li><a tabindex="-1" href="#">Action</a></li>
    <li><a tabindex="-1" href="#">Another action</a></li>
    <li><a tabindex="-1" href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>

Aligning the menus

Add .pull-right to a .dropdown-menu to right align the dropdown menu.

<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel">
  ...
</ul>

Disabled menu options

Add .disabled to a <li> in the dropdown to disable the link.

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
  <li><a tabindex="-1" href="#">Regular link</a></li>
  <li class="disabled"><a tabindex="-1" href="#">Disabled link</a></li>
  <li><a tabindex="-1" href="#">Another link</a></li>
</ul>

Sub menus on dropdowns

Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup additions. Add .dropdown-submenu to any li in an existing dropdown menu for automatic styling.

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
  ...
  <li class="dropdown-submenu pull-left">
    <a tabindex="-1" href="#">More options</a>
    <ul class="dropdown-menu">
      <li><a tabindex="-1" href="#">Second level link</a></li>
      <li><a tabindex="-1" href="#">Second level link</a></li>
      <li><a tabindex="-1" href="#">Second level link</a></li>
      <li><a tabindex="-1" href="#">Second level link</a></li>
      <li><a tabindex="-1" href="#">Second level link</a></li>
    </ul>
  </li>
  ...
</ul>

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 button group

Wrap a series of buttons with .btn in .btn-group.

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

Multiple button groups

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 class="btn-group">...</div>
</div>

Nested button groups

Place buttons groups within button groups when you want dropdown menus mixed with a series of buttons.

Vertical button groups

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

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

Justified button groups

Make a group of buttons stretch at the same size to span the entire width of its parent. This only works with <a> elements as the <button> doesn't pick up these styles.

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

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

Single button dropdowns

Turn a button into dropdown toggle with some basic markup changes.

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

Similarly, create split button dropdowns with the same markup changes, only with a separate button.

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-default">Action</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    <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>

Works with all button sizes

Button dropdowns work with buttons of all sizes.

<!-- Large button group -->
<div class="btn-group">
  <button class="btn btn-default btn-large 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-small dropdown-toggle" type="button" data-toggle="dropdown">
    Small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>
</div>

Dropup buttons

Trigger dropdown menus above elements by adding .dropup to the parent.

<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>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

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="#">Profile</a></li>
  <li><a href="#">Messages</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="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</ul>

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

<ul class="nav nav-pills nav-stacked">
  ...
</ul>

Options

Justified links

Easily make tabs or pills equal widths of their parent with .nav-justified.

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

Disabled state

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

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

Component alignment

To align nav links, use the .pull-left or .pull-right utility classes. Both classes will add a CSS float in the specified direction.

Dropdowns

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

Tabs with dropdowns

<ul class="nav nav-tabs">
  ...
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

Pills with dropdowns

<ul class="nav nav-pills">
  ...
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

Basic navbar

To start, navbars are static (not fixed to the top) and include support for a project name and basic navigation. Place one anywhere within a .container, which sets the width of your site and content.

<div class="navbar">
  <a class="navbar-brand" href="#">Title</a>
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
  </ul>
</div>

Navbar components

Brand

A simple link to show your brand or project name only requires an anchor tag.

<a class="navbar-brand" href="#">Title</a>

Nav links

Nav items are simple to add via unordered lists.

<ul class="nav navbar-nav">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Link</a></li>
  <li class="disabled"><a href="#">Disabled</a></li>
</ul>

Forms

To properly style and position a form within the navbar, add the appropriate classes as shown below. For a default form, include .navbar-form and either .pull-left or .pull-right to properly align it.

<form class="navbar-form pull-left">
  <input type="text" style="width: 200px;">
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Buttons

For buttons not residing in a <form>, add this class to vertically center buttons within a navbar.

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

Text

Wrap strings of text in an element with .navbar-text, usually on a <p> tag for proper leading and color.

<div class="navbar">
  <a href="#" class="navbar-brand">Brand</a>
  <p class="navbar-text">Signed in as Mark Otto</p>
</div>

Links

For folks using standard links that are not within the regular navbar navigation component, use the .navbar-link class to add the proper colors for the default and inverse navbar options.

<div class="navbar">
  <a href="#" class="navbar-brand">Brand</a>
  <p class="pull-right navbar-text">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
</div>

Component alignment

Align nav links, forms, buttons, or text, using the .pull-left or .pull-right utility classes. Both classes will add a CSS float in the specified direction. To align nav links, put them in a separate <ul> with the respective utility class applied.

Optional display variations

Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, .navbar. These will also remove rounded corners.

Fixed to top

Add .navbar-fixed-top.

<div class="navbar navbar-fixed-top">
  ...
</div>

body { padding-top: 70px; }

Fixed to bottom

Add .navbar-fixed-bottom instead.

<div class="navbar navbar-fixed-bottom">
  ...
</div>

body { padding-bottom: 70px; }

Static top navbar

Create a full-width navbar that scrolls away with the page by adding .navbar-static-top. Unlike the .navbar-fixed-* classes, you do not need to change any padding on the body.

<div class="navbar navbar-static-top">
  ...
</div>

Responsive navbar

To implement a collapsing responsive navbar, wrap your navbar content in a containing div, .nav-collapse.collapse, and add the navbar toggle button, .navbar-toggle.

<div class="navbar">
  <div class="container">

    <!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>

    <!-- Be sure to leave the brand out there if you want it shown -->
    <a class="navbar-brand" href="#">Title</a>

    <!-- Place everything within .navbar-collapse to hide it until above 768px -->
    <div class="nav-collapse collapse navbar-responsive-collapse">
      ...
    </div><!-- /.nav-collapse -->
  </div><!-- /.container -->
</div><!-- /.navbar -->

Inverted variation

Modify the look of the navbar by adding .navbar-inverse.

<div class="navbar navbar-inverse">
  ...
</div>

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

Separators are automatically added in CSS through `:after` and `content`.

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

Provide pagination links for your site or app with the multi-page pagination component, or the simpler pager alternative.

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.

<ul class="pagination">
  <li><a href="#">«</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="#">»</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="#">«</a></li>
  <li class="active"><a href="#">1</a></li>
  ...
</ul>

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

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

Sizes

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

<ul class="pagination pagination-large">...</ul>
<ul class="pagination pagination">...</ul>
<ul class="pagination pagination-small">...</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 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="#">← Older</a></li>
  <li class="next"><a href="#">Newer →</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="#">← Older</a></li>
  <li class="next"><a href="#">Newer →</a></li>
</ul>

Example

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

Available variations

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

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

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-list">
  <li class="active">
    <a href="#">
      <span class="badge pull-right">42</span>
      Home
    </a>
  </li>
  ...
</ul>

Jumbotron

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

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</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 as most other components (with additional styles).

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

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

Default thumbnails

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

<div class="row">
  <div class="col col-lg-3">
    <a href="#" class="thumbnail">
      <img data-src="holder.js/260x180" alt="">
    </a>
  </div>
  ...
</div>

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

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

<div class="row">
  <div class="col col-lg-3">
    <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">Action</a> <a href="#" class="btn btn-default">Action</a></p>
      </div>
    </div>
  </div>
</div>

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.

Default alert

Wrap any text and an optional dismiss button in .alert for a basic warning alert message. To ensure proper behavior across all devices, be sure to use <button> element with the data-dismiss="alert" data attribute.

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

Block alerts

For longer messages, increase the padding on the top and bottom of the alert wrapper by adding .alert-block.

<div class="alert alert-block">
  <button type="button" class="close" data-dismiss="alert">×</button>
  <h4>Warning!</h4>
  <p>...</p>
</div>

Contextual alternatives

Add optional classes to change an alert's connotation.

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

Links in alerts

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

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

Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.

Basic

Default progress bar with a vertical gradient.

<div class="progress">
  <div class="progress-bar" style="width: 60%;"></div>
</div>

Contextual alternatives

Progress bars use some of the same button and alert classes for consistent styles.

<div class="progress">
  <div class="progress-bar progress-bar-info" style="width: 20%"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 40%"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" style="width: 60%"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" style="width: 80%"></div>
</div>

Striped

Uses a gradient to create a striped effect. Not available in IE8.

<div class="progress progress-striped">
  <div class="progress-bar progress-bar-info" style="width: 20%"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-success" style="width: 40%"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-warning" style="width: 60%"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-danger" style="width: 80%"></div>
</div>

Animated

Add .active to .progress-striped to animate the stripes right to left. Not available in all versions of IE.

<div class="progress progress-striped active">
  <div class="progress-bar" style="width: 45%"></div>
</div>

Stacked

Place multiple bars into the same .progress to stack them.

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%"></div>
  <div class="progress-bar progress-bar-warning" style="width: 20%"></div>
  <div class="progress-bar progress-bar-danger" style="width: 10%"></div>
</div>

Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.

Default example

The default media allow to float a media object (images, video, audio) to the left or right of a content block.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

<div class="media">
  <a class="pull-left" href="#">
    <img class="media-object" src="...">
  </a>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

Media list

With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).

<ul class="media-list">
  <li class="media">
    <a class="pull-left" href="#">
      <img class="media-object" src="...">
    </a>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>

List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.

Basic list group

The most basic list group is simply an unordered list with list items, and the proper classes. Build upon it with the options that follow, or your own CSS as needed.

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

With chevrons

Add Glyphicon chevrons that are automatically moved to the right.

<ul class="list-group">
  <li class="list-group-item">
    <span class="glyphicon glyphicon-chevron-right"></span>
    Cras justo odio
  </li>
</ul>

With badges

Add the badges component to any list group item and it will automatically be positioned on the right.

<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

With badges and chevrons

Why not both?

<ul class="list-group">
  <li class="list-group-item">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

Linked list group

Linkify list group items by using anchor tags instead of list items (that also means a parent <div> instead of an <ul>). No need for individual parents around each element.

<div class="list-group">
  <a href="#" class="list-group-item active">
    Cras justo odio
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
  <a href="#" class="list-group-item">Morbi leo risus
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
  <a href="#" class="list-group-item">Porta ac consectetur ac
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
  <a href="#" class="list-group-item">Vestibulum at eros
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

Custom content

Add nearly any HTML within, even for linked list groups like the one below.

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

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

Basic panel

By default, all the .panel does is apply some basic border and padding to contain some content.

<div class="panel">
  Basic panel example
</div>

Panel with heading

Easily add a heading to your panel with .panel-heading. Use it on a <div> or any heading element (e.g., <h3>).

<div class="panel">
<div class="panel-heading">Panel heading</div>
Panel content
</div>

Panel with footer

Wrap buttons or secondary text in .panel-footer.

<div class="panel">
  Panel content
<div class="panel-footer">Panel footer</div>
</div>

Contextual alternatives

Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.

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

With list groups

Easily include full-width list groups within any panel.

<div class="panel">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <p>...</p>

  <!-- List group -->
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Default well

Use the well as a simple effect on an element to give it an inset effect.

<div class="well">...</div>

Optional classes

Control padding and rounded corners with two optional modifier classes.

<div class="well well-large">...</div>

<div class="well well-small">...</div>