Gutters and spacing control in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What are gutters in Bootstrap grid layout?

Gutters are the spaces between columns in a Bootstrap grid. They help separate content visually and keep the layout clean.

beginner

How do you remove gutters between columns in Bootstrap 5?

You add the class g-0 to the row to remove all gutters (spacing) between columns.

beginner

What does the Bootstrap class g-3 do?

It adds a medium amount of spacing (gutters) between columns and rows, roughly equal to 1rem (16px).

intermediate

How can you control horizontal and vertical spacing separately in Bootstrap?

Use gx-* classes for horizontal gutters and gy-* classes for vertical gutters, where * is a number from 0 to 5.

intermediate

What Bootstrap utility classes control margin and padding spacing?

Classes like m-* control margin and p-* control padding. You can specify sides (top, bottom, left, right) and sizes from 0 to 5.

Which class removes all gutters between columns in Bootstrap?

A g-0

B no-gutters

C gx-5

D g-5

In Bootstrap 5, g-0 removes all gutters. The no-gutters class was used in Bootstrap 4 but is deprecated.

What does the class gy-2 do?

A Adds vertical spacing between rows

B Adds padding inside columns

C Removes all gutters

D Adds horizontal spacing between columns

gy-2 adds vertical gutters (spacing) between rows only.

How do you add margin only to the top of an element in Bootstrap?

A m-5

B mt-3

C p-3

D mx-2

mt-3 adds margin to the top side only.

If you want medium spacing between columns and rows, which class is best?

A g-5

B g-1

C g-3

D g-0

g-3 adds medium spacing (about 1rem) between columns and rows.

Which class controls padding on the left and right sides only?

A py-*

B my-*

C mx-*

D px-*

px-* controls horizontal padding (left and right).

Explain how to control gutters and spacing in a Bootstrap grid layout.

Think about how spacing affects columns and rows separately.

Describe how Bootstrap utility classes help manage margin and padding for spacing.

Remember margin is outside space, padding is inside space.