Bootstrap 5 Typography


Bootstrap 5 Default Settings

  • Bootstrap sets a default font-size of 1rem, 16px by default.
  • Bootstrap sets the line-height as 1.5
  • The <p> elements have margin-top: 0 and margin-bottom: 1rem (16px by default).
  • Use $body-bg to set a background-color on the <body>(#fff by default).
  • Use the $font-family-base, $font-size-base, and $line-height-base attributes as our typographic base applied to the<body>.

Heading

Bootstrap 5 styles HTML headings (<h1> to <h6>) with a bolder font-weight and a responsive font-size.Instead of using tags we can also use .h1 to .h6 classes on other elements to make them as headings.

Example 
<p class="h1">h1 Bootstrap heading</p>
<p class="h2">h2 Bootstrap heading</p>
<p class="h3">h3 Bootstrap heading</p>
<p class="h4">h4 Bootstrap heading</p>
<p class="h5">h5 Bootstrap heading</p>
<p class="h6">h6 Bootstrap heading</p>
Try it Yourself

Output:


Display Heading

Bootstrap provides display classes .display-1 to display-6 that can be applied to headings to control their size and visual impact. Display headings are used to stand out more than normal headings with larger font-size and lighter font-weight.

Example 
<p class="display-1">Display Heading 1</p>
<p class="display-2">Display Heading 2</p>
<p class="display-3">Display Heading 3</p>
<p class="display-4">Display Heading 4</p>
<p class="display-5">Display Heading 5</p>
<p class="display-6">Display Heading 6</p>
Try it Yourself

Output:


Lead

The .lead class is used to style a paragraph of text to make it stand out.The <p> element with the class lead will be styled to have larger font size and increased line height, giving it a more prominent appearance compared to regular text.

Example 
<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>
Try it Yourself

Output:


Inline text elements

Bootstrap provides several inline text elements that allow you to style and format text within your content. These elements are useful for emphasizing specific parts of your text.Here are some commonly used inline text elements in Bootstrap:

  • <mark> - Highlights text to indicate relevance or importance.
  • <small> - Decreases the text size to indicate small print or additional information.
  • <strong> - Renders text in a strong or bold emphasis.
  • <em> - Renders text in an emphasized style (usually italicized).
  • <u> - Renders text with an underline.
  • <ins> - Renders text with an underline to indicate an addition.
  • <del> and <s> - Renders text with a strikethrough effect.
  • <abbr> - The abbr element is used to define an abbreviation or acronym. It can provide a title attribute to show the full meaning of the abbreviation when the user hovers over it.
Example 
<p>This is some <mark>highlighted text</mark>.</p>
<p>This is some <small>small text</small>.</p>
<p>This is <strong>strongly emphasized</strong> text.</p>
<p>This is <em>italicized </em> text.</p>
<p>This is <u>underlined</u> text.</p>
<p>This is <del>deleted</del> text.</p>
<p>This is <s>striked</s> text.</p>
<p>This is an <ins>inserted</ins> addition.</p>
<p>This is an <abbr title="Hypertext Markup Language">HTML</abbr> abbreviation.</p>
Try it Yourself

Output: