Gutters and spacing control in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add horizontal gutters between columns using Bootstrap classes.

Bootsrap

<div class="row [1]">
  <div class="col">Column 1</div>
  <div class="col">Column 2</div>
</div>

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

Agy-3

Bg-0

Cgx-3

Dp-3

Attempts:

3 left

💡 Hint

Common Mistakes

Using gy-3 which adds vertical gutters instead of horizontal.

Using p-3 which adds padding inside elements, not gutters.

The class gx-3 adds horizontal gutters (spacing) between columns in a Bootstrap row.

2fill in blank

medium

Complete the code to remove all gutters between columns in a Bootstrap row.

Bootsrap

<div class="row [1]">
  <div class="col">First</div>
  <div class="col">Second</div>
</div>

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

Ag-0

Bgx-0

Cg-3

Dgy-0

Attempts:

3 left

💡 Hint

Common Mistakes

Using gx-0 or gy-0 which only remove horizontal or vertical gutters, not both.

The class g-0 removes all gutters (both horizontal and vertical) between columns.

3fill in blank

hard

Fix the error in the code to add vertical gutters of size 4 between columns.

Bootsrap

<div class="row [1]">
  <div class="col">A</div>
  <div class="col">B</div>
</div>

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

Agy-4

Bgx-4

Cp-4

Dg-4

Attempts:

3 left

💡 Hint

Common Mistakes

Using gx-4 which adds horizontal gutters instead of vertical.

Using p-4 which adds padding inside columns, not gutters.

The class gy-4 adds vertical gutters of size 4 between columns in Bootstrap.

4fill in blank

hard

Fill both blanks to create a row with horizontal gutters size 2 and vertical gutters size 5.

Bootsrap

<div class="row [1] [2]">
  <div class="col">One</div>
  <div class="col">Two</div>
</div>

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

Agx-2

Bgy-5

Cg-3

Dp-2

Attempts:

3 left

💡 Hint

Common Mistakes

Using g-3 which sets all gutters to size 3, not the requested sizes.

Using p-2 which adds padding, not gutters.

Use gx-2 for horizontal gutters size 2 and gy-5 for vertical gutters size 5.

5fill in blank

hard

Fill all three blanks to create a row with no gutters, and add margin bottom 4 to columns.

Bootsrap

<div class="row [1]">
  <div class="col [2]">Col 1</div>
  <div class="col [3]">Col 2</div>
</div>

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

Ag-0

Bmb-4

Dgx-3

Attempts:

3 left

💡 Hint

Common Mistakes

Using gx-3 which adds horizontal gutters instead of removing gutters.

Forgetting to add margin bottom to columns for vertical spacing.

g-0 removes all gutters from the row. Adding mb-4 to columns adds margin bottom for spacing below each column.