Equal-width columns in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a Bootstrap row with equal-width columns.

Bootsrap

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

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

Acol

Brow

Ccontainer

Dcol-4

Attempts:

3 left

💡 Hint

Common Mistakes

Using row instead of col for columns.

Using container class for columns.

Using fixed width classes like col-4 when equal width is needed.

The class col creates an equal-width column inside a Bootstrap row.

2fill in blank

medium

Complete the code to add a second equal-width column in the Bootstrap row.

Bootsrap

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

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

Acol

Brow

Ccol-6

Dcontainer

Attempts:

3 left

💡 Hint

Common Mistakes

Using container or row classes for columns.

Using fixed width classes like col-6 which sets fixed width.

Using col for the second column ensures it shares equal width with the first column.

3fill in blank

hard

Fix the error in the code to make all columns equal width.

Bootsrap

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

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

Acol-4

Bcontainer

Ccol

Drow

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing fixed width classes with col causes uneven columns.

Using container or row classes for columns.

Using col for all columns makes them equal width. Fixed widths like col-4 break equal width.

4fill in blank

hard

Fill both blanks to create three equal-width columns inside a container.

Bootsrap

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

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

Acontainer

Bcol

Crow

Dcontainer-fluid

Attempts:

3 left

💡 Hint

Common Mistakes

Using col for the outer div instead of container or container-fluid.

Using container for the inner div instead of row.

The outer container centers content. The inner row holds equal-width col columns.

5fill in blank

hard

Fill all three blanks to create a responsive equal-width column layout with a container, row, and columns.

Bootsrap

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

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

Asection

Bcontainer

Ccol

Drow

Attempts:

3 left

💡 Hint

Common Mistakes

Using div instead of semantic tags like section.

Mixing up row and container classes.

Not using col for columns.

Use a semantic section as container, add Bootstrap's container class, and inside a row use col for equal-width columns. Here, the example uses section with container class and a single col column.