How can I toggle the visibility of a Bootstrap element only on mobile devices using utility classes?

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

Post this Question & Answer:

How can I toggle the visibility of a Bootstrap element only on mobile devices using utility classes?

Asked on Jan 06, 2026

Answer

To toggle the visibility of a Bootstrap element only on mobile devices, you can use Bootstrap's responsive display utility classes. These classes allow you to control the visibility of elements based on the viewport size.

<!-- BEGIN COPY / PASTE -->
        <div class="d-block d-sm-none">
            <!-- Content visible only on mobile devices -->
            This content is visible only on mobile devices.
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

The `d-block` class ensures the element is displayed as a block on mobile devices.
The `d-sm-none` class hides the element on small devices and larger (i.e., tablets, desktops).
Adjust the classes as needed for different breakpoints (e.g., `d-md-none` for hiding on medium devices and larger).

✅ Answered with Bootstrap 5 best practices.

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

How can I toggle the visibility of a Bootstrap element only on mobile devices using utility classes?

Asked on Jan 06, 2026

Answer

5,000+ Real Questions. Clear Answers.