How to use fs class In Bootstrap

Q: How to use fs class In Bootstrap

Bootstrap’s fs classes, such as fs-1 and fs-2, facilitate responsive text sizing by adjusting font sizes at screen breakpoints. This offers a straightforward method to ensure text adapts to various device sizes without custom CSS.

Using display class

Bootstrap’s fs classes, such as fs-1 and fs-2, facilitate responsive text sizing by adjusting font sizes at screen breakpoints. This offers a straightforward method to ensure text adapts to various device sizes without custom CSS.

Example: This example describes the implementation of making the text responsive using display fs of Bootstrap.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Responsive Text</title>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
          rel="stylesheet" />
</head>

<body>
    <div class="container">
        <h1 class="text-center text-success">
            w3wiki
        </h1>
        <div class="container">
            <p>Small text</p>
            <p class="fs-5">Medium text</p>
            <p class="fs-4">Medium text</p>
            <p class="fs-3">Large text</p>
            <p class="fs-2">Large text</p>
            <p class="fs-1">Very Large text</p>
        </div>
    </div>
</body>

</html>

Output:

How to make Text Responsive in Bootstrap ?

Making text responsive in Bootstrap involves using responsive typography utilities like .text-sm, .text-md, etc., to ensure text adapts to different screen sizes. This ensures readability and maintains visual hierarchy across devices.

Below are the approaches to making text responsive in Bootstrap: