Custom breakpoints in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Bootstrap Custom Breakpoints

Bootstrap allows you to customize breakpoints for responsive design. Which of the following statements about custom breakpoints in Bootstrap is correct?

A Custom breakpoints can only be added by editing the compiled CSS files directly.

B You can override default breakpoints by modifying the Sass variables before compiling Bootstrap.

C Bootstrap does not support custom breakpoints; you must use the default ones only.

D Custom breakpoints are set using JavaScript after the page loads.

💡 Hint

Think about how Bootstrap uses Sass variables to define breakpoints.

Bootstrap's breakpoints are defined as Sass variables. By changing these variables before compiling Bootstrap's Sass files, you can create custom breakpoints that fit your design needs.

📝 Syntax

intermediate

Correct Sass Syntax for Custom Breakpoints

Which of the following Sass code snippets correctly defines a custom breakpoint named tablet at 640px in Bootstrap's grid breakpoints?

A $grid-breakpoints: (xs: 0, tablet: 640px, md: 768px);

B $grid-breakpoints: xs: 0, tablet: 640px, md: 768px;

C $grid-breakpoints: [xs: 0, tablet: 640px, md: 768px];

D $grid-breakpoints: {xs: 0, tablet: 640px, md: 768px};

💡 Hint

Bootstrap uses Sass maps with parentheses for breakpoints.

Bootstrap's breakpoints are defined as Sass maps using parentheses. Option A correctly uses parentheses and key-value pairs.

❓ rendering

advanced

Visual Result of Custom Breakpoint Usage

Given a custom breakpoint tablet at 640px, what will be the width of a Bootstrap column with class col-tablet-6 when the viewport width is 700px?

A The column will take 50% width of the container.

B The column will take 100% width of the container.

C The column will not be affected and use the default breakpoint widths.

D The column will take 25% width of the container.

💡 Hint

Remember that col-tablet-6 means 6 out of 12 columns at the tablet breakpoint and above.

At viewport widths equal or above 640px (tablet breakpoint), col-tablet-6 means the column uses 6 of 12 grid columns, which is 50% width.

❓ selector

advanced

CSS Selector for Custom Breakpoint Media Query

If you define a custom breakpoint tablet at 640px in Bootstrap, which CSS media query correctly targets this breakpoint for minimum width?

A @media (min-device-width: 640px) { /* styles here */ }

B @media (max-width: 640px) { /* styles here */ }

C @media (min-width: 640px) { /* styles here */ }

D @media (min-width: 641px) { /* styles here */ }

💡 Hint

Bootstrap breakpoints use min-width media queries starting exactly at the breakpoint value.

Bootstrap uses min-width media queries starting at the breakpoint value. So for 640px, the media query is @media (min-width: 640px).

❓ accessibility

expert

Accessibility Considerations with Custom Breakpoints

When creating custom breakpoints in Bootstrap, which practice best ensures accessibility for users with different devices and needs?

A Only focus on desktop and mobile breakpoints since most users use these devices.

B Disable responsive features at custom breakpoints to simplify the layout.

C Use fixed pixel widths for all elements to maintain consistent layout regardless of screen size.

D Test your design at all breakpoint widths including assistive technology simulations to ensure content is readable and navigable.

💡 Hint

Accessibility means making sure everyone can use your site well, no matter their device or ability.

Testing at all breakpoints and with assistive technologies ensures your site is accessible and usable for all users, including those with disabilities or unusual devices.

Practice

1. What is the main purpose of custom breakpoints in Bootstrap?

easy

A. To disable responsive design completely

B. To change the colors of Bootstrap components

C. To add new fonts to the Bootstrap theme

D. To define new screen widths where the layout changes

Solution

1. Step 1: Understand what breakpoints do

   Breakpoints tell Bootstrap when to change layout based on screen size.

2. Step 2: Identify the role of custom breakpoints

   Custom breakpoints let you add or change these screen widths to better fit your design.

3. Final Answer:

   To define new screen widths where the layout changes -> Option D

4. Quick Check:

   Custom breakpoints = new layout widths [OK]

Hint: Breakpoints control layout changes by screen size [OK]

Common Mistakes:

• Thinking breakpoints change colors or fonts
• Confusing breakpoints with disabling responsiveness
• Assuming breakpoints only affect mobile views

