Bootstrap 4 Text/Typography

<h1> - <h6> HTML Headings

<h1> - <h6> has bolder font-weight, increased font-size and row padding.

<h1>Bootstrap heading</h1> (2.5 rem = 40px)

<h2>Bootstrap heading</h2> (2 rem = 32px)

<h3>Bootstrap heading</h3> (1.75 rem = 28px)

<h4>Bootstrap heading</h4> (1.5 rem = 24 px)

<h5>Bootstrap heading</h5> (1.25rem = 20px)

<h6>Bootstrap heading</h6> (1rem = 16px)

Display Headings

Display headings stnd out more than normal headings, with larger font-size and lighter font-weight. There are a total of 4 classes:

<h1 class="display-1">

<h1 class="display-2">

<h1 class="display-3">

<h1 class="display-4">

Small Elements

The HTML <small> is used to create a lighter, secondary text. Example:

<p>Normal Text</p>
<small>Small Text</small>

<small>.....</small>

It can also be used in headings like:

<h3>h3 heading <small>secondary text</small></h3>

Using <mark> Marker

This <mark> text is marked using the <mark> tag for highlighting with yellow background color and some padding.

<mark>.....</mark>

Using <abbr> Abbreviation

This ABBR is an example of using the <abbr> tag with a dotted border bottom

<abbr>.....</abbr>

Blockquote

Blockquotes are used for quoting a block of content from another source.

--- by Someone

<blockquote>
  <h3>.....</h3>
  <p>.....</p>
</blockquote>

Description Lists Using <dd>

Title 1: details 1 ...
Title 2: details 2 ...

<dl>
  <dt>Title 1</dt>
  <dd>details 1 ...<dd>
  <dt>Title 2</dt>
  <dd>details 2 ...</dd>
</dl>

Use <code> for Inline Code Snippets

The <code> element is used to embed inline snippets of codes.

<p>.....<code>...</code>.....</p>

Use <pre> for Multiple Lines of Codes

Example:

The <pre> element is used
for multiple lines of codes
and it preserves both
spaces and line breaks

<pre>
.....
.....
</pre>

But as can be seen, it is not outstanding enough with neighbouring text. Therefore in this site, additional effects are added:

In this site, additional effects are made with
adding container
adding light grey background color
adding border
to better isolate from surrounding text

<pre class="container bg-light border">
.....
.....
</pre>

Keyboard Inputs <kbd>

Use ctrl + p to indicate an action of press p while holding the ctrl key

<kbd>.....</kbd>

More Typography Classes

Classes	Description
font-weight-bold	Bold test
font-weight-bolder	Bolder text
font-italic	Italic text
font-weight-light	Light weight text
font-weight-lighter	Lighter weight text
font-weight-normal	Normal text
lead	Makes a paragraph stand out
small	Indicates smaller text (80% of the size of parent)
text-left	left-aligned text
text-*-left	left-aligned text on small, medium, large or xlarge screens
text-break	Prevents long text from breaking layout
text-center	center-aligned text
text-*-center	center-aligned text on small, medium, large or xlarge screens
text-decoration-none	Removes underline from a link
text-right	right-aligned text
text-*-right	right-aligned text on small, medium, large or xlarge screens
text-justified	justified text
text-monospace	monospaced text
text-nowrap	no wrap text
text-lowercase	lowercased text
text-reset	Resets the color of text or link (inherits from parent)
text-uppercase	uppercased text
text-capitalize	capitalized text
initialism	Display text inside an <abbr> element in a slightly smaller font size
list-unstyled	Removes default list-style and left margin on list items (both <ul> and <ol>). Applies only to immediate children list items
list-inline	Place all list items on a single line (require to add list-inline-item on each <li> elements)
pre-scrollable	Makes a <pre> element scrollable

Reference:

W3Schools - BS4 Typography