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.

Practice

1. What does the Bootstrap class d-none do to an element?

easy

A. It changes the element to display as a block.

B. It makes the element invisible but keeps its space.

C. It hides the element completely, removing it from the layout.

D. It makes the element visible only on small screens.

Solution

1. Step 1: Understand the d-none class purpose

   The d-none class sets display: none; on the element, hiding it completely.

2. Step 2: Effect on layout

   Because the element is removed from the layout flow, it takes no space on the page.

3. Final Answer:

   It hides the element completely, removing it from the layout. -> Option C

4. Quick Check:

   d-none hides element fully [OK]

Hint: Remember: d-none means no display at all [OK]

Common Mistakes:

• Confusing d-none with invisible
• Thinking it only hides visually but keeps space
• Assuming it only works on small screens

2. Which of the following is the correct way to make an element visible only on medium and larger screens using Bootstrap classes?

easy

A. d-md-none d-lg-block

B. d-none d-md-block

C. d-block d-md-none

D. d-none d-sm-block

Solution

1. Step 1: Understand breakpoint classes

   d-none hides the element on all screen sizes. d-md-block makes it display block starting at medium screens and up.

2. Step 2: Combine classes for desired visibility

   Using d-none d-md-block hides the element on small and extra small screens, shows it on medium and larger.

3. Final Answer:

   <code>d-none d-md-block</code> -> Option B

4. Quick Check:

   Hide all, show from medium up = d-none d-md-block [OK]

Hint: Use d-none plus breakpoint d-*-block to show [OK]

Common Mistakes:

• Reversing the breakpoint classes order
• Using d-block d-md-none which hides on medium screens
• Confusing sm and md breakpoints

3. Given this HTML snippet:

<div class="invisible">Hello</div>

What will you see in the browser?

medium

A. The text 'Hello' is hidden but the space remains.

B. The text 'Hello' is visible and takes space.

C. The text 'Hello' is hidden and no space is taken.

D. The text 'Hello' is visible only on large screens.

Solution

1. Step 1: Understand the invisible class effect

   The invisible class applies visibility: hidden;, hiding the content but keeping its space.

2. Step 2: Visual result in browser

   The text won't be seen, but the element's space remains reserved on the page.

3. Final Answer:

   The text 'Hello' is hidden but the space remains. -> Option A

4. Quick Check:

   invisible hides content but keeps layout space [OK]

Hint: invisible hides text but keeps space [OK]

Common Mistakes:

• Thinking invisible removes element from layout
• Confusing invisible with d-none
• Expecting text to show on some screen sizes

4. You want to hide a button on small screens but show it on medium and larger screens. Which Bootstrap class combination is incorrect?

medium

A. d-none d-sm-block

B. d-sm-none d-md-block

C. d-block d-sm-none d-md-block

D. d-none d-md-block

Solution

1. Step 1: Analyze d-none d-sm-block

   d-none hides element on all sizes, d-sm-block shows it from small screens up, so it remains hidden on extra small but visible on small and larger.

2. Step 2: Check requirement

   The requirement is to hide on small screens but show on medium and larger. This combination shows on small screens, so it is incorrect.

3. Final Answer:

   <code>d-none d-sm-block</code> -> Option A

4. Quick Check:

   Hide on small, show medium up needs d-none d-md-block [OK]

Hint: Check breakpoint start points carefully for show/hide [OK]

Common Mistakes:

• Using d-sm-block instead of d-md-block
• Adding redundant classes that conflict
• Assuming d-none can be overridden by smaller breakpoint

5. You want a paragraph to be hidden on extra small and small screens but visible on medium and large screens. Which class combination achieves this?

hard

A. invisible d-md-visible

B. invisible d-md-block

C. invisible d-md-visible d-md-block

D. d-none d-md-block

Solution

1. Step 1: Understand the requirement

   Hide the paragraph on xs and sm screens, make it visible on md and larger.

2. Step 2: Analyze correct option

   d-none d-md-block sets display: none by default (hides completely on xs/sm), then display: block from md up (visible on md+).

3. Step 3: Why other options fail

   A and C use non-existent d-md-visible. D uses invisible which applies visibility: hidden everywhere, so remains hidden even on md+.

4. Final Answer:

   <code>d-none d-md-block</code> -> Option D

5. Quick Check:

   Hide xs/sm completely, show md+ = d-none d-md-block [OK]

Hint: Use d-none d-md-block to hide below medium, show from medium [OK]

Common Mistakes:

• Using invisible which keeps space but stays hidden on large screens
• Using non-existent classes like d-md-visible
• Not understanding breakpoint overrides for display