Offset columns in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the <code>offset</code> class in Bootstrap do?

It moves a column to the right by adding empty space before it, creating a gap on the left side.

beginner

How do you create a column that starts after 3 columns of empty space in Bootstrap?

Use the class offset-3 on the column to add a left margin equal to 3 columns.

intermediate

Why use offset columns instead of empty columns in Bootstrap?

Offsets add space without adding extra empty columns, keeping the layout cleaner and easier to manage.

intermediate

What is the difference between offset-md-2 and offset-lg-2?

offset-md-2 applies the offset on medium screens and up, while offset-lg-2 applies it on large screens and up.

beginner

Can you combine offset classes with column width classes in Bootstrap?

Yes, for example col-6 offset-3 creates a 6-column wide element shifted right by 3 columns.

What does offset-4 do in Bootstrap?

A Moves the column 4 columns to the right

B Makes the column 4 columns wide

C Adds 4 columns of padding inside the column

D Centers the column horizontally

offset-4 adds empty space equal to 4 columns before the column, shifting it right.

Which class would you use to offset a column by 2 columns only on large screens?

A offset-2

B offset-md-2

C offset-sm-2

D offset-lg-2

offset-lg-2 applies the offset only on large screens and above.

If you want a column to be 6 columns wide and shifted right by 3 columns, which classes do you use?

A col-9 offset-0

B col-3 offset-6

C col-6 offset-3

D col-6 offset-6

Use col-6 offset-3 to make the column 6 wide and move it right by 3 columns.

Why might you prefer using offset classes instead of empty columns for spacing?

A Offsets reduce HTML clutter and improve layout clarity

B Offsets add more columns to the grid

C Offsets change the column color

D Offsets remove columns from the grid

Offsets add space without extra empty columns, keeping the HTML cleaner.

Which Bootstrap grid system feature allows responsive offsetting?

A offset-grid

B offset-{breakpoint}-{number}

C offset-responsive

D offset-{number}

The offset-{breakpoint}-{number} syntax applies offsets responsively at different screen sizes.

Explain how offset columns work in Bootstrap and why they are useful.

Think about how you create space on the left side of a column.

Describe how to use responsive offset classes in Bootstrap and give an example.

Consider how offsets change with screen size.