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.

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.

|search| |star|

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.

.. class:: pagination

   * `« <#>`_
   * `1 <#>`_
   * `2 <#>`_
   * `3 <#>`_
   * `4 <#>`_
   * `5 <#>`_
   * `» <#>`_

Disabled and active states

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

.. class:: pagination

   * .. item-class:: disabled
     `« <#>`_
   * .. item-class:: active
     `1 <#>`_
   * `2 <#>`_
   * `3 <#>`_
   * `4 <#>`_
   * `5 <#>`_
   * `» <#>`_

Sizing

Fancy larger or smaller pagination? Add .pagination-lg or .pagination-sm for additional sizes.

.. class:: pagination pagination-lg

   ...

.. class:: pagination

   ...

.. class:: pagination pagination-sm

   ...

Default example

By default, the pager centers links.

.. class:: pager

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

Aligned links

Alternatively, you can align each link to the sides:

.. class:: pager

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

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 → <#>`_

Examples

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

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

Default example

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

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

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

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

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.

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

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.

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

Default well

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

.. class:: well

   Look, I'm in a well!

Optional classes

Control padding and rounded corners with two optional modifier classes.

.. class:: well well-lg

   Look, I'm in a well!

.. class:: well well-sm

   Look, I'm in a well!