Didn’t find the answer you were looking for?

How do I use Bootstrap's responsive typography utility classes to adjust font sizes for different screen sizes?

Asked on Nov 30, 2025

Answer

Bootstrap 5 provides responsive typography utility classes that allow you to adjust font sizes based on different screen sizes. These classes make it easy to apply different font sizes for small, medium, large, and extra-large devices.

<!-- BEGIN COPY / PASTE -->
        <p class="fs-1">Extra large text on all screens</p>
        <p class="fs-2">Large text on all screens</p>
        <p class="fs-3">Medium text on all screens</p>
        <p class="fs-4">Small text on all screens</p>
        <p class="fs-5">Extra small text on all screens</p>
        
        <!-- Responsive font sizes -->
        <p class="fs-1 fs-md-2">Extra large on small screens, large on medium and up</p>
        <p class="fs-2 fs-lg-3">Large on small and medium screens, medium on large and up</p>
        <!-- END COPY / PASTE -->

Additional Comment:

Use `fs-{size}` classes to set font size, where `{size}` ranges from 1 (largest) to 6 (smallest).
To make font sizes responsive, combine classes like `fs-1 fs-md-2` to change the font size at the `md` breakpoint.
Breakpoints are defined as `sm`, `md`, `lg`, `xl`, and `xxl`, corresponding to small, medium, large, extra-large, and extra-extra-large devices.

✅ Answered with Bootstrap 5 best practices.

Didn’t find the answer you were looking for?

How do I use Bootstrap's responsive typography utility classes to adjust font sizes for different screen sizes?

Asked on Nov 30, 2025

Answer

The Q&A Network