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.
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/[email protected]/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 BootstrapChanging 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/[email protected]/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>
Output:
changing font style on element using Bootstrap
Similar Reads
How to change color of tooltip element using Bootstrap ? In this article, we will see how to change the color of the tooltip element using Bootstrap. A Tooltip is used to provide interactive textual hints to the user about the element when the mouse pointer moves over. The tooltip is quite useful for displaying the description of different elements on the
2 min read
How to change font size of Table Content in Bootstrap 5? Bootstrap 5 has simple and flexible framework features to build responsive web applications. For changing the font size of table content, we can use Utility Classes or the Typography Class which allows us to adjust the font sizes according to the requirement. In this article, we will explore both ap
3 min read
How to change "Choose file" Text using Bootstrap? In web development, forms may include the file upload functionality which allows user to select files from their device. The standard HTML <input> element with type="file" provides us with this feature. But the default text displayed on the file input button is "Choose File," which may or may
2 min read
How to change Dropdown Icon on Bootstrap 5? Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Bootstrap dropdown JavaScript plugin. They’re toggled by clicking, not hovering this is an intentional design decision. In this article, we will learn How to change the Dr
4 min read
How to Change Font Style in CSS? Font style is an important element that enhances the readability of the text. CSS provides several properties to change the text appearance and font style. The font style property allows you to define how the text should appear normal, italic, or oblique.Table of ContentDifferent Methods to Change F
3 min read
How to change font color of the active nav-item in Bootstrap ? There are two ways that you can change the font color of the active nav-item. The default font-color is white of the active nav-link in the case of Bootstrap nav-active item. The first-way approach is to use a CSS styling file and changing the nav-item class when clicked. The second-way approach is
3 min read