Chatper 3 – Offsetting Columns

This is what Bootstrap calls “offsetting columns,” where for a given column, you are creating “empty” space before it on the left. Rather than achieving a layout where content is pushed aside with empty <div> tags, you add specific classes to tell a column exactly how many “slots” to skip.

Think of it as a row of movie-theater seats, with 12 seats. Between you and some good middle seats, put your bags on the first 3 seats and tell the usher, “I want the fourth seat.”

The Nuts and Bolts: The 12-Column Rule

In Bootstrap, each row is divided up into 12 identical columns. To center a column, you apply the class as: .offset-(breakpoint)-(number).

Breakpoint: sm, md, lg, xl or xxl (optional).
Number: 1 to 11 (how many columns of room there are to skip).

The Simple Offset
If you have 4 columns wide column and want it to be centered (4 skip + 4 content + 4 left = 12)

HTML <div class=”row”> <div class=”col-md-4 offset-md-4″> I am centred, as I span 4 columns! </div> </div>

Responsive Offsets (The “Magic” Part)
The real beauty of Bootstrap is shifting the offset with screen size. For example, you may wish for offsetting columns to be full-width on phone but center aligned on laptop.

On Mobile: No offset (fills entire screen).
On Desktop: 3 units offset.

HTML <div class=”col-12 col-lg-6 offset-lg-3″> This doesn’t work on desktop Mobile full width, desktop 50% (centered). </div>

Important Rules to Remember

Only Moving to the Right: Columns are always nudged to the right. Likewise, you can’t “offset-left” to shift something left, you would simply decrease the offset or use flexbox utilities.

Resets: If you set a medium3 offset (offset-md-3) it will remain offsetted also on large screens. To “unset” an offset on larger screens you need to set it to zero again: Make Offsets Responsive 4.7 You cannot apply a less specific class size attribute only on NULL or unset CSS Grid documentationclasesshould.= contrib/VERSION doGet();

Row Overflow: If your column width + the number used in offset > 12, it will begin a new row.

Example: col-6 + offset-7 = 13. This will break your layout.