Gutters and spacing control in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Bootstrap Gutters

In Bootstrap, what does the g-3 class do when applied to a .row element?

A It adds a 3rem (48px) margin outside the row.

B It removes all gutters between columns.

C It sets horizontal and vertical gutters to 1.5rem (24px) between columns.

D It sets horizontal and vertical gutters to 1rem (16px) between columns.

💡 Hint

Remember, gutter classes like g-* control spacing inside rows between columns.

The g-3 class sets both horizontal and vertical gutters to 1rem (16px) between columns inside a Bootstrap row. This spacing is applied as padding inside each column.

📝 Syntax

intermediate

Correct Use of Spacing Utility Classes

Which option correctly adds a top margin of 3 (1rem) and horizontal padding of 4 (1.5rem) to a Bootstrap element?

A class="mt-3 px-4"

B class="mt-4 px-3"

C class="mb-3 pl-4"

D class="pt-3 mx-4"

💡 Hint

Top margin uses mt-*, horizontal padding uses px-*.

mt-3 adds margin-top of 1rem, and px-4 adds padding-left and padding-right of 1.5rem. This matches the requirement exactly.

❓ layout

advanced

Effect of Removing Gutters in a Grid

Given this Bootstrap grid code, what will be the visual effect of adding g-0 to the .row?

Bootsrap

<div class="row g-0">
  <div class="col-6 bg-primary text-white">Left</div>
  <div class="col-6 bg-secondary text-white">Right</div>
</div>

A The columns will have extra large gutters of 3rem between them.

B The columns will have default gutters of 1.5rem between them.

C The two columns will have no space between them, touching each other directly.

D The columns will stack vertically instead of side by side.

💡 Hint

The g-0 class removes all gutters inside the row.

Adding g-0 removes all horizontal and vertical gutters between columns, so the two columns touch each other with no space.

❓ accessibility

advanced

Spacing and Accessibility Considerations

Why is it important to maintain consistent gutters and spacing in a Bootstrap layout for accessibility?

A Removing gutters improves keyboard navigation by reducing tab stops.

B Consistent spacing helps users with cognitive disabilities understand content grouping and improves readability.

C Spacing only affects visual style and has no impact on accessibility.

D Large gutters confuse screen readers and should be avoided.

💡 Hint

Think about how spacing helps organize content visually and logically.

Consistent gutters and spacing visually group related content, making it easier for users with cognitive disabilities to follow the page structure and improving overall readability.

❓ selector

expert

Targeting Bootstrap Gutters with CSS

You want to override Bootstrap's horizontal gutter spacing only on medium screens and larger. Which CSS selector and property correctly targets the horizontal padding inside columns for .row with g-3?

A @media (min-width: 768px) { .row.g-3 > [class*='col-'] { padding-left: 0.5rem; padding-right: 0.5rem; } }

B @media (min-width: 768px) { .row.g-3 > [class^='col'] { margin-left: 0.5rem; margin-right: 0.5rem; } }

C @media (min-width: 768px) { .row.g-3 > [class*='col-'] { padding-left: 1.5rem; padding-right: 1.5rem; } }

D @media (max-width: 768px) { .row.g-3 > [class*='col-'] { padding-left: 0; padding-right: 0; } }

💡 Hint

Bootstrap columns use padding for gutters, and medium breakpoint starts at 768px.

Bootstrap applies horizontal gutters as left and right padding on columns. The selector .row.g-3 > [class*='col-'] targets columns inside the row with gutters. Using a media query with min-width: 768px applies styles on medium screens and up.