Offset columns in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What does the class offset-md-3 do in Bootstrap?

In Bootstrap grid system, what is the effect of applying offset-md-3 to a column?

A It makes the column 3 columns wide on medium screens and larger.

B It adds 3 columns of padding inside the column on medium screens and larger.

C It moves the column 3 columns to the right on medium screens and larger.

D It hides the column on medium screens and larger.

💡 Hint

Think about how offset classes create space before a column.

The offset-md-3 class adds a left margin equal to 3 columns width on medium (≥768px) screens and larger. This shifts the column to the right by 3 columns, creating empty space before it.

📝 Syntax

intermediate

Which Bootstrap class correctly offsets a column by 4 columns on large screens?

You want to move a column 4 columns to the right only on large screens (≥992px). Which class should you use?

A offset-lg-4

B offset-4-lg

C col-lg-offset-4

D offset-large-4

💡 Hint

Bootstrap uses the pattern offset-{breakpoint}-{number}.

The correct syntax for offsetting columns in Bootstrap 4 and 5 is offset-{breakpoint}-{number}. So offset-lg-4 moves the column 4 columns to the right on large screens.

❓ rendering

advanced

What is the visual layout result of this code snippet?

Given this Bootstrap code inside a container:

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

What will you see on a medium screen (≥768px)?

Bootsrap

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

A A column 4 units wide aligned to the right with 4 units of space on the left.

B A column 4 units wide centered horizontally with equal space on left and right.

C A full-width column with text centered inside.

D A column 4 units wide aligned to the left with 4 units of space on the right.

💡 Hint

Offset adds space on the left side of the column.

The col-md-4 offset-md-4 sets the column to 4 columns wide with a left margin of 4 columns on medium screens. In a 12-column grid, this positions the column from column 5 to 8, leaving 4 columns empty on the left and 4 on the right, centering it horizontally.

❓ selector

advanced

Which CSS selector targets only columns with an offset class in Bootstrap?

You want to write custom CSS that styles only Bootstrap columns that have an offset class (like offset-md-3). Which selector correctly targets these columns?

A [class*='offset-']

B .offset

C .col[class^='offset-']

D .col-offset

💡 Hint

Look for a selector that matches any class containing 'offset-'.

The attribute selector [class*='offset-'] matches any element with a class containing the substring 'offset-'. This works for all offset classes like offset-md-3, offset-lg-2, etc.

❓ accessibility

expert

How to ensure keyboard users understand offset columns in Bootstrap layout?

Offset columns create empty space visually. What is the best way to make sure keyboard users and screen readers understand the layout meaningfully?

A No action needed; offset is purely visual and does not affect accessibility.

B Add <code>role="presentation"</code> to offset columns to hide them from assistive tech.

C Use empty <code>&lt;div&gt;</code> elements with <code>tabindex=0</code> to represent the offset space.

D Add <code>aria-label</code> describing the column's position and purpose.

💡 Hint

Think about how to communicate layout meaning to screen readers.

Offset columns create visual spacing but do not convey semantic meaning. Adding aria-label to the column can help screen reader users understand the column's role or position if relevant. Empty divs or hiding elements can confuse users.