How to change font style on element using Bootstrap 5?
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.
<!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">
w3wiki
</h1>
<h1 class="fst-normal
text-success">
w3wiki
</h1>
</body>
</html>
Output:
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.
<!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">
w3wiki
</h1>
<h1 class="fw-bold
fst-italic
text-center
text-success">
w3wiki
</h1>
</body>
</html>
Output:
Contact Us