Getting started

Styles for displaying content with some of the most commonly used HTML elements, including normalization, typography, images, tables, and more.

Typography

Bootstrap includes simple and easily customized typography for headings, body text, lists, and more. For even more control, check out the textual utility classes.

Contents

  • Global settings
  • Headings
  • Display
  • Lead
  • Inline text elements
  • Lists

Global settings

  • Use $body-bg to set a background-color on the <body> (#fff by default)
  • Use the $font-family-base, $font-size-base, and $line-height-base attributes as our typographic base
  • Set the global link color via $link-color and apply link underlines only on :hover

These styles can be found within _reboot.scss, and the global variables are defined in _variables.scss.

Headings

All HTML headings, <h1> through <h6>, are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading
h6. Bootstrap heading

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

Display headings

Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style.

Display 1

Display 2

Display 3

Display 4

<h1class="display-1">Display 1</h1>
<h2 class="display-2">Display 2</h2>
<h3class="display-3">Display 3</h3>
<h4class"display-4">Display 4</h4>

Lead

Make a paragraph stand out by adding .lead.

.lead

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<pclass="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>

Inline text elements

Styling for common inline HTML5 elements.

.s

This line of text is meant to be treated as no longer accurate.

.u

This line of text will render as underlined

.small

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

Blockquotes

For quoting blocks of content from another source within your document. Wrap <blockquote class="blockquote"> around any HTML as the quote.

.blockqoute

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
- Someone famous in Source Title

.blockqoute-reverse

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
- Someone famous in Source Title

Lists

Unstyled

Remove the default list-style and left margin on list items (immediate children only). This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.

list-unstyled
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Inline

Place all list items on a single line with display: inline-block; and some basic margin between.

list-inline
  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat