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