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

Ask any question about Bootstrap here... and get an instant response.

Post this Question & Answer:

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

Asked on May 01, 2025

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.

Ask any question about Bootstrap here... and get an instant response.

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

Asked on May 01, 2025

Answer

The Q&A Network