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.

Practice

1. What does the offset class in Bootstrap do to a column?

easy

A. It hides the column on smaller screens.

B. It changes the column's background color.

C. It makes the column full width.

D. It moves the column to the right by a specified number of grid spaces.

Solution

1. Step 1: Understand the purpose of offset classes

   Offset classes in Bootstrap add empty space to the left of a column, effectively moving it right.

2. Step 2: Recognize the effect on layout

   This shifting right is done by skipping grid columns, creating space before the column starts.

3. Final Answer:

   It moves the column to the right by a specified number of grid spaces. -> Option D

4. Quick Check:

   Offset = move right [OK]

Hint: Offset means shifting column right by empty spaces [OK]

Common Mistakes:

• Thinking offset changes color
• Assuming offset makes column full width
• Confusing offset with hiding columns

2. Which is the correct Bootstrap 3 class to offset a column by 3 grid spaces on medium screens?

easy

A. col-offset-md-3

B. col-md-offset-3

C. offset-md-3

D. md-col-offset-3

Solution

1. Step 1: Recall Bootstrap 3 offset syntax

   Bootstrap 3 uses col-{breakpoint}-offset-{number} for offsets.

2. Step 2: Match the correct order and spelling

   The correct format is col-md-offset-3 for medium screens offset by 3.

3. Final Answer:

   col-md-offset-3 -> Option B

4. Quick Check:

   col-md-offset-3 syntax [OK]

Hint: Remember: col-{breakpoint}-offset-{number} in Bootstrap 3 [OK]

Common Mistakes:

• Swapping order of words in class
• Using offset before breakpoint
• Missing 'col-' prefix

3. Given this Bootstrap 3 code:

<div class="row">
  <div class="col-md-4 col-md-offset-4">Centered content</div>
</div>

What will be the visual result in a medium screen?

medium

A. The content will be aligned to the right edge of the row.

B. The content will be aligned to the left with no offset.

C. The content will be centered horizontally in the row.

D. The content will be hidden on medium screens.

Solution

1. Step 1: Analyze the column width and offset

   The column is 4 grid spaces wide and offset by 4 grid spaces on medium screens.

2. Step 2: Calculate total grid usage

   Bootstrap grid has 12 columns. Offset 4 + width 4 = 8 columns used, leaving 4 columns empty on the right.

3. Step 3: Understand centering effect

   Offset 4 pushes the column right, centering it horizontally because 4 (offset) + 4 (width) + 4 (remaining) = 12.

4. Final Answer:

   The content will be centered horizontally in the row. -> Option C

5. Quick Check:

   Offset 4 + width 4 centers content [OK]

Hint: Offset + width = 12 centers content in Bootstrap grid [OK]

Common Mistakes:

• Ignoring offset effect on position
• Assuming offset adds width
• Thinking offset hides content

4. Identify the error in this Bootstrap 3 code snippet:

<div class="row">
  <div class="col-md-6 offset-md-3">Content</div>
</div>

medium

A. The offset class is incorrectly named; it should be col-md-offset-3.

B. The column width col-md-6 is invalid.

C. The row class is missing.

D. The offset number cannot be 3.

Solution

1. Step 1: Check Bootstrap 3 offset class naming

   Bootstrap 3 requires offset classes to be named col-{breakpoint}-offset-{number}.

2. Step 2: Compare given class with correct syntax

   The code uses offset-md-3, which is incorrect for Bootstrap 3.

3. Final Answer:

   The offset class is incorrectly named; it should be col-md-offset-3. -> Option A

4. Quick Check:

   Bootstrap 3 offset = col-md-offset-3 [OK]

Hint: Use full offset class: col-{breakpoint}-offset-{number} [OK]

Common Mistakes:

• Using Bootstrap 4+ offset syntax in Bootstrap 3
• Missing 'col-' prefix in offset class
• Assuming offset number limits

5. You want to create a layout with two columns on medium screens: the first column is 3 grid spaces wide and the second column is 4 grid spaces wide, but the second column should start after skipping 2 grid spaces from the first column. Which Bootstrap 3 classes achieve this?

hard

A. <div class="col-md-3">...</div> <div class="col-md-4 col-md-offset-2">...</div>

B. <div class="col-md-3 col-md-offset-2">...</div> <div class="col-md-4">...</div>

C. <div class="col-md-3">...</div> <div class="col-md-4 offset-md-2">...</div>

D. <div class="col-md-5">...</div> <div class="col-md-4 col-md-offset-2">...</div>

Solution

1. Step 1: Assign width to first column

   The first column should be 3 grid spaces wide, so use col-md-3.

2. Step 2: Offset second column by 2 grid spaces

   The second column is 4 wide and should start after 2 empty spaces, so use col-md-4 col-md-offset-2.

3. Step 3: Verify total grid usage

   3 (first) + 2 (offset) + 4 (second) = 9 grid spaces used, valid within 12.

4. Final Answer:

   <div class="col-md-3">...</div> <div class="col-md-4 col-md-offset-2">...</div> -> Option A

5. Quick Check:

   Offset second column by 2 with col-md-offset-2 [OK]

Hint: Offset second column by 2 with col-md-offset-2 [OK]

Common Mistakes:

• Offsetting first column instead of second
• Using wrong offset class syntax
• Adding widths that exceed 12 columns