bootstrap

Bootstrap Typography

Bootstrap Typography

In its default font stack, Bootstrap employs Helvetica Neue, Helvetica, Arial, and sans-serif. Headings, paragraphs, lists, and other inline components may all be created with Bootstrap's typography functionality. Let's take a look at each of these in turn.

Headings:

Bootstrap styles all HTML headings (h1 through h6). Here's an illustration:
<h1>I'm Heading1 h1</h1>
<h2>I'm Heading2 h2</h2>
<h3>I'm Heading3 h3</h3>

Inline Subheadings

Simply place a tiny> around any of the parts or add to any of the headings to create an inline subsection. You'll get smaller writing in a lighter hue if you take a small class.

<h1>I'm Heading1 h1. <small>I'm secondary Heading1 h1</small></h1> <h2>I'm Heading2 h2. <small>I'm secondary Heading2 h2</small></h2>
<h3>I'm Heading3 h3. <small>I'm secondary Heading3 h3</small></h3>

I'm Heading1 h1. I'm secondary Heading1 h1

I'm Heading2 h2. I'm secondary Heading2 h2

I'm Heading3 h3. I'm secondary Heading3 h3

Lead Body Copy:

Add class = "lead" to a paragraph to emphasise it. As shown in the example, this will result in a larger font size, lighter weight, and a taller line height.

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

Lead Example:

This is an example paragraph demonstrating the use of lead body copy. This is an example paragraph demonstrating the use of lead body copy.This is an example paragraph demonstrating the use of lead body copy.This is an example paragraph demonstrating the use of lead body copy.This is an example paragraph demonstrating the use of lead body copy.

Emphasis:

The default emphasis tags in HTML are tiny>, which makes text 85 percent the size of the parent, strong>, which emphasises a text with a higher font-weight, and em>, which emphasises italicised text.

As seen in the following example, Bootstrap provides a few classes that can be used to emphasise text.

<small>This content is within tag</small><br>
<strong>This content is within tag</strong><br>
<em>This content is within tag and is rendered as italics</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 content is muted</p>
<p class = "text-primary">This content carries a primary class</p>
<p class = "text-success">This content carries a success class</p>
<p class = "text-info">This content carries a info class</p>
<p class = "text-warning">This content carries a warning class</p>
<p class = "text-danger">This content carries a danger class</p>