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.

Practice

1. What does the Bootstrap class d-flex do in a webpage layout?

easy

A. It changes the text color inside the container.

B. It hides the container from the page.

C. It adds a fixed width to the container.

D. It makes the container a flexbox, arranging children in a row by default.

Solution

1. Step 1: Understand the role of d-flex

   The d-flex class in Bootstrap applies CSS flexbox display to the container, making its children flex items.

2. Step 2: Know the default flex direction

   By default, flexbox arranges items in a horizontal row unless changed by other classes.

3. Final Answer:

   It makes the container a flexbox, arranging children in a row by default. -> Option D

4. Quick Check:

   d-flex = flex container row [OK]

Hint: Remember: d-flex means display flex, row by default [OK]

Common Mistakes:

• Thinking d-flex hides content
• Assuming d-flex sets fixed width
• Confusing d-flex with text color classes

2. Which Bootstrap class correctly sets a flex container to arrange items vertically (in a column)?

easy

A. d-flex justify-content-center

B. d-flex flex-row

C. d-flex flex-column

D. d-flex align-items-end

Solution

1. Step 1: Identify the class for vertical flex direction

   The class flex-column changes the flex direction from row (default) to column.

2. Step 2: Confirm the container is flex

   The d-flex class makes the container a flexbox, so combined with flex-column, items stack vertically.

3. Final Answer:

   d-flex flex-column -> Option C

4. Quick Check:

   Vertical flex = flex-column [OK]

Hint: Use flex-column to stack items vertically [OK]

Common Mistakes:

• Using flex-row for vertical layout
• Confusing justify-content with direction
• Missing d-flex class for flex container

3. Given this HTML snippet:

<div class="d-flex justify-content-center align-items-center" style="height: 100px;">
  <div>Box</div>
</div>

How will the inner <div> appear inside the outer container?

medium

A. The box will be centered horizontally and vertically inside the 100px tall container.

B. The box will be aligned to the top-left corner.

C. The box will be stretched to fill the container width.

D. The box will be hidden because of missing flex direction.

Solution

1. Step 1: Analyze the flex container classes

   The container uses d-flex (flexbox), justify-content-center (horizontal center), and align-items-center (vertical center).

2. Step 2: Understand the effect on the inner box

   These classes center the inner <div> horizontally and vertically inside the 100px height container.

3. Final Answer:

   The box will be centered horizontally and vertically inside the 100px tall container. -> Option A

4. Quick Check:

   justify-content-center + align-items-center = center both ways [OK]

Hint: Center with justify-content-center and align-items-center [OK]

Common Mistakes:

• Assuming missing flex direction hides content
• Thinking box stretches width without flex-grow
• Confusing justify-content with vertical alignment

4. Identify the error in this Bootstrap flex usage:

<div class="d-flex flex-column justify-content-center">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

What is wrong if the items are not horizontally centered as expected?

medium

A. Using flex-column disables centering.

B. Missing align-items-center to center items horizontally in column layout.

C. The d-flex class is misspelled.

D. Items cannot be centered in flexbox.

Solution

1. Step 1: Understand flex-column and justify-content-center

   In a column flex container, justify-content-center centers items vertically along the main axis.

2. Step 2: Check horizontal centering

   To center items horizontally (cross axis), align-items-center is needed but missing here.

3. Final Answer:

   Missing align-items-center to center items horizontally in column layout. -> Option B

4. Quick Check:

   Column layout needs align-items-center for horizontal centering [OK]

Hint: Use align-items-center for cross-axis centering in flex-column [OK]

Common Mistakes:

• Assuming justify-content-center centers horizontally in column
• Thinking flex-column disables centering
• Ignoring need for align-items in cross axis

5. You want a responsive navbar with items spaced evenly across the width on large screens, but stacked vertically on small screens. Which Bootstrap flex utility classes should you use on the container?

hard

A. d-flex flex-column flex-lg-row justify-content-between

B. d-flex flex-row flex-lg-column justify-content-center

C. d-flex flex-column justify-content-center flex-lg-row

D. d-flex flex-row justify-content-between flex-lg-column

Solution

1. Step 1: Understand responsive flex directions

   Use flex-column for small screens (default) to stack vertically, and flex-lg-row for large screens to arrange horizontally.

2. Step 2: Space items evenly on large screens

   justify-content-between spaces items evenly across the container width on the main axis (horizontal in row).

3. Final Answer:

   d-flex flex-column flex-lg-row justify-content-between -> Option A

4. Quick Check:

   Responsive flex: column small, row large + spaced between [OK]

Hint: Combine flex-column and flex-lg-row for responsive layout [OK]

Common Mistakes:

• Mixing up flex directions for screen sizes
• Forgetting justify-content-between for spacing
• Using justify-content-center instead of between