Bootstrap - Typography

In this tutorial we will learn typograph in Bootstrap.

Body

Bootstrap's global default font-size is 14px, with a line-height of 1.428.

This is applied to the body and all paragraphs. In addition, paragraphs receive a bottom margin of half their computed line-height i.e., 10px by default.

In the following example we have a sample paragraph.

<p>The quick brown fox jumps over the lazy dog</p>

Headings

To create headings we can use all the heading tags from h1 to h6.

In the following example we have the different heading tags.

<h1>Heading h1 - semibold 36px</h1>
<h2>Heading h2 - semibold 30px</h2>
<h3>Heading h3 - semibold 24px</h3>
<h4>Heading h4 - semibold 18px</h4>
<h5>Heading h5 - semibold 14px</h5>
<h6>Heading h6 - semibold 12px</h6>

Output

Headings with lighter secondary text

To create lighter secondary text in Bootstrap we using the small tag.

In the following example we have the headings and secondary texts.

<h1>Heading h1 - <small>secondary text</small></h1>
<h2>Heading h2 - <small>secondary text</small></h2>
<h3>Heading h3 - <small>secondary text</small></h3>
<h4>Heading h4 - <small>secondary text</small></h4>
<h5>Heading h5 - <small>secondary text</small></h5>
<h6>Heading h6 - <small>secondary text</small></h6>

Output

lead class

To make a paragraph standout we use the lead class.

<p class="lead">The quick brown fox jumps over the lazy dog</p>

Output

Inline text element

Marked text

We use the mark tag to highlight a text.

<p>The quick brown <mark>fox</mark> jumps over the lazy dog</p>

Output

Deleted text

We use the del tag to highlight a piece of deleted text.

<p>The quick brown <del>fox</del> jumps over the lazy dog</p>

Output

Strikethrough text

We use the s tag to highlight a piece of text that is no longer relevant.

<p>The quick brown <s>fox</s> jumps over the lazy dog</p>

Output

Some more tags

<p>The quick brown <ins>fox</ins> jumps over the lazy dog</p>

<p>The quick brown <u>fox</u> jumps over the lazy dog</p>

<p>The quick brown <small>fox</small> jumps over the lazy dog</p>

<p>The quick brown <strong>fox</strong> jumps over the lazy dog</p>

<p>The quick brown <em>fox</em> jumps over the lazy dog</p>

Alignment

To align a text at the center we use the .text-center class.

To align a text at the left side we use the .text-left class.

To align a text at the right side we use the .text-right class.

To justify text we use the .text-justify class.

If we don't want to wrap the text we use the .text-nowrap class.

<p class="text-center">The quick brown fox jumps over the lazy dog</p>
<p class="text-left">The quick brown fox jumps over the lazy dog</p>
<p class="text-right">The quick brown fox jumps over the lazy dog</p>
<p class="text-justify">The quick brown fox jumps over the lazy dog</p>
<p class="text-nowrap">The quick brown fox jumps over the lazy dog</p>

Transform

To convert the text into lowercase we use the .text-lowercase class.

To convert the text into uppercase we use the .text-uppercase class.

To convert the text into capitalize we use the .text-capitalize class.

<p class="text-lowercase">The quick brown fox jumps over the lazy dog</p>
<p class="text-uppercase">The quick brown fox jumps over the lazy dog</p>
<p class="text-capitalize">The quick brown fox jumps over the lazy dog</p>

Output

Unordered list

We use the ul tag to create unordered list and li tag to add list items.

<ul>
  <li>Apple</il>
  <li>Mango</il>
  <li>Orange</il>
</ul>

Ordered list

We use the ol tag to create ordered list.

<ol>
  <li>Apple</il>
  <li>Mango</il>
  <li>Orange</il>
</ol>

Code

To highlight a snippet of code we use the code tag.

<code>var name = "Yusuf Shakeel";</code>

Keyboard input

To highlight keyboard input we use the kbd tag.

<kbd>Ctrl + A</kbd>

Variable

To highlight variable we use the var tag.

<var>y</var> = <var>x</var> + 10

The complete list of typography is on Bootstrap offical website.