Display utilities in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the element hidden on all screen sizes.

Bootsrap

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

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

Ad-block

Bd-none

Cd-inline

Dd-flex

Attempts:

3 left

💡 Hint

Common Mistakes

Using d-block which shows the element.

Using d-inline which only changes display style but does not hide.

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

2fill in blank

medium

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

Bootsrap

<div class="[1]">Visible on medium and up.</div>

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

Ad-none d-md-block

Bd-block d-md-none

Cd-md-none

Dd-none d-sm-block

Attempts:

3 left

💡 Hint

Common Mistakes

Using d-block d-md-none which does the opposite.

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

The combination d-none d-md-block hides the element on small screens and shows it on medium and larger screens.

3fill in blank

hard

Fix the error in the code to make the element inline only on large screens.

Bootsrap

<span class="d-[1]-inline">Inline on large screens only.</span>

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

Alg

Bsm

Cmd

Dxl

Attempts:

3 left

💡 Hint

Common Mistakes

Using sm or md which apply to smaller screen sizes.

Using xl which applies only on extra large screens.

The class d-lg-inline makes the element inline only on large screens and up.

4fill in blank

hard

Fill both blanks to make the element hidden on small screens and flex on extra large screens.

Bootsrap

<div class="[1] [2]">Responsive display</div>

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

Ad-none

Bd-flex

Cd-xl-flex

Dd-sm-none

Attempts:

3 left

💡 Hint

Common Mistakes

Using d-none which hides on all screen sizes.

Using d-flex which shows flex on all screen sizes.

d-sm-none hides the element on small screens and smaller, and d-xl-flex shows it as flex on extra large screens.

5fill in blank

hard

Fill all three blanks to make the element block on small screens, inline on medium, and hidden on large screens.

Bootsrap

<div class="[1] [2] [3]">Multi-display</div>

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

Ad-block

Bd-md-inline

Cd-lg-none

Dd-sm-inline

Attempts:

3 left

💡 Hint

Common Mistakes

Using d-sm-inline which applies inline only on small screens, not medium.

Not hiding the element on large screens.

d-block shows block by default (small screens), d-md-inline changes to inline on medium screens, and d-lg-none hides on large screens.