Modifying spacing scale in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Bootstrap Spacing Scale

Bootstrap uses a spacing scale for margin and padding utilities. What is the default unit Bootstrap uses for spacing values like m-3 or p-2?

A Rem units (rem)

B Percentage (%)

C Em units (em)

D Pixels (px)

💡 Hint

Think about how Bootstrap ensures consistent spacing relative to font size.

Bootstrap spacing utilities use rem units by default. This means spacing scales relative to the root font size, making layouts more flexible and accessible.

📝 Syntax

intermediate

Customizing Bootstrap Spacing Scale in SCSS

You want to add a new spacing value 7 equal to 3.5rem in Bootstrap's spacing scale. Which SCSS code snippet correctly modifies the spacing scale?

Bootsrap

$spacers: (0: 0, 1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 1.5rem, 5: 3rem, 7: 3.5rem);

A $spacers: (7: 3.5rem);

B $spacers: map-remove($spacers, 7); $spacers: map-merge($spacers, (7: 3.5rem));

C $spacers: map-merge($spacers, (7: 3.5rem));

D $spacers: map-get($spacers, 7: 3.5rem);

💡 Hint

Use a function that merges new values into existing maps.

To add a new spacing value without overwriting the entire map, use map-merge to merge the new key-value pair into the existing $spacers map.

❓ rendering

advanced

Visual Result of Modified Spacing Scale

After adding 7: 3.5rem to the Bootstrap spacing scale and using class="m-7" on a div, what will be the margin size around the div?

A Margin of 3.5px on all sides

B Margin of 7rem on all sides

C No margin applied because <code>m-7</code> is not a default class

D Margin of 3.5rem on all sides

💡 Hint

The new spacing scale value defines the size for m-7.

By adding 7: 3.5rem to the spacing scale, the class m-7 applies a margin of 3.5rem on all sides of the element.

❓ selector

advanced

CSS Selector for Custom Spacing Utility

If you add a custom spacing value 7 to Bootstrap and want to write a CSS rule to style all elements with the class p-7, which selector is correct?

A .p-7 { padding: 3.5rem !important; }

B #p-7 { padding: 3.5rem !important; }

C p-7 { padding: 3.5rem !important; }

D .p7 { padding: 3.5rem !important; }

💡 Hint

Remember how classes are selected in CSS.

Classes in CSS are selected with a dot . followed by the class name exactly as it appears in HTML. So .p-7 targets elements with class p-7.

❓ accessibility

expert

Accessibility Considerations When Modifying Spacing Scale

When increasing Bootstrap's spacing scale values for padding and margin, what is an important accessibility consideration?

A Use only pixel units to maintain consistent spacing across devices

B Ensure increased spacing does not cause content to overflow or require horizontal scrolling on small screens

C Disable responsive utilities to keep spacing fixed

D Remove all ARIA labels to reduce clutter

💡 Hint

Think about how spacing affects layout on different screen sizes.

Increasing spacing can push content outside the visible area on small screens, causing horizontal scrolling which harms accessibility. Responsive design should be maintained to avoid this.

Practice

1. What does modifying the $spacer variable in Bootstrap SCSS affect?

easy

A. The font size of all text elements

B. The color scheme of Bootstrap components

C. The base unit for spacing scale used in margin and padding classes

D. The border radius of buttons and cards

Solution

1. Step 1: Understand the role of $spacer

   The $spacer variable sets the base size for spacing in Bootstrap, like margins and paddings.

2. Step 2: Identify what changes when $spacer is modified

   Changing $spacer changes the size unit used in spacing utilities, affecting all related classes.

3. Final Answer:

   The base unit for spacing scale used in margin and padding classes -> Option C

4. Quick Check:

   $spacer controls spacing size [OK]

Hint: Remember $spacer controls spacing size, not colors or fonts [OK]

Common Mistakes:

• Confusing spacing with colors or fonts
• Thinking $spacer changes border radius
• Assuming $spacer affects typography

2. Which of the following is the correct way to override the Bootstrap spacing scale base unit using CSS variables?

easy

A. html { --bs-spacing: 2rem; }

B. body { $spacer: 2rem; }

C. :root { $spacer: 2rem; }

D. :root { --bs-spacer: 2rem; }

