Bootstrap Typography

Bootstrap uses Helvetica Neue, Helvetica, Arial, and sans-serif as its default font stack.

With Bootstrap's typography features, you can create headings, paragraphs, lists, and other inline elements.

Headings

Bootstrap defines styles for all HTML headings (h1 through h6). Here is an example:

Example

<h1>I am heading 1 h1</h1>
<h2>I am heading 2 h2</h2>
<h3>I am heading 3 h3</h3>
<h4>I am heading 4 h4</h4>
<h5>I am heading 5 h5</h5>
<h6>I am heading 6 h6</h6>

The result is as follows:

Inline Subheadings

If you need to add an inline subheading to any heading, simply add <small> around the element or use the .small class. This will give you a smaller, lighter text, as shown in the example below:

Example

<h1>I am heading 1 h1. <small>I am subheading 1 h1</small></h1>
<h2>I am heading 2 h2. <small>I am subheading 2 h2</small></h2>
<h3>I am heading 3 h3. <small>I am subheading 3 h3</small></h3>
<h4>I am heading 4 h4. <small>I am subheading 4 h4</small></h4>
<h5>I am heading 5 h5. <small>I am subheading 5 h5</small></h5>
<h6>I am heading 6 h6. <small>I am subheading 6 h6</small></h6>

The result is as follows:

Lead Body Copy

To add emphasized text to a paragraph, you can add class="lead". This will result in larger, bolder, and higher line-height text, as shown in the example below:

Example

<h2>Lead Body Copy</h2>
<p class="lead">This is an example demonstrating the use of lead body copy. This is an example demonstrating the use of lead body copy. This is an example demonstrating the use of lead body copy. This is an example demonstrating the use of lead body copy. This is an example demonstrating the use of lead body copy. This is an example demonstrating the use of lead body copy. This is an example demonstrating the use of lead body copy. This is an example demonstrating the use of lead body copy.</p>

The result is as follows:

Emphasis

HTML's default emphasis tags <small> (sets text to 85% of the parent size), <strong> (bolds the text), <em> (italicizes the text).

Bootstrap provides some classes for emphasizing text, as shown in the example below:

Example

<small>This line is within the tag</small><br>
<strong>This line is within the tag</strong><br>
<em>This line is within the tag and is italicized</em><br>
<p class="text-left">Left-aligned text</p>
<p class="text-center">Center-aligned text</p>
<p class="text-right">Right-aligned text</p>
<p class="text-muted">This line is muted</p>
<p class="text-primary">This line has a primary class</p>
<p class="text-success">This line has a success class</p>
<p class="text-info">This line has an info class</p>
<p class="text-warning">This line has a warning class</p>
<p class="text-danger">This line has a danger class</p>

The result is as follows:

Abbreviations

HTML

Example

<abbr title="World Wide Web">WWW</abbr><br>
<abbr title="Real Simple Syndication" class="initialism">RSS</abbr>

The result is as follows:

Address

Using the <address> tag, you can display contact information on your webpage. Since <address> defaults to display:block;, you need to use <br> tags to add line breaks to the enclosed address text.

Example

<address>
  <strong>Some Company, Inc.</strong><br>
  007 street<br>
  Some City, State XXXXX<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
  <strong>Full Name</strong><br>

The result is as follows: <a href="mailto:#">[email protected]</a> </address>

Blockquote

You can use the default <blockquote> alongside any HTML text. Other options include adding a <small> tag to identify the source of the quote, and using the class .pull-right to align the quote to the right. The following examples demonstrate these features:

Example

<blockquote>
  <p>
  This is a default quote example. This is a default quote example. This is a default quote example. This is a default quote example. This is a default quote example. This is a default quote example. This is a default quote example. This is a default quote example.
  </p>
</blockquote>
<blockquote>
  This is a quote with a source title.
  <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
</blockquote>
<blockquote class="pull-right">
  This is a quote aligned to the right.
  <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
</blockquote>

The result is as follows:

Lists

Bootstrap supports ordered lists, unordered lists, and definition lists.

• Ordered List: Ordered lists are lists that begin with numbers or other ordered characters.

• Unordered List: Unordered lists are lists without a specific order, starting with traditional bullet points. If you do not want to display these bullet points, you can remove the styling using the class .list-unstyled. You can also use the class .list-inline to place all list items on the same line.

• Definition List: In this type of list, each list item can contain <dt> and <dd> elements. <dt> stands for definition term, like in a dictionary. Then, <dd> is the description of <dt>. The class .dl-horizontal allows the phrases and their descriptions within <dl> to be aligned in a row. Initially stacked like the default <dl> style, they align in a row as the navbar expands.

The following examples demonstrate these types of lists:

Example

<h4>Ordered List</h4>
<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ol>
<h4>Unordered List</h4>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>
<h4>Unstyled List</h4>
<ul class="list-unstyled">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>
<h4>Inline List</h4>
<ul class="list-inline">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>
<h4>Definition List</h4>
<dl>
  <dt>Description 1</dt>
  <dd>Item 1</dd>
  <dt>Description 2</dt>
  <dd>Item 2</dd>
</dl>
<h4>Horizontal Definition List</h4>
<dl class="dl-horizontal">
  <dt>Description 1</dt>
  <dd>Item 1</dd>
  <dt>Description 2</dt>
  <dd>Item 2</dd>
</dl>

The result is as follows:

More Typography Classes

The table below provides examples of more Bootstrap typography classes: