Visibility utilities in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of Bootstrap's visibility utilities?

Bootstrap's visibility utilities help you show or hide elements easily on different screen sizes without writing custom CSS.

beginner

How do you hide an element only on small screens using Bootstrap visibility utilities?

Use the class d-none d-sm-block. This hides the element on extra small screens and shows it on small screens and larger.

beginner

What does the class d-md-none do?

It hides the element on medium screens and larger, but shows it on smaller screens.

intermediate

Explain the difference between d-none and invisible classes in Bootstrap.

d-none completely hides the element and removes it from the layout flow. invisible hides the element visually but keeps its space in the layout.

beginner

How can you make an element visible only on large screens using Bootstrap classes?

Use d-none d-lg-block. This hides the element on all screen sizes except large and above.

Which class hides an element on all screen sizes in Bootstrap?

A d-block

B d-inline

C visible

D d-none

d-none hides the element completely on all screen sizes.

What does d-sm-block do?

A Shows element on small screens and larger

B Shows element only on extra small screens

C Hides element on small screens

D Makes element inline on all screens

d-sm-block makes the element display as block starting from small screens and up.

If you want to hide an element only on medium and larger screens, which class should you use?

A d-md-none

B d-none d-md-block

C d-lg-none

D d-sm-none

d-md-none hides the element on medium and larger screens.

Which class keeps the element's space but hides it visually?

A d-none

B hidden

C invisible

D d-block

The invisible class hides the element but keeps its space in the layout.

To show an element only on large screens and hide it elsewhere, which classes do you use?

A d-lg-none

B d-none d-lg-block

C d-block d-lg-none

D d-none d-sm-block

d-none d-lg-block hides the element on all sizes except large and above.

Describe how Bootstrap visibility utilities help in creating responsive designs.

Think about how websites change layout on phones vs desktops.

Explain the difference between the Bootstrap classes d-none and invisible.

One hides completely, the other just makes it invisible.