Why a grid system matters in Bootsrap - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a Bootstrap container that centers content.

Bootsrap

<div class="[1]">
  <p>Hello, world!</p>
</div>

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

Acontainer-fluid

Brow

Ccol

Dcontainer

Attempts:

3 left

💡 Hint

Common Mistakes

Using row or col instead of container.

The container class creates a responsive fixed-width container that centers content horizontally.

2fill in blank

medium

Complete the code to create a Bootstrap row that holds columns.

Bootsrap

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

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

Acontainer-fluid

Bcol

Crow

Dgrid

Attempts:

3 left

💡 Hint

Common Mistakes

Using col instead of row for grouping columns.

The row class groups columns horizontally in Bootstrap's grid system.

3fill in blank

hard

Fix the error in the code to make columns responsive in Bootstrap.

Bootsrap

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

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

Acol-6

Brow

Ccontainer

Dcol-12

Attempts:

3 left

💡 Hint

Common Mistakes

Using row or container as a column class.

The class col-6 makes the column take half the row width, making it responsive.

4fill in blank

hard

Fill both blanks to create a responsive two-column layout with Bootstrap.

Bootsrap

<div class="container">
  <div class="[1]">
    <div class="[2]">Left</div>
    <div class="col-6">Right</div>
  </div>
</div>

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

Arow

Bcontainer

Ccol-6

Dcol

Attempts:

3 left

💡 Hint

Common Mistakes

Using container instead of row for grouping columns.

The row class groups columns, and col-6 sets half width for the left column.

5fill in blank

hard

Fill all three blanks to create a responsive grid with three equal columns in Bootstrap.

Bootsrap

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

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

Acontainer

Brow

Ccol-4

Dcontainer-fluid

Attempts:

3 left

💡 Hint

Common Mistakes

Using container instead of container-fluid for full width.

container-fluid creates a full-width container, row groups columns, and col-4 sets one-third width for the first column.