Bootstrap Responsive Utilities
Responsive utilities let you show, hide, or restyle elements differently at different screen sizes, using breakpoint suffixes attached to many utility classes throughout Bootstrap.
A common pattern is combining .d-none with a breakpoint-specific display class, like .d-none .d-lg-block, to hide something on mobile but show it on larger screens.
<div class="d-block d-lg-none">Mobile only</div>
<div class="d-none d-lg-block">Desktop only</div>Breakpoint-specific hiding/showing
Classes such as .d-sm-none, .d-md-block, and .d-lg-flex let you control visibility per breakpoint. This is often used for showing a hamburger menu on mobile and a full nav on desktop.
Responsive text and sizing
Many utilities, including text alignment (.text-md-start) and column widths (.col-lg-4), also support breakpoint infixes, letting nearly every layout decision adapt per screen size.
<div class="d-block d-lg-none bg-warning p-2">Visible on mobile/tablet only</div>
<div class="d-none d-lg-block bg-success text-white p-2">Visible on large screens only</div>One box shows on smaller screens, and a different box shows once the screen is largeThe two boxes use opposite display rules so exactly one of them is visible at any given screen size.
<p class="text-center text-md-start">Centered on mobile, left-aligned on tablets and up</p>Text alignment changes from centered to left-aligned as the screen widenstext-md-start overrides the default text-center once the viewport reaches the md breakpoint.
Key points
- Most Bootstrap utilities support breakpoint infixes like -sm-, -md-, -lg-.
- Combining opposite display classes lets you swap content per screen size.
- Responsive utilities apply to text alignment, spacing, flex, and more.
- This system supports true mobile-first responsive design without media queries.