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.

Practice

1. What is the correct way to nest a row inside a Bootstrap grid layout?

easy

A. Place a .row inside a .col element

B. Place a .col inside a .container directly

C. Place a .container inside a .row

D. Place a .row directly inside another .row

Solution

1. Step 1: Understand Bootstrap grid nesting rules

   Bootstrap requires that a .row must be inside a .container or .col for proper alignment.

2. Step 2: Identify correct nesting for rows and columns

   When nesting, a .row should be placed inside a .col to maintain the grid structure and spacing.

3. Final Answer:

   Place a .row inside a .col element -> Option A

4. Quick Check:

   Nesting rows inside columns = Place a .row inside a .col element [OK]

Hint: Always nest .row inside .col for layout [OK]

Common Mistakes:

• Putting .row directly inside another .row
• Placing .col directly inside .container without a row
• Nesting .container inside .row

2. Which of the following is the correct syntax to nest a row inside a column in Bootstrap?

easy

A. <div class='col'><div class='row'><div class='col'></div></div></div>

B. <div class='row'><div class='col'><div class='row'></div></div></div>

C. <div class='row'><div class='row'><div class='col'></div></div></div>

D. <div class='col'><div class='col'><div class='row'></div></div></div>

Solution

1. Step 1: Check the outer container

   The outermost element should be a .col to allow nesting inside it.

2. Step 2: Verify the nested structure

   Inside the .col, a .row is correctly nested, and inside that row, columns can be placed.

3. Final Answer:

   <div class='col'><div class='row'><div class='col'></div></div></div> -> Option A

4. Quick Check:

   Row inside col, then col inside row =

   <div class='col'><div class='row'><div class='col'></div></div></div>

   [OK]

Hint: Nest .row inside .col, then add .col inside row [OK]

Common Mistakes:

• Starting with .row instead of .col for nesting
• Nesting .row directly inside another .row
• Using .col inside .col without a row

3. Given the following Bootstrap code, what will be the visual layout in the browser?

<div class='container'>
  <div class='row'>
    <div class='col-6'>Left</div>
    <div class='col-6'>
      <div class='row'>
        <div class='col-6'>Top Right</div>
        <div class='col-6'>Bottom Right</div>
      </div>
    </div>
  </div>
</div>

medium

A. Left column takes half width; right column splits into two equal columns stacked vertically

B. Left column takes full width; right column is below left column

C. Left column takes half width; right column splits into two equal columns side by side horizontally

D. Left and right columns both take full width stacked vertically

Solution

1. Step 1: Analyze the outer row columns

   The outer row has two columns each with col-6, so they split the container horizontally 50% each.

2. Step 2: Analyze the nested row inside the right column

   The right column contains a nested row with two col-6 columns, which split that right half horizontally into two equal parts side by side.

3. Final Answer:

   Left column takes half width; right column splits into two equal columns side by side horizontally -> Option C

4. Quick Check:

   Nested row splits right col horizontally = Left column takes half width; right column splits into two equal columns side by side horizontally [OK]

Hint: Nested rows split inside parent column horizontally by default [OK]

Common Mistakes:

• Thinking nested columns stack vertically by default
• Assuming nested row splits full container width
• Confusing col-6 with full width

4. Identify the error in this Bootstrap nested grid code:

<div class='container'>
  <div class='row'>
    <div class='row'>
      <div class='col'>Nested Column</div>
    </div>
  </div>
</div>

medium

A. Missing .container around the nested .row

B. A .row is nested directly inside another .row without a .col

C. The nested .col should be .col-12

D. The outer .row should be .col

Solution

1. Step 1: Check nesting rules for rows and columns

   Bootstrap requires that a .row must be inside a .col when nested.

2. Step 2: Identify the incorrect nesting

   The code nests a .row directly inside another .row without wrapping it in a .col, which breaks the grid structure.

3. Final Answer:

   A .row is nested directly inside another .row without a .col -> Option B

4. Quick Check:

   Row inside row without col = A .row is nested directly inside another .row without a .col [OK]

Hint: Never put .row directly inside another .row [OK]

Common Mistakes:

• Nesting rows without columns
• Assuming .col is optional inside rows
• Confusing container placement

5. You want to create a layout where the left half of the page has two stacked sections, and the right half has a single section. Which Bootstrap structure correctly nests rows and columns to achieve this?

hard

A. <div class='row'>
<div class='col-6'>
<div class='row'>
<div class='col-6'>Top Left</div>
<div class='col-6'>Bottom Left</div>
</div>
</div>
<div class='col-6'>Right Side</div>
</div>

B. <div class='row'>
<div class='col-6'>Left Side</div>
<div class='col-6'>
<div class='col-12'>Right Top</div>
<div class='col-12'>Right Bottom</div>
</div>
</div>

C. <div class='container'>
<div class='row'>
<div class='col-6'>
<div class='col-12'>Top Left</div>
<div class='col-12'>Bottom Left</div>
</div>
<div class='col-6'>Right Side</div>
</div>
</div>

D. <div class='row'>
<div class='col-6'>
<div class='row'>
<div class='col-12'>Top Left</div>
<div class='col-12'>Bottom Left</div>
</div>
</div>
<div class='col-6'>Right Side</div>
</div>

Solution

1. Step 1: Understand the layout goal

   The left half should have two stacked sections, so inside the left col-6, we need a nested row with two full-width columns stacked vertically.

2. Step 2: Check the nesting structure

   <div class='row'>
     <div class='col-6'>
       <div class='row'>
         <div class='col-12'>Top Left</div>
         <div class='col-12'>Bottom Left</div>
       </div>
     </div>
     <div class='col-6'>Right Side</div>
   </div>

   nests a .row inside the left .col-6 and uses two .col-12 columns stacked vertically, which is correct. The right .col-6 is a single section.

3. Final Answer:

   <div class='row'><div class='col-6'><div class='row'><div class='col-12'>Top Left</div><div class='col-12'>Bottom Left</div></div></div><div class='col-6'>Right Side</div></div> -> Option D

4. Quick Check:

   Nested row with stacked full-width cols inside left half =

   <div class='row'>
     <div class='col-6'>
       <div class='row'>
         <div class='col-12'>Top Left</div>
         <div class='col-12'>Bottom Left</div>
       </div>
     </div>
     <div class='col-6'>Right Side</div>
   </div>

   [OK]

Hint: Stack sections with nested row and full-width cols inside a col [OK]

Common Mistakes:

• Placing columns directly inside columns without a row
• Using wrong column widths for stacking
• Missing nested row inside the left column