Visibility utilities in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Bootstrap's d-none class

What is the visual effect of applying the Bootstrap class d-none to an HTML element?

Bootsrap

<div class="d-none">Hidden Text</div>

A The element is completely hidden and takes up no space on the page.

B The element is visible but with reduced opacity.

C The element is visible but disabled for user interaction.

D The element is visible only on small screens.

💡 Hint

Think about whether the element still occupies space or not.

The d-none class applies display: none; CSS, which hides the element completely and removes it from the page layout, so it takes no space.

📝 Syntax

intermediate

Using responsive visibility classes

Which Bootstrap class combination will make an element visible only on medium (≥768px) and larger screens, but hidden on smaller screens?

Bootsrap

<div class="???">Responsive Text</div>

A d-block d-md-none

B d-none d-md-block

C d-md-none d-lg-block

D d-none d-sm-block

💡 Hint

Remember that d-none hides the element and d-md-block shows it from medium screens up.

d-none hides the element on all screen sizes. d-md-block overrides this to show the element as a block starting at medium screens (≥768px).

❓ rendering

advanced

Effect of invisible class on element layout

What will you see in the browser when the following HTML is rendered?

<button class="btn btn-primary invisible">Click Me</button>

Bootsrap

<button class="btn btn-primary invisible">Click Me</button>

A A visible button with reduced opacity.

B A button that is hidden and does not occupy any space.

C A button that is invisible but still occupies space and can be clicked.

D A disabled button that cannot be clicked.

💡 Hint

The invisible class uses visibility: hidden; CSS.

The invisible class applies visibility: hidden;, which hides the element visually but keeps its space in the layout. The button cannot be clicked because it is invisible.

❓ selector

advanced

Selecting elements hidden only on large screens

Which Bootstrap class hides an element only on large (≥992px) screens but shows it on smaller screens?

Bootsrap

<div class="???">Content</div>

A d-none d-xl-block

B d-none d-lg-block

C d-lg-block d-xl-none

D d-lg-none

💡 Hint

Look for a class that applies display: none; starting at large screens.

d-lg-none hides the element only on large screens and up, while it remains visible on smaller screens.

❓ accessibility

expert

Accessibility impact of using d-none vs invisible

Which statement about accessibility is true when using Bootstrap's d-none and invisible classes?

A <code>d-none</code> hides content from screen readers, while <code>invisible</code> keeps content accessible but visually hidden.

B <code>invisible</code> hides content from screen readers, while <code>d-none</code> keeps content accessible but visually hidden.

C Both <code>d-none</code> and <code>invisible</code> hide content from screen readers.

D Neither <code>d-none</code> nor <code>invisible</code> affect screen reader accessibility.

💡 Hint

Consider how CSS display and visibility affect screen reader behavior.

d-none uses display: none;, which removes the element from the accessibility tree, hiding it from screen readers. invisible uses visibility: hidden;, which hides visually but keeps the element in the accessibility tree, so screen readers can still access it.