This write-up will describe the following:
Adjusting font-weight Using Bootstrap 4 Classes
In Bootstrap 4, the font weight of the elements is adjusted using several classes. For practical demonstration, go through the below sections.
How to Make Font Weight Normal in Bootstrap 4?
The “font-weight-normal” class is utilized to make the normal text. This class has a predefined CSS “font-weight” property with the value “400”.
Example
Add a “<p>” element with some text and assign it the “font-weight-normal” class.
HTML
Output
How to Make Font Weight Light in Bootstrap 4?
The “font-weight-light” class makes the text thin. It has a predefined CSS “font-weight” property with the value “300”.
Example
In the ongoing example, add the “font-weight-light” class to the “<p>” element:
HTML
Output
How to Make Font Weight Bold in Bootstrap 4?
The “font-weight-bold” class is utilized to make bold text. It has a predefined CSS “font-weight” property with the value “700”.
Example
Add the “font-weight-bold” class to the “<p>” element:
HTML
Output
How to Make Font Italic in Bootstrap 4?
The “font-italic” class is utilized to make the font in italic style. It has a predefined CSS “font-style” property with the value “italic”.
Example
Add the “font-italic” class to the “<p>” tag:
HTML
Output
Adjusting font-weight Using Bootstrap 5 Classes
Using Bootstrap 5, the following classes are utilized to adjust the font weight of various elements.
How to Make Font Weight Normal in Bootstrap 5?
The “fw-normal” class is utilized to make the normal font style of the text. It has a predefined CSS “font-weight” property with the value “400”.
Example
Add the “fw-normal” class to the “<p>” element:
HTML
Output
How to Make Font Weight Bold in Bootstrap 5?
The “font-weight-bold” class is utilized to make the text bold. It has a predefined CSS “font-weight” class with the value “700”.
Example
Add the “fw-bold” class to the “<p>” tag.
HTML
Output
How to Make Font Weight Bolder in Bootstrap 5?
The “fw-bolder” class is utilized to make the text bolder. It has a predefined CSS “font-weight” with the value “bolder”.
Example
Add the “font-weight-bolder” class to the “<p>” element.
HTML
Output
How to Make Font Weight Light in Bootstrap 5?
The “font-weight-light” class is utilized to make the text lightweight. It has a predefined style of “font-weight” having a value of “300”.
Example
Add the “fw-light” class to the “<p>” element.
HTML
Output
How to Make Font Weight Lighter in Bootstrap 5?
The “font-weight-lighter” class is utilized to make the text lighter weight. It has a predefined CSS style “font-weight” property with the value “lighter”.
Example
Add “fw-lighter” to the HTML “<p>” element.
HTML
Output
How to Make Font Style Normal in Bootstrap 5?
The “fst-normal” class is utilized to make the normal-styled text. It has a predefined style of CSS “font-style” property with the value “normal”.
Example
Assign the “fst-normal” class to the “<p>” element.
HTML
Output
How to Make Font Style Italic in Bootstrap 5?
The “fst-italic” class is utilized to make the text in italic style. It has a predefined style of “font-style” property with the value “italic”.
Example
Assign the “<p>” element with the class “fst-italic”.
HTML
Output
That was all about setting font-weight using Bootstrap classes.
Conclusion
Bootstrap 4 offers several classes to set the element’s font weight. These include, “font-weight-normal”, “font-weight-light”, “font-weight-bold”, and “font-italic”. In Bootstrap 5, the “fw-normal”, “fw-bold”, “fw-light”, “fw-bolder”, and more are used. This write-up has explained how to set the font-weight using Bootstrap classes.
