Bootstrap 5 Text Bold With Code Examples

Bootstrap helps in the creation of mobile-friendly and responsive web pages. More specifically, Bootstrap 5 brings several new additions and enhancements, including a new method to bold text. In the previous version (Bootstrap 4), the “font-weight-bold” class is utilized to make text bold. However, in Bootstrap 5, the “fw-bold” class is utilized for this purpose.

This post will instruct you about how to make bold text in Bootstrap 5.

Bootstrap 5 Text Bold With Code Examples

In Bootstrap 5, the “fw-bold” class is utilized to make the text bold. In the “Bootstrap.css” file, the “fw-bold” class has the “font-weight” property with the value “700”.

Example 1: How to Make Text Bold in Bootstrap 5?

Check out the example mentioned below:

• Add two “<h3>” elements that display the normal and bold text, respectively.
• Specify “text-center” as the class of both elements.
• The “fw-bold” class is assigned to the second “<h3>” element only to see the difference.
• The “text-danger” class shows the text in red color.

Here is the HTML code:

Output

Example 2: How to Make Text Bold Within a Paragraph?

While reading a book or research, we see bold text within the paragraph. These bold terms convey their importance to the readers. The bold text must be bold enough to stand out. However, it must not disturb the readers visually.

Let’s see how to make the text bold within the paragraph:

It can be observed that the selected text parts have bold font style:

We have compiled the examples to bold text in Bootstrap 5 with examples.

Conclusion

In Bootstrap 5, the “fw-bold” class is utilized to make the font bold. This class is declared with the “font-weight” property having the value “700”. To make the text bold within the paragraph, use the inline element, such as “<span>” with the class “fw-bold”. This post has explained how to make text bold in Bootstrap 5 with examples.