Solution

1. Step 1: Identify how CSS variables are declared

   CSS variables use the syntax --variable-name inside selectors like :root.

2. Step 2: Match the correct syntax for Bootstrap spacing variable

   Bootstrap uses --bs-spacer as the CSS variable for spacing, so overriding it in :root is correct.

3. Final Answer:

   :root { --bs-spacer: 2rem; } -> Option D

4. Quick Check:

   CSS variables start with -- and use :root for global override [OK]

Hint: CSS variables start with -- and go inside :root [OK]

Common Mistakes:

• Using SCSS variable syntax ($spacer) inside CSS
• Placing CSS variables inside wrong selectors
• Using incorrect variable names like --bs-spacing

3. Given this CSS override:

:root { --bs-spacer: 3rem; }

What will be the margin size of class="m-2" in Bootstrap?

medium

A. 1.5rem

B. 1rem

C. 0.5rem

D. 3rem

Solution

1. Step 1: Understand Bootstrap spacing scale

   Bootstrap spacing scale uses multiples of --bs-spacer divided by 4 for each step. For m-2, margin is 0.5 * $spacer.

2. Step 2: Calculate margin with overridden spacer

   With --bs-spacer: 3rem, m-2 margin = 3rem * 0.5 = 1.5rem.

3. Final Answer:

   1.5rem -> Option A

4. Quick Check:

   m-2 = 0.5 * spacer = 1.5rem [OK]

Hint: m-2 equals half the spacer value [OK]

Common Mistakes:

• Assuming m-2 equals full spacer value
• Confusing m-2 with m-3 or m-1
• Ignoring the overridden --bs-spacer value

4. You tried to change the spacing scale by adding $spacer: 3rem; in your CSS file but it didn't work. What is the likely reason?

medium

A. A and D

B. $spacer is a SCSS variable and cannot be used directly in CSS

C. You must import Bootstrap SCSS before overriding $spacer

D. You need to use --bs-spacer instead of $spacer in CSS

Solution

1. Step 1: Differentiate SCSS and CSS variables

   $spacer is a SCSS variable used during compilation, not valid in CSS files.

2. Step 2: Understand correct override methods

   To override spacing in CSS, use the CSS variable --bs-spacer.

3. Step 3: Combine reasons for failure

   Using $spacer in CSS fails because it's invalid SCSS syntax (A) and the incorrect variable name for CSS (D).

4. Final Answer:

   A and D -> Option A

5. Quick Check:

   SCSS vars invalid in CSS; use --bs-spacer [OK]

Hint: SCSS vars need SCSS files; CSS uses --bs-spacer [OK]

Common Mistakes:

• Using SCSS variables directly in CSS
• Using incorrect variable name in CSS
• Confusing CSS and SCSS variable syntax

5. You want to create a custom spacing scale in Bootstrap with these values: 0, 0.25rem, 0.5rem, 1rem, 2rem, 4rem. Which SCSS code correctly modifies the spacing scale?

hard

A. $spacers: (0, 0.25rem, 0.5rem, 1rem, 2rem, 4rem);

B. $spacers: (0: 0, 1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 2rem, 5: 4rem);

C. $spacer: (0, 0.25rem, 0.5rem, 1rem, 2rem, 4rem);

D. $spacers: [0, 0.25rem, 0.5rem, 1rem, 2rem, 4rem];

Solution

1. Step 1: Understand Bootstrap spacing scale variable

   The spacing scale is stored in $spacers as a map with keys for each step.

2. Step 2: Identify correct SCSS map syntax

   SCSS maps use key: value pairs inside parentheses, like (0: 0, 1: 0.25rem, ...).

3. Step 3: Check options for correct map format

   $spacers: (0: 0, 1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 2rem, 5: 4rem); uses the correct map syntax with keys and values matching the desired scale.

4. Final Answer:

   $spacers: (0: 0, 1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 2rem, 5: 4rem); -> Option B

5. Quick Check:

   Spacing scale is a SCSS map with keys and values [OK]

Hint: Spacing scale uses SCSS map with keys: values [OK]

Common Mistakes:

• Using list syntax instead of map for $spacers
• Overriding $spacer instead of $spacers for scale
• Using square brackets instead of parentheses