Nesting rows and columns in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a Bootstrap row.

Bootsrap

<div class="container">
  <div class="[1]">
    Content here
  </div>
</div>

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

Acontainer

Bcol

Crow

Dsection

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'col' instead of 'row' will not create a row container.

Using 'container' inside another container is redundant here.

The row class creates a horizontal group of columns in Bootstrap.

2fill in blank

medium

Complete the code to create a Bootstrap column inside a row.

Bootsrap

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

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

Acol-6

Bcontainer

Crow

Dsection

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'container' inside a row is incorrect.

Using 'row' inside a row creates nested rows, not columns.

The col-6 class creates a column that takes half the width of the row.

3fill in blank

hard

Fix the error in the nested Bootstrap grid by completing the missing class.

Bootsrap

<div class="row">
  <div class="col-8">
    <div class="[1]">
      Nested content
    </div>
  </div>
</div>

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

Acontainer

Brow

Ccol-4

Dsection

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'container' inside a column breaks the grid structure.

Using 'col-4' without a row wrapper causes layout issues.

Nested columns must be inside a row to align properly in Bootstrap.

4fill in blank

hard

Fill both blanks to correctly nest columns inside a row and column.

Bootsrap

<div class="row">
  <div class="col-9">
    <div class="[1]">
      <div class="[2]">
        Nested column content
      </div>
    </div>
  </div>
</div>

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

Arow

Bcontainer

Ccol-6

Dsection

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'container' instead of 'row' for nested grouping.

Not using a column class inside the nested row.

Nested columns must be inside a row, and the nested column uses a col-6 class to define its width.

5fill in blank

hard

Fill all three blanks to create a nested Bootstrap grid with a row, a column, and a nested column.

Bootsrap

<div class="container">
  <div class="[1]">
    <div class="[2]">
      <div class="row">
        <div class="[3]">
          Deep nested content
        </div>
      </div>
    </div>
  </div>
</div>

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

Arow

Bcol-12

Ccol-4

Dcontainer

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'container' instead of 'row' for the first blank.

Not using a column class for the nested columns.

Using 'container' inside columns breaks the grid.

The outer row groups columns, the middle col-12 takes full width, and the inner col-4 defines the nested column width.