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.

Practice

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

easy

A. It hides the element on all screen sizes.

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

C. It changes the element's color to none.

D. It disables the element's interaction.

Solution

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

   The d-none class in Bootstrap sets the CSS property display: none; which hides the element completely.

2. Step 2: Confirm effect on all screen sizes

   Since no breakpoint is specified, d-none applies to all screen sizes, hiding the element everywhere.

3. Final Answer:

   It hides the element on all screen sizes. -> Option A

4. Quick Check:

   d-none = hide element always [OK]

Hint: Remember: d-none means display none everywhere [OK]

Common Mistakes:

• Thinking d-none only hides on small screens
• Confusing d-none with color or interaction changes
• Assuming it disables the element

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

easy

A. d-none d-md-block

B. d-md-none

C. d-block d-md-none

D. d-sm-block d-md-none

Solution

1. Step 1: Understand breakpoint classes for visibility

   d-none hides the element on all screens, and d-md-block shows it as block starting from medium screens and up.

2. Step 2: Combine classes to show only on medium and larger

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

3. Final Answer:

   d-none d-md-block -> Option A

4. Quick Check:

   Hide all + show md+ = d-none d-md-block [OK]

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

Common Mistakes:

• Using d-md-none which hides on medium screens
• Confusing d-block and d-none order
• Using wrong breakpoints like d-sm-block d-md-none

3. What will be the visible behavior of this element?

<div class="d-none d-lg-block">Hello</div>

medium

A. Visible on all screen sizes

B. Hidden on large screens and above

C. Visible only on large screens and above

D. Hidden on all screen sizes

Solution

1. Step 1: Analyze the classes d-none and d-lg-block

   d-none hides the element on all screen sizes by default. d-lg-block overrides this to show the element as block starting at large screens (lg) and above.

2. Step 2: Determine visibility on screen sizes

   From extra small to medium screens, the element is hidden. From large screens and up, it becomes visible as a block element.

3. Final Answer:

   Visible only on large screens and above -> Option C

4. Quick Check:

   d-none + d-lg-block = show lg+ only [OK]

Hint: d-none hides all, d-lg-block shows from large screens [OK]

Common Mistakes:

• Thinking it is visible on all screens
• Confusing d-lg-block as hiding on large screens
• Ignoring the effect of d-none

4. You want to hide an element only on small screens but it remains visible everywhere. Which Bootstrap class usage is incorrect?

medium

A. d-sm-none d-md-block

B. d-block d-sm-none

C. d-none d-md-block

D. d-none d-sm-block

Solution

1. Step 1: Understand the goal and class effects

   To hide only on small screens, the element should be visible by default and hidden on small screens only.

2. Step 2: Analyze each option's effect

   d-none d-sm-block hides the element on all screens by default, then shows it from small screens and up. This means it is hidden only on extra small screens, not small screens.

3. Final Answer:

   d-none d-sm-block -> Option D

4. Quick Check:

   Hide all then show sm+ hides xs only, not sm [OK]

Hint: Check which breakpoint hides vs shows carefully [OK]

Common Mistakes:

• Mixing up small (sm) and extra small (xs) breakpoints
• Using d-none without proper show class
• Assuming d-sm-block hides on small screens

5. You want a paragraph to be hidden on extra small and small screens, visible as block on medium and large screens, and inline on extra large screens. Which class set achieves this?

hard

A. d-none d-md-inline d-xl-block

B. d-none d-md-block d-xl-inline

C. d-none d-sm-block d-lg-inline

D. d-sm-none d-md-block d-lg-inline

Solution

1. Step 1: Break down the requirements by screen size

   Extra small (xs) and small (sm): hidden
   Medium (md) and large (lg): visible as block
   Extra large (xl): visible as inline

2. Step 2: Match classes to requirements

   d-none hides on all by default (xs and sm included). d-md-block shows block from medium and up (md, lg, xl). d-xl-inline overrides to inline only on extra large screens.

3. Step 3: Verify other options

   Other options either hide wrong breakpoints or use incorrect display types at breakpoints.

4. Final Answer:

   d-none d-md-block d-xl-inline -> Option B

5. Quick Check:

   Hide all, show block md+, inline xl = d-none d-md-block d-xl-inline [OK]

Hint: Use d-none to hide, then override with d-md-block and d-xl-inline [OK]

Common Mistakes:

• Using d-sm-none hides only small, not extra small
• Mixing inline and block classes at wrong breakpoints
• Forgetting to hide on extra small screens