Didn’t find the answer you were looking for?

How do I apply responsive typography classes to adjust font sizes based on screen size in Bootstrap?

Asked on Nov 23, 2025

Answer

In Bootstrap 5, you can use responsive typography utility classes to adjust font sizes based on screen size. These classes follow the pattern `fs-{size}` where `{size}` ranges from 1 to 6, with 1 being the largest.

<!-- 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">Smaller text on all screens</p>
        <p class="fs-6">Smallest text on all screens</p>

        <!-- Responsive example -->
        <p class="fs-1 fs-md-3 fs-lg-5">Responsive text size: large on small screens, medium on medium screens, and small on large screens</p>
        <!-- END COPY / PASTE -->

Additional Comment:

Use `fs-{size}` to set a consistent font size across all screen sizes.
For responsive typography, combine `fs-{breakpoint}-{size}` classes to adjust font size at different breakpoints.
Breakpoints include `sm`, `md`, `lg`, `xl`, and `xxl`.
The example shows how to set a font size that changes at different screen sizes using responsive classes.

✅ Answered with Bootstrap 5 best practices.

Didn’t find the answer you were looking for?

How do I apply responsive typography classes to adjust font sizes based on screen size in Bootstrap?

Asked on Nov 23, 2025

Answer

The Q&A Network