2. Which SCSS variable would you modify to add a new custom breakpoint in Bootstrap?

easy

A. $grid-breakpoints

B. $colors

C. $font-family-base

D. $container-max-widths

Solution

1. Step 1: Identify SCSS variables related to breakpoints

   Bootstrap uses $grid-breakpoints to define screen widths for breakpoints.

2. Step 2: Confirm which variable controls breakpoints

   Modifying $grid-breakpoints lets you add or change custom breakpoints.

3. Final Answer:

   $grid-breakpoints -> Option A

4. Quick Check:

   Breakpoint variable = $grid-breakpoints [OK]

Hint: Breakpoints are set in $grid-breakpoints SCSS variable [OK]

Common Mistakes:

• Changing $colors instead of breakpoints
• Modifying font or container width variables
• Trying to add breakpoints in CSS instead of SCSS

3. Given this SCSS snippet, what is the minimum screen width for the custom breakpoint xxl?

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

medium

A. 1200px

B. 1400px

C. 992px

D. 768px

Solution

1. Step 1: Locate the xxl key in the map

   The map shows xxl: 1400px, meaning the breakpoint starts at 1400 pixels.

2. Step 2: Understand breakpoint meaning

   Bootstrap applies styles for xxl at screen widths 1400px and above.

3. Final Answer:

   1400px -> Option B

4. Quick Check:

   xxl breakpoint = 1400px [OK]

Hint: Check the value next to the breakpoint name [OK]

Common Mistakes:

• Confusing breakpoint names with values
• Picking the previous breakpoint's width
• Ignoring the unit (px) in values

4. You added a custom breakpoint xxl at 1400px but your styles for it are not applying. What is the most likely mistake?

medium

A. You forgot to import Bootstrap SCSS after setting the breakpoint

B. You defined xxl inside $colors variable

C. You used @media (min-width: 1400) without units

D. You wrote CSS inside body instead of html

Solution

1. Step 1: Check common syntax errors in media queries

   Media queries require units like px for widths, missing units cause failure.

2. Step 2: Identify the error in the options

   You used @media (min-width: 1400) without units shows @media (min-width: 1400) missing px, so styles won't apply.

3. Final Answer:

   You used @media (min-width: 1400) without units -> Option C

4. Quick Check:

   Media query units required [OK]

Hint: Always include units like px in media queries [OK]

Common Mistakes:

• Forgetting units in media queries
• Not importing Bootstrap SCSS after changes
• Defining breakpoints in wrong variables
• Confusing CSS selectors with media queries

5. You want to add a custom breakpoint at 1600px named xxxl. Which SCSS code correctly adds it and sets container max width for it?

hard

A. $grid-breakpoints: map-merge($grid-breakpoints, (xxxl: 1600px));
$container-max-widths: map-merge($container-max-widths, (xxxl: 1540px));

B. $grid-breakpoints: (xxxl: 1600px);
$container-max-widths: (xxxl: 1540px);

C. $grid-breakpoints: map-merge($colors, (xxxl: 1600px));
$container-max-widths: map-merge($container-max-widths, (xxxl: 1540px));

D. $grid-breakpoints: map-merge($grid-breakpoints, (xxxl: 1600));
$container-max-widths: map-merge($container-max-widths, (xxxl: 1540));

Solution

1. Step 1: Add new breakpoint using map-merge

   Use map-merge to add xxxl: 1600px to existing $grid-breakpoints.

2. Step 2: Set container max width for new breakpoint

   Similarly, add xxxl: 1540px to $container-max-widths using map-merge.

3. Step 3: Check for correct syntax and units

   $grid-breakpoints: map-merge($grid-breakpoints, (xxxl: 1600px)); $container-max-widths: map-merge($container-max-widths, (xxxl: 1540px)); uses correct variables, map-merge, and includes units px.

4. Final Answer:

   Correctly merges new breakpoint and container width with units -> Option A

5. Quick Check:

   Use map-merge with units for custom breakpoints [OK]

Hint: Use map-merge with px units to add breakpoints [OK]

Common Mistakes:

• Overwriting variables instead of merging
• Missing px units in values
• Merging into wrong variables like $colors
• Using incomplete or invalid SCSS syntax