Offset columns in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to offset a column by 3 in Bootstrap.

Bootsrap

<div class="row">
  <div class="col-md-6 [1]">
    Content here
  </div>
</div>

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

Aoffset3-md

Bcol-offset-3

Coffset-md-3

Doffset-3-md

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'col-offset-3' which is not a valid Bootstrap class.

Placing the number before the breakpoint like 'offset-3-md'.

Missing the dash between 'offset' and the breakpoint.

In Bootstrap, to offset a column by 3 on medium devices, use the class 'offset-md-3'.

2fill in blank

medium

Complete the code to offset a column by 2 on small devices.

Bootsrap

<div class="row">
  <div class="col-sm-4 [1]">
    Small device offset
  </div>
</div>

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

Aoffset-xs-2

Boffset-md-2

Coffset-lg-2

Doffset-sm-2

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'offset-md-2' which applies to medium devices, not small.

Using 'offset-xs-2' which is not a valid Bootstrap 5 breakpoint.

Confusing the breakpoint order.

To offset a column by 2 on small devices, use 'offset-sm-2'.

3fill in blank

hard

Fix the error in the offset class for a large device column.

Bootsrap

<div class="row">
  <div class="col-lg-5 [1]">
    Large device offset
  </div>
</div>

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

Aoffset-lg5

Boffset-lg-5

Coffset-lg_5

Doffset-lg--5

Attempts:

3 left

💡 Hint

Common Mistakes

Removing the dash between breakpoint and number.

Using underscores instead of dashes.

Adding extra dashes.

The correct offset class uses a single dash between 'lg' and the number: 'offset-lg-5'.

4fill in blank

hard

Fill both blanks to offset a column by 4 on extra small devices and set its width to 6.

Bootsrap

<div class="row">
  <div class="col-[1] [2]">
    Extra small device offset
  </div>
</div>

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

A6

Boffset-4

Coffset-6

D4

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up offset and width numbers.

Using breakpoint abbreviations for extra small devices which are not needed.

Using 'offset-6' instead of 'offset-4'.

For extra small devices, use 'col-6' for width and 'offset-4' to offset by 4 columns.

5fill in blank

hard

Fill all three blanks to create a column that is 3 wide, offset by 2 on medium devices, and offset by 1 on large devices.

Bootsrap

<div class="row">
  <div class="col-md-[1] [2] [3]">
    Responsive offsets
  </div>
</div>

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

A3

Boffset-md-2

Coffset-lg-1

Dcol-md-2

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'col-md-2' instead of 'col-md-3' for width.

Mixing up medium and large offset classes.

Forgetting to include all offset classes.

Use 'col-md-3' for width, 'offset-md-2' to offset by 2 on medium, and 'offset-lg-1' to offset by 1 on large devices.