How can I use Bootstrap 5 utilities to hide/show content at specific breakpoints?

Asked on Jun 01, 2025

1 Answer

Bootstrap 5 provides utility classes to easily hide or show content at specific breakpoints using responsive display utilities. These classes allow you to control the visibility of elements based on the screen size.

<!-- BEGIN COPY / PASTE -->
        <div class="d-none d-sm-block">Visible on small and larger screens</div>
        <div class="d-block d-sm-none">Visible only on extra small screens</div>
        <!-- END COPY / PASTE -->

Additional Comment:

Use `d-none` to hide an element on all screen sizes.
Combine `d-none` with `d-{breakpoint}-block` to show the element at specific breakpoints.
Breakpoints include `sm` (≥576px), `md` (≥768px), `lg` (≥992px), `xl` (≥1200px), and `xxl` (≥1400px).
The first example is visible on screens `sm` and larger, while the second is visible only on `xs` screens.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions