Responsive Text
Bootstrap's fs-* utilities and responsive text alignment classes adjust typography across breakpoints.
Bootstrap
Beginner
3 min read
Responsive Typography
Example
<!-- Font size responsive -->
<h1 class="fs-2 fs-md-1 fw-bold">Big on desktop, smaller on mobile</h1>
<!-- Text alignment responsive -->
<p class="text-center text-md-start">Centered mobile, left-aligned desktop</p>
<!-- Fluid heading with display classes -->
<h1 class="display-6 display-md-4 display-lg-2">Hero Heading</h1>
<!-- Bootstrap 5.2+ responsive font-size (rfs) is on by default -->
<!-- $enable-rfs: true in Sass --> Pro Tip
Bootstrap uses RFS (Responsive Font Sizes) by default — headings automatically scale down on small screens.