Lesson 4: Typography in Bootstrap 5

Centering in Bootstrap 5 isn't difficult. It's part of typography. Here's everything you need to know about typography in Bootstrap 5 .

Bootstrap is renowned as an excellent framework for web development. It includes HTML, CSS, and JavaScript. Using Bootstrap alone, you have a complete set of templates for developing responsive websites.

However, to ensure your work goes smoothly, you need to take the time to learn about the components of Bootstrap first. Typography is an indispensable component. Below are some things you need to know about typography in Bootstrap 5.

• Lesson 1: What is Bootstrap 5?
• Lesson 2: Learning about Containers
• Lesson 3: Grid System in Bootstrap

In this guide, we will explore the basic text formatting styles in Bootstrap 5, Bootstrap's default text settings, headings h, and many other formatting options.

Bootstrap 5 Default Settings

Bootstrap 5 uses a default font size of 1rem (16px) and a corresponding line height of 1.5 ( this differs from Bootstrap 4, which uses a default font size of 15 ).

In addition, all elements of

They both have margin-top: 0and margin-bottom: 1rem(default is 16px).

Card

Arrive

Bootstrap 5 uses HTML heading formatting.

arrive

) with bolder font and responsive font size:

• h1 (2.5rem = 40px)
• h2 (2rem = 32px)
• h3 (1.75rem = 28px)
• h4 (1.5rem = 24px)
• h5 (1.25rem = 20px)
• h6 (1rem = 16px)

The usage of this `h` tag is similar to that in HTML:

Content That Needs to Be Highlighted

TipsMake.com

TipsMake.com

TipsMake.com

TipsMake.com

TipsMake.com

You can run this complete HTML file to see what the `h` tags in Bootstrap look like:

English example text

The font size of Bootstrap headings depends on screen size. Try resizing your browser window to see the effect.

H1 TipsMake.com

H2 TipsMake.com

H3 TipsMake.com

H4 TipsMake.com

H5 TipsMake.com

H6 TipsMake.com

We have the following result:

Additionally, you can also use the .h1`coming` class .h6on different tags to make them function as the headings you want:

h1 Tipsmake.com

h2 Tipsmake.com

h3 Tipsmake.com

h4 Tipsmake.com

h5 Tipsmake.com

h6 Tipsmake.com

You can test the complete HTML code in the content below:

English example text

h1 Tipsmake.com

h2 Tipsmake.com

h3 Tipsmake.com

h4 Tipsmake.com

h5 Tipsmake.com

h6 Tipsmake.com

And here are the results:

Display in Heading

Classes .displayare used when you want to further highlight content. Compared to a regular `` .display-1 tag, it will have a larger font-size, a thinner font-weight, and there are 6 classes to choose from: `` .display-6,.

To use these classes, you will use the following code in the section:

Display the Titles

Compared to a regular tag, when combined with the `display` class, you'll see text with a larger font size and a thinner font weight.

TipsMake.com

TipsMake.com

TipsMake.com

TipsMake.com

TipsMake.com

TipsMake.com

When placed in the complete HTML file as shown below:

English example text

Display Heading Card

Examples of display heading tags:

TipsMake.com

TipsMake.com

TipsMake.com

TipsMake.com

We will get the following result:

Card

In Bootstrap 5, the HTML element (or class .small) is used to create secondary text that is lighter than any of the `` tags. To use `small`, simply add the text between the `` and `` tags: `` and ``.

TipsMake.com Uses the Small Tag

TipsMake.com Uses the Small Tag

TipsMake.com Uses the Small Tag

TipsMake.com Uses the Small Tag

TipsMake.com Uses the Small Tag

TipsMake.com Uses the Small Tag

Let's assume we have a complete HTML file like this:

English example text

Examples of Small

How to use `small` in the `h` tag:

TipsMake.com VD Small

TipsMake.com VD Small

TipsMake.com VD Small

TipsMake.com VD Small

TipsMake.com VD Small

TipsMake.com VD Small

When you run the file above, you will get the result shown in the screenshot below:

Card

