Bootstrap 3 Typography

Bootstrap includes styles that define how text elements appear.

This page shows how certain text elements are rendered when using Bootstrap (often without using any classes). Generally, any page that links to the Bootstrap 3 style sheet will render these elements in the same way (unless overridden by other styles).

Body Text

Bootstrap's global default font-size is 14px and its line-height is 1.42857143. This is applied to the <body> element and all paragraphs.

The default font-family is "Helvetica Neue", Helvetica, Arial, sans-serif.

Also, <p> elements have a bottom margin of half their computed line-height (10px by default).

As with any other element, you are completely free to change any of these values.

Headings

Headings have a font weight of 500, a line height of 1.1, and they inherit the font family and color. Headings also have some top and bottom margins applied.

View Output

Heading Classes

Bootstrap also includes heading classes from .h1 to .h6 in case you need to render some inline text in the style of a particular heading.

View Output

Sub-Headings

You can create a sub-heading or secondary text by placing text inside a <small> element within the heading.

View Output

Marked Text

The HTML <mark> element represents text as marked or highlighted for reference purposes, due to its relevance in another context.

Here's an example of Bootstrap's rendering of this element:

View Output

Text Alignment

Bootstrap includes classes created specifically for the purpose of text alignment.

View Output

Text Transformation Classes

Bootstrap includes classes created specifically for text transformation purposes.

View Output

Abbreviations

In HTML, the <abbr> represents an abbreviation or acronym. The title attribute can be used to provide an expansion of the abbreviation.

In Bootstrap, abbreviations with a title attribute are rendered with a light dotted bottom border and a help cursor on hover.

View Output

Initialism

You can add the Bootstrap .initialism class to render the abbreviation in a slightly smaller font size.

View Output

Blockquotes

Blockquotes — Default

In Bootstrap, the <blockquote> element is rendered as follows:

View Output

Blockquotes — Source

Bootstrap renders the <cite> and <footer> elements nested inside the <blockquote> element like this:

View Output

Blockquotes — Reverse

You can use the Bootstrap .blockquote-reverse class to right-align the blockquote:

View Output

Lists

Bootstrap applies various styles and has a number of classes specifically for lists.

Lists — Unstyled

You can use the Bootstrap .list-unstyled class to render lists without their default list-style and left-margin:

View Output

Lists — Inline

You can use the Bootstrap .list-inline class to render lists as display: inline-block and to apply some padding:

View Output

Description Lists

In Bootstrap, description lists are rendered like this:

View Output

Description Lists — Horizontal

You can make the terms and descriptions line up horizontally by adding Bootstrap's dl-horizontal class.

Note that this only works when the viewport is wider. If you don't see any difference between how this example is displayed and the previous one, you can open the preview in a new window. If it still doesn't appear any different, you may need to use a larger device to view this example.

View Output

Code

In Bootstrap, the <code> element is rendered like this:

View Output

Keyboard Input

In Bootstrap, the <kbd> element is rendered like this:

View Output

Preformatted Text

In Bootstrap, the <pre> element is rendered like this:

View Output

You can also add Bootstrap's .pre-scrollable class to set a max-height to 350 pixels and set a y-axis scrollbar.

Sample Text

In Bootstrap, the <samp> element is rendered like this:

View Output

Variables

In Bootstrap, the <var> element is rendered like this:

View Output