0
0
Bootsrapmarkup~5 mins

Visibility utilities in Bootsrap

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Visibility utilities help you show or hide parts of your webpage easily without writing custom CSS.

You want to hide a menu on small screens but show it on larger screens.
You need to temporarily hide a button until a user performs an action.
You want to show extra information only on desktop devices.
You want to make some content invisible but keep its space on the page.
You want to improve accessibility by controlling what screen readers can see.
Syntax
Bootsrap
Use classes like .d-none, .d-block, .d-sm-none, .d-md-block, etc.

Example:
<div class="d-none d-md-block">Visible on medium and larger screens</div>
Classes starting with d- control display property (none, block, inline, etc.).
You can combine classes with breakpoints like -sm-, -md-, -lg- to control visibility on different screen sizes.
Examples
This element is hidden everywhere.
Bootsrap
<div class="d-none">Hidden on all screens</div>
Shows only on screens smaller than 576px.
Bootsrap
<div class="d-block d-sm-none">Visible only on extra small screens</div>
Hidden on small devices, visible on medium (≥768px) and larger.
Bootsrap
<div class="d-none d-md-block">Hidden on small, visible on medium and larger</div>
Element is invisible but still occupies space on the page.
Bootsrap
<div class="invisible">Invisible but takes up space</div>
Sample Program

This page shows how different paragraphs appear or hide depending on screen size using Bootstrap visibility utilities.

Bootsrap
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap Visibility Utilities Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <main class="container py-4">
    <h1>Visibility Utilities Demo</h1>
    <p class="d-none d-md-block">This paragraph is only visible on medium and larger screens.</p>
    <p class="d-block d-md-none">This paragraph is only visible on small screens.</p>
    <p class="invisible">This paragraph is invisible but still takes space.</p>
    <p>This paragraph is always visible.</p>
  </main>
</body>
</html>
OutputSuccess
Important Notes

Use d-none to hide elements completely (no space taken).

Use invisible to hide elements but keep their space.

Combine display classes with breakpoints to make your site responsive.

Summary

Visibility utilities let you quickly show or hide elements.

Use d-none and d-block with breakpoints for responsive control.

invisible hides content but keeps layout space.