Display and visibility

Last reviewed May 28, 2026 Content v20260528

Track mode

iframe_html

Means

HTML preview sandbox

Reading

~1 min

Level

intermediate

This lesson

This lesson teaches Display and visibility—the ideas, syntax, and habits you need before moving on in Bootstrap.

Bootstrap patterns appear constantly in legacy apps and rapid admin UI work.

You will apply Display and visibility in contexts like: Internal tools, WordPress themes, Laravel apps, and teams that want opinionated UI without writing every rule from scratch.

Read the lesson, edit HTML/CSS in the playground, press Run to preview, then answer the lesson MCQs.

When the previous lesson's MCQs feel easy and you can explain Display and visibility in your own words.

Control layout participation with d-none, d-block, d-flex, and responsive pairs like d-md-none d-lg-block. Classic pattern: show toggler on mobile, horizontal nav on desktop.

Visibility vs display

d-none — removes from layout (display: none)
invisible — hides visually but keeps layout space
visually-hidden — screen-reader-only text (skip links, labels)

Important interview questions and answers

Q: d-none vs invisible?
A: d-none removes the box from flow; invisible keeps space—like visibility: hidden.
Q: Accessibility when hiding nav?
A: Collapsed mobile menus should still be keyboard reachable when open; display utilities alone do not implement focus traps.

Self-check

Which utility hides an element but preserves its space?
Write classes to hide on md and show on lg.

Playground

Runs in your browser in a sandboxed frame. Backend runners appear when this track’s profile allows them.

Discussion

Past discussion is visible to everyone. Only logged-in users can post comments and replies.

Starter discussion topics

visibility hidden vs display none?
When is sr-only appropriate?

No discussion yet. Be the first to ask a question.