Abbreviations

Stylized implemenation of HTML's <abbr> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor
on hover, providing additional context on hover.

<abbr>

For expanded text on long hover of an abbreviation, include the title attribute.

Supported form controls

Examples of standard form controls supported in an example form layout.

Inputs

Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.

Requires the use of a specified type at all times.

<input type="text" placeholder="Text input">

Textarea

Form control which supports multiple lines of text. Change rows attribute as necessary.

<textarea rows="3"></textarea>

Checkboxes and radios

Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.

Default (stacked)

Option one is this and that—be sure to include why it's great
Option one is this and that—be sure to include why it's great
Option two can be something else and selecting it will deselect option one

<label class="checkbox"> <input type="checkbox" value=""> Option one is this and that—be sure to include why it's great </label> <label class="radio"> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> Option one is this and that—be sure to include why it's great </label> <label class="radio"> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> Option two can be something else and selecting it will deselect option one </label>

Inline checkboxes

Add the .inline class to a series of checkboxes or radios for controls appear on the same line.

Anchor element

Heads up! We use .disabled as a utility class here, similar to the common .active class, so no prefix is required. Also, this class is only for aesthetic; you must use custom
JavaScript to disable links here.

Images

Icon glyphs

140 icons in sprite form, available in dark gray (default) and white, provided by Glyphicons.

icon-glass

icon-music

icon-search

icon-envelope

icon-heart

icon-star

icon-star-empty

icon-user

icon-film

icon-th-large

icon-th

icon-th-list

icon-ok

icon-remove

icon-zoom-in

icon-zoom-out

icon-off

icon-signal

icon-cog

icon-trash

icon-home

icon-file

icon-time

icon-road

icon-download-alt

icon-download

icon-upload

icon-inbox

icon-play-circle

icon-repeat

icon-refresh

icon-list-alt

icon-lock

icon-flag

icon-headphones

icon-volume-off

icon-volume-down

icon-volume-up

icon-qrcode

icon-barcode

icon-tag

icon-tags

icon-book

icon-bookmark

icon-print

icon-camera

icon-font

icon-bold

icon-italic

icon-text-height

icon-text-width

icon-align-left

icon-align-center

icon-align-right

icon-align-justify

icon-list

icon-indent-left

icon-indent-right

icon-facetime-video

icon-picture

icon-pencil

icon-map-marker

icon-adjust

icon-tint

icon-edit

icon-share

icon-check

icon-move

icon-step-backward

icon-fast-backward

icon-backward

icon-play

icon-pause

icon-stop

icon-forward

icon-fast-forward

icon-step-forward

icon-eject

icon-chevron-left

icon-chevron-right

icon-plus-sign

icon-minus-sign

icon-remove-sign

icon-ok-sign

icon-question-sign

icon-info-sign

icon-screenshot

icon-remove-circle

icon-ok-circle

icon-ban-circle

icon-arrow-left

icon-arrow-right

icon-arrow-up

icon-arrow-down

icon-share-alt

icon-resize-full

icon-resize-small

icon-plus

icon-minus

icon-asterisk

icon-exclamation-sign

icon-gift

icon-leaf

icon-fire

icon-eye-open

icon-eye-close

icon-warning-sign

icon-plane

icon-calendar

icon-random

icon-comment

icon-magnet

icon-chevron-up

icon-chevron-down

icon-retweet

icon-shopping-cart

icon-folder-close

icon-folder-open

icon-resize-vertical

icon-resize-horizontal

icon-hdd

icon-bullhorn

icon-bell

icon-certificate

icon-thumbs-up

icon-thumbs-down

icon-hand-right

icon-hand-left

icon-hand-up

icon-hand-down

icon-circle-arrow-right

icon-circle-arrow-left

icon-circle-arrow-up

icon-circle-arrow-down

icon-globe

icon-wrench

icon-tasks

icon-filter

icon-briefcase

icon-fullscreen

Glyphicons attribution

Glyphicons Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creators 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

All icons require an <i> tag with a unique class, prefixed with icon-. To use, place the following code just about anywhere:

<i class="icon-search"></i>

There are also styles available for inverted (white) icons, made ready with one extra class. We will specifically enforce this class on hover and active states for nav and dropdown links.

<i class="icon-search icon-white"></i>

Heads up! When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <i> tag for proper spacing.

Icon examples

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