Bootstrap 5 Hide on Mobile

This example code contains Bootstrap 5 classes that hide HTML elements on mobile devices.

<p class="d-none d-sm-block">Hidden only on mobile </p>

In the above HTML code, the .d-none class hides the HTML element on all devices, and the .d-sm-block class shows the element on small devices and beyond.

Classes are named using the format; Different formats can be used as described below:

.d-{breakpoint}-{value}

The breakpoint is one of sm, md, lg, xl, and xxl.

And the value is one of:

• none
• inline
• inline-block
• block
• grid
• table
• table-cell
• table-row
• flex
• inline-flex