Components

Over a dozen reusable components built to provide iconography, dropdowns, input groups, navigation, alerts, and much more.

Glyphicons

Available glyphs

Includes 200 glyphs in font format from the Glyphicon Halflings set. Glyphicons Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask that you include a link back to Glyphicons whenever possible.

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

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

Icon classes cannot be directly combined with other components. They should not be used along with other classes on the same element. Instead, add a nested <span> and apply the icon classes to the <span>.
|search| |star|

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.

.. class:: pager

   * `Previous <#>`_
   * `Next <#>`_

Optional disabled state

Pager links also use the general .disabled utility class from the pagination.

.. class:: pager

   * .. item-class:: previous disabled
     `← Older <#>`_
   * .. item-class:: next
     `Newer → <#>`_

Labels

Examples

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

h1. Example heading :label-default:`New`
========================================

h2. Example heading :label-default:`New`
----------------------------------------

h3. Example heading :label-default:`New`
++++++++++++++++++++++++++++++++++++++++

h4. Example heading :label-default:`New`
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

h5. Example heading :label-default:`New`
****************************************

h6. Example heading :label-default:`New`
¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

Available variations

Default Primary Success Info Warning Danger
:label-default:`Default`
:label-primary:`Primary`
:label-success:`Success`
:label-info:`Info`
:label-warning:`Warning`
:label-danger:`Danger`

Badges

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

Self collapsing

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

Jumbotron

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

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

.. jumbotron::

   :h1:`Hello, world!`

   This is a simple hero unit, a simple jumbotron-style component for
   calling extra attention to featured content or information.

   .. button:: Learn more
      :class: primary large

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

.. jumbotron::

   .. container::

      ...

Thumbnails

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

Default example

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

171x180.png
171x180.png
171x180.png
171x180.png
   .. column::
      :width: 3

      .. image:: 171x180.png
         :class: thumbnail

   .. column::
      :width: 3

      .. image:: 171x180.png
         :class: thumbnail

   .. column::
      :width: 3

      .. image:: 171x180.png
         :class: thumbnail

   .. column::
      :width: 3

      .. image:: 171x180.png
         :class: thumbnail

Custom content

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

300x200.png

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.

300x200.png

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.

300x200.png

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.

.. thumbnail::

   .. image:: 300x200.png

   .. caption::

      :h3:`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
         :class: primary

      .. button:: Button

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! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.
.. alert:: **Well done!** You successfully read this important alert message.
   :type: success

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

.. alert:: **Warning!** Better check yourself, you're not looking too good.
   :type: warning

.. alert:: **Oh snap!** Change a few things up and try submitting again.
   :type: danger

Dismissable alerts

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

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

Ensure proper behavior across all devices

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

Progress bars

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

Cross-browser compatibility

Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not supported in Internet Explorer 9 and below or older versions of Firefox. Opera 12 does not support animations.

Basic example

Default progress bar.

.. progress:: 60%

With label

Remove the .sr-only class from within the progress bar to show a visible percentage. For low percentages, consider adding a min-width to ensure the label's text is fully visible.

60%
.. progress:: 60%
   :label: 60%

Contextual alternatives

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

.. progress:: 40%
   :class: success

.. progress:: 20%
   :class: info

.. progress:: 60%
   :class: warning

.. progress:: 80%
   :class: danger

Striped

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

.. progress:: 40%
   :class: success striped

.. progress:: 20%
   :class: info striped

.. progress:: 60%
   :class: warning striped

.. progress:: 80%
   :class: danger striped

Animated

Add .active to .progress-striped to animate the stripes right to left. Not available in IE9 and below.

.. progress:: 45%
   :class: active

Stacked

N/A

Wells

Default well

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

Look, I'm in a well!

.. class:: well

   Look, I'm in a well!

Optional classes

Control padding and rounded corners with two optional modifier classes.

Look, I'm in a well!

.. class:: well well-lg

   Look, I'm in a well!

Look, I'm in a well!

.. class:: well well-sm

   Look, I'm in a well!