Display utilities in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of Bootstrap's display utilities?

Bootstrap's display utilities help you quickly show, hide, or change the display behavior of elements without writing custom CSS.

beginner

How do you hide an element on all screen sizes using Bootstrap display utilities?

Use the class d-none to hide an element on all screen sizes.

intermediate

What class would you use to make an element display as a block only on medium screens and larger?

Use d-md-block. It shows the element as block starting from medium screens (≥768px) and hides or uses default display on smaller screens.

intermediate

Explain the difference between d-flex and d-inline-flex.

d-flex makes an element a block-level flex container, taking full width by default. d-inline-flex makes it an inline-level flex container, so it only takes as much width as its content.

intermediate

How can you make an element visible only on small screens using Bootstrap display utilities?

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

Which class hides an element on all screen sizes?

A d-none

B d-block

C d-flex

D d-inline

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

What does d-md-none do?

A Shows element only on medium screens

B Hides element on medium screens and larger

C Hides element only on medium screens

D Shows element on all screens except medium

d-md-none hides the element on medium screens (≥768px) and larger.

Which class makes an element a flex container but inline-level?

A d-flex

B d-inline

C d-inline-flex

D d-block

d-inline-flex makes the element an inline-level flex container.

To show an element only on large screens and up, which class is correct?

A d-lg-block d-none

B d-block d-lg-none

C d-lg-none d-block

D d-none d-lg-block

Use d-none d-lg-block to hide on small and medium, show block on large and up.

What is the default display behavior of d-block?

A Block-level element

B Hidden element

C Flex container

D Inline element

d-block makes the element display as block-level.

Describe how you would use Bootstrap display utilities to show an element only on small screens and hide it on others.

Think about combining classes to control visibility on different screen sizes.

Explain the difference between d-flex and d-inline-flex and when you might use each.

Consider how the element behaves in the flow of the page.