Visibility utilities in Bootsrap - Browser Rendering Trace

Render Flow - Visibility utilities

[Load HTML] -> [Parse HTML elements] -> [Apply Bootstrap CSS classes] -> [Evaluate visibility utility classes] -> [Update element display or visibility] -> [Repaint visible elements]

The browser reads the HTML, applies Bootstrap's visibility utility classes which change CSS display or visibility properties, then repaints the page showing or hiding elements accordingly.

Render Steps - 4 Steps

Code Added:class="d-block"

Before

[ ]
(empty space, no visible box)

→

After

[Visible block]
[___________]

The div with d-block becomes a visible block-level element, so it appears as a rectangular box with text.

🔧 Browser Action:Creates box for element, triggers reflow and repaint

Code Sample

Four divs with Bootstrap visibility classes that show or hide them depending on screen size.

Bootsrap

<div class="d-block">Visible block</div>
<div class="d-none">Hidden block</div>
<div class="d-sm-none">Hidden on small screens</div>
<div class="d-md-block">Visible on medium+ screens</div>

Render Quiz - 3 Questions

After applying step 2, what happens to the element with class 'd-none'?

A It becomes a block element

B It disappears and takes no space

C It becomes invisible but still takes space

D It is visible only on small screens

Common Confusions - 2 Topics

Why does my element still take space even though I used a visibility utility?

If you use classes like 'invisible' (not shown here), the element is hidden but still takes space. Only 'd-none' removes it from layout.

💡 Use 'd-none' to remove element and space; 'invisible' hides but keeps space.

Why does my element show on desktop but not on mobile even though I only added 'd-none'?

If you use responsive classes like 'd-sm-none', the element hides only on small screens but shows on larger ones. Check which breakpoint your class targets.

💡 Responsive visibility classes apply only at certain screen widths.

Property Reference

Class	Effect	Screen Size	CSS Property Changed	Visual Result
d-none	Hide element	All	display: none	Element disappears, no space taken
d-block	Show element as block	All	display: block	Element visible as block box
d-sm-none	Hide element	Small and below	display: none (media query)	Element hidden on small screens
d-md-block	Show element as block	Medium and above	display: block (media query)	Element visible on medium+ screens

Concept Snapshot

Bootstrap visibility utilities control element display. 'd-none' hides element completely (display:none). 'd-block' shows element as block (display:block). Responsive classes like 'd-sm-none' hide/show elements at breakpoints. Use these to control visibility across screen sizes.