What is fw-bold in Bootstrap?

Styling text in any application is an important designing aspect. These styles include bold, colored, alignment, and many more. Bootstrap offers several classes for these purposes. These classes are prepared with CSS properties. In Bootstrap 5, the “fw-bold” class makes the text bold.

This write-up will describe:

What is “fw-bold” in Bootstrap?

The “fw-bold” class in Bootstrap 5 is utilized to make the text bold. This class applies the CSS “font-weight” property with the value “700” to the HTML elements.

Analyze the example to see how this class works on elements.

Example: How Does “fw-bold” Work in Bootstrap?

Add the “<p>” element with some text content. Then, add another “<p>” element with the “fw-bold” class:

<p>This is Linuxhint.</p>

<p class="fw-bold">This is Linuxhint.</p>


How to Bold Text Within the Paragraph?

To bold the text inside the paragraph, an inline element like “<span>” with the “fw-bold” class is utilized.


Add a “<p>” element with some text content. Use the “<span>” element with the “fw-bold” class around the text to make them bold.


<p> Linuxhint is the <span class="fw-bold"> best tutorial website </span> that provides <span class="fw-bold"> quality articles</span> to educate the world online.</p>


You have successfully learned about the Bootstrap “fw-bold” class with examples.


In Bootstrap, the “fw-bold” class is utilized to make the text bold. This class applies the CSS “font-weight” property with the value “700”. To make the text bold, first, add the text to the document using an HTML element and add the “fw-bold” class to it. This article has explained the usage of the “fw-bold” class in Bootstrap.

About the author

Nadia Bano

I am an enthusiastic and forward-looking software engineer with an aim to explore the global software industry. I love to write articles on advanced-level designing, coding, and testing.