How to change font style on element using Bootstrap 5?

Last Updated : 18 Oct, 2023

In this article, we will see How to change font style on elements using Bootstrap 5. Bootstrap 5 provides a solid foundation for styling fonts in your web projects. Changing font style using Bootstrap 5 involves applying Bootstrap classes to an HTML element. Classes like font-italic, fw-bold, etc., adjust font properties like italicization and boldness for easy styling. There are a few Bootstrap Built-in Classes for adding the styling to the font, which are described below:

.fw-bold: The .fst-italic class is a Bootstrap 5 CSS class used to Bold font-weight.
.fw-bolder: The .fst-italic class is a Bootstrap 5 CSS class used to Bolder font-weight.
.fw-light: The .fst-italic class is a Bootstrap 5 CSS class used to Light font-weight.
.fw-normal: The .fst-italic class is a Bootstrap 5 CSS class used to Bolder font-weight.
.fst-italic: The .fst-italic class is a Bootstrap 5 CSS class used to make text italic.
.fst-normal: The .fst-normal class is a Bootstrap 5 CSS class used to make text normal.

Table of Content

Changing the font style using Bootstrap’s built-in font styles
Implementing the Bootstrap’s font-weight classes

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

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:

chrome-capture-2023-9-3-(2)

Implementing 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>