How to change font style on element using Bootstrap 5? Last Updated : 06 May, 2024 Comments Improve Suggest changes Like Article Like Report 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: ClassDescription.fw-boldBold font-weight.fw-bolderBolder font-weight.fw-lightLight font-weight.fw-normalNormal font-weight.fst-italicItalicize text.fst-normalMake text normalWe 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 stylesUsing the Bootstrap's font-weight classesChanging the font style Using Bootstrap's built-in font stylesBootstrap 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 classesIn 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 Comment More infoAdvertise with us Next Article How to change font style on element using Bootstrap 5? P pranay0911 Follow Improve Article Tags : Web Technologies Bootstrap Geeks Premier League Bootstrap-Questions Bootstrap-5 Geeks Premier League 2023 +2 More 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 Add a Border or Shadow to Elements using Bootstrap 5 Classes ? To add a border in Bootstrap 5, we can use classes like 'border' for a full border or border-top, border-end, border-bottom, border-start for specific sides. For shadows, apply classes like 'shadow' for a default shadow, shadow-sm for a small shadow, or shadow-lg for a large shadow. Table of Content 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 the size of Form controls in Bootstrap ? Bootstrap allows to change the size of form controls using .form-control classes. For default size .form-control is used, for smaller size we can use .form-control class along with .form-control-sm and for larger size we can use .form-control class along with .form-control-lg. Syntax : For default s 2 min read How to get font size of an element using jQuery ? In this article, we will see how to get the font size of an element using jQuery. To get the font size of an element, we will use css() method. The css() method is used to set or return the style property of the selected element. Syntax: var style = $(selector).css(property) Return value: This metho 2 min read How to Add Bootstrap Form Component Styling ? Forms play a crucial role in web development, allowing users to interact with websites. By incorporating Bootstrap form component styling, which includes predefined classes like "form-group" for organizing form elements, "form-control" for styling inputs, and "btn" for buttons, we enhance both the f 2 min read How to Change Font Size using CSS? The CSS font-size property is used to change the font size of text. CSS font-size PropertyThe font-size property in CSS sets the size of the text of HTML elements. Values can be in pixels, percentages, em, rem etc.Syntaxfont-size: value;Example: We can use various font-size units like - em, smaller, 2 min read How to hide element on small devices in Twitter Bootstrap ? Twitter Bootstrap makes extensive use of specific classes to achieve all the various kinds of functionalities.To hide elements on any arbitrary screen size, you can make use of a specific Bootstrap .d-none class.For small screen sizes, you can modify it to use .d-sm-none classFor extra small screen 2 min read Like