Bootstrap 5 Text Font weight and italics

Last Updated : 12 Dec, 2022

Bootstrap 5 Text Font weight and italics classes are used to manipulate text weight and text style. There are several classes to do so. In this article, we will see the use of each class that has been used in the examples code.

Font weight and italics classes:

fw-bold: This class is used to make the text bold.
fw-bolder: This class is used to make the text bolder.
fw-normal: This class is used to set the font-weight default.
fw-light: This class is used to make the text light.
fw-lighter: This class is used to make the text lighter.
fst-italic: This class is used to make the text italics.
fst-normal: This class is used to set the font-style default.

Syntax:

<tag class="fw-*">...</tag>

Example 1: In this example, we will use font-weight classes to check the different text weights.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
        crossorigin="anonymous">
</head>
 
<body>
    <div class="container">
        <h1 class="text-success text-center">
            Geeksforgeeks
        </h1>
        <p class="text-center">Geeks Learning Together</p>
 
        <!-- Bootstrap Font weight classes used -->
        <u>Font-weight: bold</u>
        <p class="fw-bold">
            A Computer Science Portal for Geeks
        </p>
        <u>Font-weight:bolder</u>
        <p class="fw-bolder">
            A Computer Science Portal for Geeks
        </p>
        <u>Font-weight:normal</u>
        <p class="fw-normal">
            A Computer Science Portal for Geeks</p>
        <u>Font-weight:light</u>
        <p class="fw-light">
            A Computer Science Portal for Geeks
        </p>
        <u>Font-weight:lighter</u>
        <p class="fw-lighter">
            A Computer Science Portal for Geeks
        </p>
    </div>
</body>
 
</html>

Output:

Bootstrap 5 Text Font weight and italics

Example 2: In this example, we will use different font-style to manipulate the text style.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
          crossorigin="anonymous">
</head>
 
<body>
    <div class="container">
        <h1 class="text-success text-center">
            Geeksforgeeks
        </h1>
        <p class="text-center">Geeks Learning Together</p>
        <!-- Bootstrap Font style classes used -->
        <u>Font-style:italic</u>
        <p class="fst-italic">
            A Computer Science Portal for Geeks
        </p>
        <u>Font-style:normal</u>
        <p class="fst-normal">
            A Computer Science Portal for Geeks
        </p>
    </div>
</body>
 
</html>