Visibility utilities in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to hide the element on all screen sizes.

Bootsrap

<div class="[1]">This text is hidden on all devices.</div>

Drag options to blanks, or click blank then click option'

Ad-none

Bd-block

Cd-inline

Dd-flex

Attempts:

3 left

💡 Hint

Common Mistakes

Using display classes that show the element instead of hiding it.

Confusing d-none with other display classes.

The d-none class hides the element on all screen sizes.

2fill in blank

medium

Complete the code to show the element only on medium and larger screens.

Bootsrap

<div class="d-none [1]">Visible on medium and larger screens.</div>

Drag options to blanks, or click blank then click option'

Ad-lg-block

Bd-xl-block

Cd-md-block

Dd-sm-block

Attempts:

3 left

💡 Hint

Common Mistakes

Using d-sm-block which shows from small screens, not medium.

Using classes for larger screens like d-lg-block which hides on medium.

The d-md-block class shows the element as block starting from medium screens and up.

3fill in blank

hard

Fix the error in the code to hide the element only on small screens.

Bootsrap

<div class="[1]">Hidden only on small screens.</div>

Drag options to blanks, or click blank then click option'

Ad-none-sm

Bd-sm-none

Cd-xs-none

Dd-block-sm

Attempts:

3 left

💡 Hint

Common Mistakes

Using invalid class names like d-none-sm.

Confusing breakpoint order or syntax.

The correct class to hide on small screens is d-sm-none. The class d-none-sm is invalid.

4fill in blank

hard

Fill both blanks to make the element visible only on large screens and hidden on smaller ones.

Bootsrap

<div class="[1] [2]">Visible only on large screens.</div>

Drag options to blanks, or click blank then click option'

Ad-none

Bd-lg-block

Cd-md-block

Dd-sm-none

Attempts:

3 left

💡 Hint

Common Mistakes

Using d-md-block which shows on medium screens too.

Not hiding the element by default.

Use d-none to hide by default, and d-lg-block to show on large screens.

5fill in blank

hard

Fill all three blanks to make the element hidden on extra small and small screens, visible as inline on medium, and hidden again on extra large screens.

Bootsrap

<div class="[1] [2] [3]">Complex visibility control.</div>

Drag options to blanks, or click blank then click option'

Ad-none

Bd-md-inline

Cd-xl-none

Dd-sm-block

Attempts:

3 left

💡 Hint

Common Mistakes

Using d-sm-block which shows on small screens, not hiding.

Mixing up the order of classes.

Use d-none to hide by default (extra small and small), d-md-inline to show inline on medium, and d-xl-none to hide again on extra large screens.