Bootstrap 5 will style elements and classes .markwith a yellow background color and add padding. To use marks, simply place the text you want to highlight between the tag tags.And/or place the .mark class tag where you need to mark it. Let's assume we have a complete HTML file like this:

English example text

Highlight the Text

Use marks tohighlightdocument.

TipsMake.com

The image below shows the result after running the file.

Card

If you want to mark a piece of text as an abbreviation in Bootstrap 5, simply place it between theand tags . The text will then be underlined with a line of dots, and when you hover your mouse over it, you will see the full word.

Complete HTML file:

English example text

Abbreviations

The abbr tag is used to mark abbreviations:

QTM was founded in 2003.

The result will be as follows:

Card

Tags and classes .blockquoteare used when you want to quote sections of content from another source. And when naming a source, such as " From TipsMake.com ", use the class .blockquote-footer:

The text to be quoted

Source

The complete HTML file would look like this:

English example text

Examples of Blockquotes

The following paragraph uses blockquotes to quote an introduction to TipsMake.com from the TipsMake.com website:

Originally a website providing knowledge about networks, servers, network devices, and computer tips, TipsMake.com has now become a social network for science and technology, expanding its content to meet the needs of members in many more technology fields such as phones, smart devices, electronics, computer security, etc.

Website TipsMake.com

We will get the following result:

Card

When you need to create a list with different levels in Bootstrap, you will use `` dl. The usage is as follows:

List 1

- child of list 1

List 2

- child of list 2

You can try running the following HTML file to see the result:

English example text

Example of Creating a List

dl helps create a list:

Application

- Word

- Excel

Operating system

- Windows

- Linux

The output when running the file above is shown below:

Card Seo_code_block_42

The content within the tags is now complete.

English example text

Code Quote

Code snippets will be embedded within the code tag:

The Python programming language provides two types of loops: loops forand loops while. Using these loops along with loop control statements like breakand, continueyou can create different types of loops.

We will get the following result:

Card

In computer tutorials, you may need to use keyboard keys. To highlight the keys and the content you need to enter, you can use the `kbd` tag ; the content within the `kbd` tag will be converted to white text on a black background.

English example text

Kbd Card

Click Windows + Rto open the Run window.

The phrase " Press Windows + R to open the Run window " will then be displayed as follows:

Card

Card

This is used when you want to quote multiple lines of code. You just need to put the code you want to write between the tags.

And that's it, pretty simple:

English example text

Write Multiple Lines of Code

When you need to quote multiple lines of code, you use `pre`. The example below is a Python code snippet:

# Receive user input until they enter a vowel nguyenAm = "aeiouAEIOU" # Infinite loop while True: m = input("Enter a vowel: ") # Condition in the middle of the code block if m in nguyenAm: break print("This is not a vowel. Try again!") # Code by TipsMake.com print("That's right, thank you!")

Running the file above gives us this result:

Other Classes in Bootstrap 5

You can use some of the following Bootstrap 5 classes to style your HTML elements:

The Following Classes Are Used in Bootstrap 4

It is rollable.

Sass

Variables

Headings have several specialized variables for adjusting size and spacing.

$headings-margin-bottom: $spacer * .5; $headings-font-family: null; $headings-font-style: null; $headings-font-weight: 500; $headings-line-height: 1.2; $headings-color: null;

The typography elements included here and in Reboot also have dedicated variables:

$lead-font-size: $font-size-base * 1.25; $lead-font-weight: 300; $small-font-size: .875em; $sub-sup-font-size: .75em; $text-muted: $gray-600; $initialism-font-size: $small-font-size; $blockquote-margin-y: $spacer; $blockquote-font-size: $font-size-base * 1.25; $blockquote-footer-color: $gray-600; $blockquote-footer-font-size: $small-font-size; $hr-margin-y: $spacer; $hr-color: inherit; $hr-height: $border-width; $hr-opacity: .25; $legend-margin-bottom: .5rem; $legend-font-size: 1.5rem; $legend-font-weight: null; $mark-padding: .2em; $dt-font-weight: $font-weight-bold; $nested-kbd-font-weight: $font-weight-bold; $list-inline-padding: .5rem; $mark-bg: #fcf8e3;

Previous article: Grid System in Bootstrap