Bootstrap Text Font Size Last Updated : 07 May, 2024 Comments Improve Suggest changes Like Article Like Report Bootstrap Text Font Size refers to predefined classes provided by the Bootstrap framework to adjust the size of text elements. These classes, such as `fs-1` to `fs-6`, allow easy control over text size, enhancing readability and visual hierarchy within web pages. Bootstrap Text Font Size classes: ClassDescriptionfs-1Set text size equal to the h1 tagfs-2Set text size equal to the h2 tagfs-3Set text size equal to the h3 tagfs-4Set text size equal to the h4 tagfs-5Set text size equal to the h5 tagfs-6Set text size equal to the h6 tagSyntax: <tag class="fs-1">...</tag>Examples of Bootstrap 5 Text Font SizeThe below example illustrates the Bootstrap Text Font size: Example 1: In this example, we demonstrates the usage of Bootstrap Font Size classes (fs-1, fs-3, fs-5) to control the font size of text elements within a container. HTML <!DOCTYPE html> <html> <head> <link href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity= "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" /> </head> <body> <div class="container"> <!-- Bootstrap Font Size classes used --> <u>Font size: fs-1</u> <p class="fs-1"> A Computer Science Portal for Geeks </p> <u>Font size: fs-3</u> <p class="fs-3"> A Computer Science Portal for Geeks </p> <u>Font size: fs-5</u> <p class="fs-5"> A Computer Science Portal for Geeks </p> </div> </body> </html> Output: Bootstrap 5 Text Font Size Example OutputExample 2: In this example, we Bootstrap Font Size classes (fs-2, fs-4, fs-6) to adjust the font size of text elements within a container for improved readability and visual appeal. HTML <!DOCTYPE html> <html> <head> <link href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity= "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" /> </head> <body> <div class="container"> <!-- Bootstrap Font Size classes used --> <u>Font size: fs-2</u> <p class="fs-2"> A Computer Science Portal for Geeks </p> <u>Font size: fs-4</u> <p class="fs-4"> A Computer Science Portal for Geeks </p> <u>Font size: fs-6</u> <p class="fs-6"> A Computer Science Portal for Geeks </p> </div> </body> </html> Output: Bootstrap 5 Text Font Size Example Output Comment More infoAdvertise with us Next Article Bootstrap 5 Text Monospace S skyridetim Follow Improve Article Tags : Web Technologies Bootstrap Bootstrap-5 Similar Reads Bootstrap 5 Text Monospace Text Monospace is used to change a selection to our monospace font stack with .font-monospace. This font looks like a typewriter print. Bootstrap 5 Text Monospace Class: font-monospace: This class is used to change font stack with .font-monospace. Syntax: <tag class="font-monospace">...</ta 1 min read Bootstrap 5 Text Line height Text Line height classes are used to set the gap between the two lines. there are several classes to set the line height. The default line height of the class is lh-base. Bootstrap 5 Text Line height Classes: ClassDescriptionlh-1Set line height to 1lh-smSet line height to smalllh-baseSet line height 2 min read Bootstrap 5 Text In this article, we will discuss how to change the alignment, weight, line height, wrapping, font size of the text, and more with the help of Bootstrap 5 utilities. Text alignment: We can use text alignment classes to align the text in different positions in different viewports.Text wrapping and ove 4 min read Bootstrap 5 Buttons Sizes Bootstrap 5 provides 2 different classes that allow changing the button sizes. The .btn-lg and .btn-sm classes are used for large and small buttons. Buttons Sizes Classes: .btn-lg: This class is used to create large-size buttons..btn-sm: This class is used to create small-size buttons. Syntax: // Fo 2 min read Bootstrap 5 Navbar Text Navbar Text is used to put some text on the navbar. To do so Bootstrap 5 brings the Bootstrap 5 Navbar Text features. Creating a navbar is obvious when we are creating a website, and putting text on the navbar is required to guide the visitors to the right destination. Navbar Text Class: navbar-text 2 min read Bootstrap 5 Reboot Native Font Stack Bootstrap 5 Reboot Native font stack includes a native/system font stack that is intended to deliver consistent and appealing typography across several devices and platforms. These font stacks are designed specifically to support & consider modern devices, in order to enhance the rendering of th 3 min read Like