Display utilities in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What will be visible on the screen?

Given the following HTML snippet using Bootstrap display utilities, which text will be visible when viewed on a large screen (≥992px)?

Bootsrap

<div>
  <p class="d-none d-lg-block">Visible on large screens</p>
  <p class="d-block d-lg-none">Visible on small screens</p>
</div>

A Both texts are visible.

B Only 'Visible on small screens' is visible.

C No text is visible.

D Only 'Visible on large screens' is visible.

💡 Hint

Remember that 'd-lg-block' means display block on large screens and 'd-none' hides the element.

The first paragraph has d-none which hides it by default, but d-lg-block makes it visible as block on large screens (≥992px). The second paragraph is block by default but hidden on large screens with d-lg-none. So on large screens, only the first paragraph is visible.

❓ selector

intermediate

Which class hides an element only on medium screens?

In Bootstrap, which display utility class hides an element only on medium screens (≥768px and <992px) but shows it on other screen sizes?

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

B d-md-none d-lg-block

C d-md-none d-sm-block

D d-none d-md-none d-lg-block

💡 Hint

Look for a class that hides on medium screens but shows on large screens.

d-md-none hides the element on medium screens and up, but d-lg-block overrides that to show it as block on large screens. So the element is hidden only on medium screens.

🧠 Conceptual

advanced

What is the effect of d-flex in Bootstrap?

What does applying the Bootstrap class d-flex do to an element?

A It hides the element on all screen sizes.

B It makes the element inline-block.

C It sets the element's display property to flex, enabling flexbox layout.

D It applies a fixed width and height to the element.

💡 Hint

Think about CSS display properties and flexbox.

The d-flex class sets display: flex; on the element, enabling flexbox layout which helps arrange child elements in flexible ways.

❓ layout

advanced

How to make an element visible only on extra small screens?

Which combination of Bootstrap display utility classes makes an element visible only on extra small screens (<576px) and hidden on all larger screens?

A d-block d-sm-none

B d-none d-sm-block

C d-block d-md-none

D d-none d-xs-block

💡 Hint

Remember that d-sm-none hides on small screens and up.

d-block makes the element visible by default (extra small screens). d-sm-none hides it on small screens (≥576px) and larger. So the element is visible only on extra small screens.

❓ accessibility

expert

Which Bootstrap display utility class combination ensures an element is hidden visually but accessible to screen readers?

You want to hide an element from visual display but keep it accessible to screen readers for accessibility. Which Bootstrap class or combination achieves this?

A visually-hidden

B d-none

C d-none d-sm-block

D d-hidden

💡 Hint

Think about classes designed specifically for accessibility, not just display.

The visually-hidden class hides the element visually but keeps it available to screen readers. d-none hides it completely from all users including screen readers.