How to show on desktop only bootstrap

BootstrapHow-ToBeginner · 3 min read

How to Show Content on Desktop Only Using Bootstrap

Use Bootstrap's responsive display classes like d-none d-lg-block to hide content on small and medium screens and show it only on desktop (large) screens. The class d-none hides the element everywhere, and d-lg-block makes it visible as a block on large screens and above.

📐

Syntax

Bootstrap uses responsive display utility classes to control element visibility based on screen size. The pattern is d-{breakpoint}-{value}, where:

d-none: hides the element on all screen sizes.
d-lg-block: shows the element as a block on large (desktop) screens and larger.
Breakpoints include sm, md, lg, xl, and xxl.

Combining d-none with d-lg-block hides the element on small and medium screens and shows it on large screens and above.

html

<div class="d-none d-lg-block">This text shows only on desktop (large) screens and bigger.</div>

Output

This text shows only on desktop (large) screens and bigger.

💻

Example

This example shows a message that appears only on desktop screens (large and above). On smaller screens, the message is hidden.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Show on Desktop Only</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-5">
    <div class="d-none d-lg-block p-3 bg-primary text-white">
      This content is visible only on desktop (large) screens and larger.
    </div>
    <div class="d-lg-none p-3 bg-secondary text-white mt-3">
      This content is visible on small and medium screens only.
    </div>
  </div>
</body>
</html>

Output

On large screens and bigger: Blue box with text 'This content is visible only on desktop (large) screens and larger.' On smaller screens: Gray box with text 'This content is visible on small and medium screens only.'

⚠️

Common Pitfalls

Forgetting to include d-none causes the element to show on all screen sizes.
Using d-block without breakpoint shows the element on all screens, ignoring the desktop-only intent.
Not understanding Bootstrap breakpoints can lead to unexpected visibility on tablets or smaller laptops.
Mixing display classes incorrectly can cause conflicts and unpredictable results.

bootstrap

<!-- Wrong: element always visible -->
<div class="d-lg-block">Visible on all screens, not desktop only</div>

<!-- Right: element hidden on small and medium, visible on large -->
<div class="d-none d-lg-block">Visible only on desktop (large) screens</div>

📊

Quick Reference

Class	Effect	Screen Size
d-none	Hide element	All sizes
d-block	Show element as block	All sizes
d-lg-none	Hide element	Large and above
d-lg-block	Show element as block	Large and above
d-md-none	Hide element	Medium and above
d-md-block	Show element as block	Medium and above

✅

Key Takeaways

Use d-none d-lg-block to show content only on desktop (large) screens and hide it elsewhere.

Always combine d-none with a breakpoint display class to control visibility precisely.

Bootstrap breakpoints define screen sizes: lg is desktop and larger.

Test your layout on different screen sizes to ensure visibility works as expected.

Avoid mixing display classes without understanding their effects to prevent display conflicts.