Flex utilities in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the Bootstrap class d-flex do?

It makes an element a flex container, enabling flexbox layout for its children.

beginner

How do you align flex items vertically in the center using Bootstrap flex utilities?

Use the class align-items-center on the flex container to center items vertically.

intermediate

What Bootstrap class would you use to space flex items evenly with space between them?

Use justify-content-between to place equal space between flex items.

intermediate

How can you make a flex container wrap its items to the next line in Bootstrap?

Add the class flex-wrap to allow flex items to wrap onto multiple lines.

beginner

What is the difference between flex-row and flex-column in Bootstrap?

flex-row arranges flex items horizontally (default), while flex-column arranges them vertically.

Which Bootstrap class makes an element a flex container?

A d-flex

B flex-item

C container-flex

D flex-box

The class d-flex activates flexbox layout on an element.

How do you center flex items horizontally in Bootstrap?

A flex-center

B align-items-center

C justify-content-center

D center-items

justify-content-center centers flex items horizontally.

Which class allows flex items to wrap onto multiple lines?

A flex-wrap

B flex-nowrap

C wrap-items

D flex-flow

flex-wrap enables wrapping of flex items.

What does flex-column do in Bootstrap?

A Wraps items

B Arranges items horizontally

C Centers items

D Arranges items vertically

flex-column stacks flex items vertically.

Which class spaces flex items evenly with space between them?

A justify-content-around

B justify-content-between

C justify-content-center

D align-items-between

justify-content-between places equal space between flex items.

Explain how to create a horizontal flex container with centered items using Bootstrap flex utilities.

Think about making the container flex, setting direction, and centering horizontally and vertically.

Describe how to make flex items wrap to the next line and space them evenly in Bootstrap.

Consider enabling wrapping and controlling spacing between items.