Row and column structure in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a Bootstrap row container.

Bootsrap

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

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

Acontainer-fluid

Bcol

Csection

Drow

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'col' instead of 'row' for the container of columns.

Using 'container-fluid' inside a container.

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

2fill in blank

medium

Complete the code to create a column that takes half the width on medium screens.

Bootsrap

<div class="row">
  <div class="[1]">
    Half width column
  </div>
</div>

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

Acol-sm-4

Bcol-12

Ccol-md-6

Dcol-lg-3

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'col-12' which is full width.

Using 'col-sm-4' which is one-third width on small screens.

The class col-md-6 makes the column take 6 out of 12 parts (half) on medium screens.

3fill in blank

hard

Fix the error in the code to properly nest columns inside a row.

Bootsrap

<div class="container">
  <div class="[1]">
    <div class="col-4">
      Content
    </div>
  </div>
</div>

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

Arow

Bcol

Csection

Dcontainer

Attempts:

3 left

💡 Hint

Common Mistakes

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

Placing columns outside of rows.

Columns must be direct children of a row in Bootstrap.

4fill in blank

hard

Fill both blanks to create two columns: one taking 8 parts and the other 4 parts on large screens.

Bootsrap

<div class="row">
  <div class="[1]">
    Main content
  </div>
  <div class="[2]">
    Sidebar
  </div>
</div>

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

Acol-lg-8

Bcol-md-6

Ccol-lg-4

Dcol-sm-12

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'col-md-6' which is for medium screens.

Using column sizes that do not add up to 12.

Use col-lg-8 and col-lg-4 to split the row into 8 and 4 parts on large screens.

5fill in blank

hard

Fill all three blanks to create a responsive layout with a row containing three columns: full width on small screens, and 4 parts each on medium screens.

Bootsrap

<div class="container">
  <div class="[1]">
    <div class="[2]">
      Column 1
    </div>
    <div class="[3]">
      Column 2
    </div>
    <div class="col-sm-12 col-md-4">
      Column 3
    </div>
  </div>
</div>

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

Arow

Bcol-sm-12 col-md-4

Dcontainer-fluid

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'container-fluid' instead of 'row' for grouping columns.

Not using responsive classes for columns.

The row groups columns. Each column uses col-sm-12 col-md-4 to be full width on small screens and 4 parts on medium screens.