Flex utilities in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the container a flexbox using Bootstrap classes.

Bootsrap

<div class="container [1]">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

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

Ad-flex

Bflex-container

Cflexbox

Ddisplay-flex

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-existent classes like 'flexbox' or 'display-flex'.

Confusing CSS property names with Bootstrap class names.

Bootstrap uses the d-flex class to apply display: flex; to an element.

2fill in blank

medium

Complete the code to align flex items horizontally centered using Bootstrap classes.

Bootsrap

<div class="d-flex [1]">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

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

Ajustify-content-center

Balign-items-center

Cjustify-content-start

Dalign-content-center

Attempts:

3 left

💡 Hint

Common Mistakes

Using align-items-center which centers vertically, not horizontally.

Using justify-content-start which aligns items to the start.

The class justify-content-center centers flex items horizontally in Bootstrap.

3fill in blank

hard

Fix the error in the code to make flex items stack vertically using Bootstrap classes.

Bootsrap

<div class="d-flex [1]">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

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

Aflex-nowrap

Bflex-row

Cflex-wrap

Dflex-column

Attempts:

3 left

💡 Hint

Common Mistakes

Using flex-row which keeps items in a row (horizontal).

Confusing wrapping classes with direction classes.

The class flex-column makes flex items stack vertically in Bootstrap.

4fill in blank

hard

Fill both blanks to create a flex container that wraps items and aligns them vertically centered.

Bootsrap

<div class="d-flex [1] [2]">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

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

Aflex-wrap

Bflex-nowrap

Calign-items-center

Djustify-content-center

Attempts:

3 left

💡 Hint

Common Mistakes

Using flex-nowrap which prevents wrapping.

Using justify-content-center which aligns horizontally, not vertically.

flex-wrap allows items to wrap to the next line, and align-items-center vertically centers them.

5fill in blank

hard

Fill all three blanks to create a flex container with vertical stacking, vertical centering, and wrapping enabled.

Bootsrap

<div class="d-flex [1] [2] [3]">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>

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

Aflex-row

Bflex-column

Cjustify-content-center

Dflex-wrap

Attempts:

3 left

💡 Hint

Common Mistakes

Using flex-row which stacks items horizontally.

Forgetting to add flex-wrap to allow wrapping.

flex-column stacks items vertically, justify-content-center centers them vertically, and flex-wrap allows wrapping.