How to change font style on element using Bootstrap 5?

Last Updated : 06 May, 2024

Bootstrap enables changing font styles by applying predefined classes like .fw-bold for bold, .fst-italic for italic, etc., directly to HTML elements. This ensures consistent and responsive typography across web applications without needing custom CSS.

There are a few Bootstrap Built-in Classes for adding the styling to the font, which are described below:

Class	Description
.fw-bold	Bold font-weight
.fw-bolder	Bolder font-weight
.fw-light	Light font-weight
.fw-normal	Normal font-weight
.fst-italic	Italicize text
.fst-normal	Make text normal

We will explore both approaches with all the related classes & their implementations with the help of illustrations.

Table of Content

using Bootstrap’s built-in font styles
Using the Bootstrap’s font-weight classes

Changing the font style Using Bootstrap’s built-in font styles

Bootstrap 5 includes a number of CSS utility classes that can be used to change the font style of an element. The most common utility classes are .fst-italic and .fst-normal.

Example: In this example, we use Bootstrap 5 classes to style headings. The first heading is styled with both bold and italic text, and the text color is set to green (“text-success”). The second heading is normal and green.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" 
          rel="stylesheet"
          integrity=
"sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" 
          crossorigin="anonymous">
</head>

<body>
    <h1 class="fst-bold 
               fst-italic 
               text-success">
        GeeksforGeeks
    </h1>
    <h1 class="fst-normal 
               text-success">
        GeeksforGeeks
    </h1>
</body>

</html>

Output:

changing font style on element using Bootstrap

Changing the font style Using the Bootstrap’s font-weight classes

In this approach we use Bootstrap’s font-weight classes, simply add the corresponding CSS class to the element you want to style. For example, to make a paragraph bold, you would add the .fw-bold class to the paragraph element.

Example: In this example, we use Bootstrap classes to style headings. It sets the font style to italic, font-weight to light for the first heading, and bold for the second heading. The text is centered, and a custom green color is applied to all headings using inline CSS.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" 
          rel="stylesheet"
          integrity=
"sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" 
          crossorigin="anonymous">
</head>

<body>
    <h1 class="fw-light 
               fst-italic 
               text-center 
               text-success">
        GeeksforGeeks
    </h1>
    <h1 class="fw-bold 
               fst-italic 
               text-center 
               text-success">
        GeeksforGeeks
    </h1>
</body>

</html>