How to hide on mobile in bootstrap

BootstrapHow-ToBeginner · 3 min read

How to Hide Elements on Mobile in Bootstrap Easily

To hide an element on mobile devices in Bootstrap, use the d-none d-sm-block classes. This hides the element on extra small screens (mobile) and shows it on small screens and larger.

📐

Syntax

Bootstrap uses responsive display utility classes to control element visibility on different screen sizes. The classes follow this pattern:

d-none: hides the element on all screen sizes.
d-{breakpoint}-block: shows the element starting from the specified breakpoint.

For example, d-none d-sm-block hides the element on extra small (mobile) screens and shows it on small screens and larger.

html

<div class="d-none d-sm-block">This text is hidden on mobile but visible on tablets and desktops.</div>

Output

This text is visible only on screens wider than 576px (not on mobile).

💻

Example

This example shows a paragraph hidden on mobile devices and visible on tablets and larger screens using Bootstrap 5 classes.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hide on Mobile Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-4">
    <p class="d-none d-sm-block">This paragraph is hidden on mobile but visible on tablets and desktops.</p>
    <p class="d-block d-sm-none">This paragraph is visible only on mobile devices.</p>
  </div>
</body>
</html>

Output

On a mobile screen, only the second paragraph is visible. On tablets and larger, only the first paragraph is visible.

⚠️

Common Pitfalls

Common mistakes when hiding elements on mobile with Bootstrap include:

Using only d-none without a breakpoint class, which hides the element on all screen sizes.
Confusing breakpoints: sm means 576px and up, so d-none d-sm-block hides on screens smaller than 576px (mobile).
Not including the Bootstrap CSS file or using an outdated version that lacks these utilities.

html

<!-- Wrong: hides element on all screens -->
<div class="d-none">Hidden everywhere</div>

<!-- Right: hides only on mobile -->
<div class="d-none d-sm-block">Hidden on mobile only</div>

Output

The first div is never visible. The second div is hidden on mobile but visible on larger screens.

📊

Quick Reference

Class	Effect	Screen Size
d-none	Hide element	All screen sizes
d-sm-none	Hide element	Small (≥576px) and up
d-md-none	Hide element	Medium (≥768px) and up
d-lg-none	Hide element	Large (≥992px) and up
d-xl-none	Hide element	Extra large (≥1200px) and up
d-xxl-none	Hide element	XXL (≥1400px) and up
d-sm-block	Show element as block	Small (≥576px) and up
d-md-block	Show element as block	Medium (≥768px) and up

✅

Key Takeaways

Use d-none d-sm-block to hide elements on mobile and show on larger screens.

Bootstrap breakpoints start at 576px for small devices; below that is considered mobile.

Always include Bootstrap CSS to use these utility classes.

Avoid using only d-none if you want to hide on mobile only.

Test your page on different screen sizes to confirm visibility.