Typography

Headings

All HTML headings, <h1> through <h6> are available.

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5

h6. Heading 6

Body copy

Bootstrap's global default font-size is 14px, with a line-height of 20px. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their line-height (10px by default).

Lead body copy

Built with Less

The typographic scale is based on two LESS variables in variables.less: @baseFontSize and @baseLineHeight. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.

Emphasis

Make use of HTML's default emphasis tags with lightweight styles.

<small>

For de-emphasizing inline or blocks of text,
use the small tag.

This line of text is meant to be treated as fine print.

<p>
<small>This line of text is meant to be treated as fine print.</small>
</p>

Bold

For emphasizing a snippet of text with a heavier font-weight.

The following snippet of text is rendered as bold text.

<strong>rendered as bold text</strong>

Italics

For emphasizing a snippet of text with italics.

The following snippet of text is rendered as italicized text.

<em>rendered as italicized text</em>

Heads up! Feel free to use <b> and <i> in HTML5. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.

Emphasis classes

Convey meaning through color with a handful of emphasis utility classes.

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.

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.

Icon glyphs

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

glyphicon glyphicon-glass

glyphicon glyphicon-music

glyphicon glyphicon-search

glyphicon glyphicon-envelope

glyphicon glyphicon-heart

glyphicon glyphicon-star

glyphicon glyphicon-star-empty

glyphicon glyphicon-user

glyphicon glyphicon-film

glyphicon glyphicon-th-large

glyphicon glyphicon-th

glyphicon glyphicon-th-list

glyphicon glyphicon-ok

glyphicon glyphicon-remove

glyphicon glyphicon-zoom-in

glyphicon glyphicon-zoom-out

glyphicon glyphicon-off

glyphicon glyphicon-signal

glyphicon glyphicon-cog

glyphicon glyphicon-trash

glyphicon glyphicon-home

glyphicon glyphicon-file

glyphicon glyphicon-time

glyphicon glyphicon-road

glyphicon glyphicon-download-alt

glyphicon glyphicon-download

glyphicon glyphicon-upload

glyphicon glyphicon-inbox

glyphicon glyphicon-play-circle

glyphicon glyphicon-repeat

glyphicon glyphicon-refresh

glyphicon glyphicon-list-alt

glyphicon glyphicon-lock

glyphicon glyphicon-flag

glyphicon glyphicon-headphones

glyphicon glyphicon-volume-off

glyphicon glyphicon-volume-down

glyphicon glyphicon-volume-up

glyphicon glyphicon-qrcode

glyphicon glyphicon-barcode

glyphicon glyphicon-tag

glyphicon glyphicon-tags

glyphicon glyphicon-book

glyphicon glyphicon-bookmark

glyphicon glyphicon-print

glyphicon glyphicon-camera

glyphicon glyphicon-font

glyphicon glyphicon-bold

glyphicon glyphicon-italic

glyphicon glyphicon-text-height

glyphicon glyphicon-text-width

glyphicon glyphicon-align-left

glyphicon glyphicon-align-center

glyphicon glyphicon-align-right

glyphicon glyphicon-align-justify

glyphicon glyphicon-list

glyphicon glyphicon-indent-left

glyphicon glyphicon-indent-right

glyphicon glyphicon-facetime-video

glyphicon glyphicon-picture

glyphicon glyphicon-pencil

glyphicon glyphicon-map-marker

glyphicon glyphicon-adjust

glyphicon glyphicon-tint

glyphicon glyphicon-edit

glyphicon glyphicon-share

glyphicon glyphicon-check

glyphicon glyphicon-move

glyphicon glyphicon-step-backward

glyphicon glyphicon-fast-backward

glyphicon glyphicon-backward

glyphicon glyphicon-play

glyphicon glyphicon-pause

glyphicon glyphicon-stop

glyphicon glyphicon-forward

glyphicon glyphicon-fast-forward

glyphicon glyphicon-step-forward

glyphicon glyphicon-eject

glyphicon glyphicon-chevron-left

glyphicon glyphicon-chevron-right

glyphicon glyphicon-plus-sign

glyphicon glyphicon-minus-sign

glyphicon glyphicon-remove-sign

glyphicon glyphicon-ok-sign

glyphicon glyphicon-question-sign

glyphicon glyphicon-info-sign

glyphicon glyphicon-screenshot

glyphicon glyphicon-remove-circle

glyphicon glyphicon-ok-circle

glyphicon glyphicon-ban-circle

glyphicon glyphicon-arrow-left

glyphicon glyphicon-arrow-right

glyphicon glyphicon-arrow-up

glyphicon glyphicon-arrow-down

glyphicon glyphicon-share-alt

glyphicon glyphicon-resize-full

glyphicon glyphicon-resize-small

glyphicon glyphicon-plus

glyphicon glyphicon-minus

glyphicon glyphicon-asterisk

glyphicon glyphicon-exclamation-sign

glyphicon glyphicon-gift

glyphicon glyphicon-leaf

glyphicon glyphicon-fire

glyphicon glyphicon-eye-open

glyphicon glyphicon-eye-close

glyphicon glyphicon-warning-sign

glyphicon glyphicon-plane

glyphicon glyphicon-calendar

glyphicon glyphicon-random

glyphicon glyphicon-comment

glyphicon glyphicon-magnet

glyphicon glyphicon-chevron-up

glyphicon glyphicon-chevron-down

glyphicon glyphicon-retweet

glyphicon glyphicon-shopping-cart

glyphicon glyphicon-folder-close

glyphicon glyphicon-folder-open

glyphicon glyphicon-resize-vertical

glyphicon glyphicon-resize-horizontal

glyphicon glyphicon-hdd

glyphicon glyphicon-bullhorn

glyphicon glyphicon-bell

glyphicon glyphicon-certificate

glyphicon glyphicon-thumbs-up

glyphicon glyphicon-thumbs-down

glyphicon glyphicon-hand-right

glyphicon glyphicon-hand-left

glyphicon glyphicon-hand-up

glyphicon glyphicon-hand-down

glyphicon glyphicon-circle-arrow-right

glyphicon glyphicon-circle-arrow-left

glyphicon glyphicon-circle-arrow-up

glyphicon glyphicon-circle-arrow-down

glyphicon glyphicon-globe

glyphicon glyphicon-wrench

glyphicon glyphicon-tasks

glyphicon glyphicon-filter

glyphicon glyphicon-briefcase

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