Bootstrap Typography

Bootstrap has a good looking default for text. It uses the system font stack, so the text looks natural on every computer and phone. It also gives classes for headings, sizes, weights and alignment.

Headings

The tags h1 to h6 are styled by default. You can also use the classes .h1 to .h6 on any element to get the same style.

<h1>h1 heading</h1>
<h2>h2 heading</h2>
<h3>h3 heading</h3>
<p class="h4">A paragraph with the .h4 class</p>

Display headings

For a bigger heading, like on a banner, use .display-1 to .display-6. And use .lead for a bigger introduction paragraph.

<h1 class="display-4">Display 4</h1>
<p class="lead">This is a lead paragraph. It stands out from the normal text.</p>

Inline text elements

<p>You can use <mark>mark</mark>, <small>small</small>, <del>deleted</del>, <ins>inserted</ins>, <u>underline</u>, <strong>strong</strong> and <em>emphasis</em>.</p>

Font size, weight and style

Class	Effect
.fs-1 to .fs-6	Font size, from the biggest to the smallest
.fw-bold, .fw-semibold, .fw-normal, .fw-light	Font weight
.fst-italic, .fst-normal	Font style
.lh-1, .lh-sm, .lh-base, .lh-lg	Line height
.font-monospace	Monospace font

<p class="fs-3 mb-1">Font size fs-3</p>
<p class="fw-bold mb-1">Bold text (fw-bold)</p>
<p class="fst-italic mb-1">Italic text (fst-italic)</p>
<p class="font-monospace mb-0">Monospace text (font-monospace)</p>

Text alignment

Use .text-start, .text-center and .text-end. They can be responsive, like .text-md-center. (In Bootstrap 4 they were called .text-left and .text-right.)

<p class="text-start mb-1">Left aligned (text-start)</p>
<p class="text-center mb-1">Centered (text-center)</p>
<p class="text-end mb-1">Right aligned (text-end)</p>

Text transform, wrapping and decoration

<p class="text-uppercase mb-1">uppercase text</p>
<p class="text-capitalize mb-1">capitalize every word</p>
<p class="text-decoration-underline mb-1">underlined text</p>
<p class="text-truncate border p-1" style="max-width: 200px;">This long text is cut with three dots at the end of the box.</p>

Lists

<ul class="list-unstyled">
  <li>Unstyled list item (no bullet)</li>
  <li>Another item</li>
</ul>
<ul class="list-inline">
  <li class="list-inline-item">Inline</li>
  <li class="list-inline-item">list</li>
  <li class="list-inline-item">items</li>
</ul>

Blockquote

<figure>
  <blockquote class="blockquote">
    <p>A well known quote, set inside a blockquote.</p>
  </blockquote>
  <figcaption class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></figcaption>
</figure>

Responsive font sizes

Bootstrap can also scale the font size with the screen (RFS). For the headings it is on by default, so the big headings become smaller on a phone.

• Previous Page
• Next Page

---

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.