Bootstrap - Typography

Bootstrap

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

TagsPurpose
insInserted text
To indicate additional text in the document we use the ins tag.
<p>The quick brown <ins>fox</ins> jumps over the lazy dog</p>
uUnderlined text
To uderline text we use the u tag.
<p>The quick brown <u>fox</u> jumps over the lazy dog</p>
smallSmall text
To de-emphasizing inline or blocks of text we use the small tag. It sets the size to 85% of the parent.
<p>The quick brown <small>fox</small> jumps over the lazy dog</p>
strongBold text
We use the strong tag to emphasize a text with a heavier font-weight.
<p>The quick brown <strong>fox</strong> jumps over the lazy dog</p>
emItalic text
We use the em tag to emphasize a text with italics.
<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.

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

We use cookies to enhance user experience. By continuing to browse this site you agree to our use of cookies. More info

Got it!