Custom breakpoints in Bootsrap - Mini Project: Build & Apply

Custom Breakpoints with Bootstrap

📖 Scenario: You are building a simple responsive webpage using Bootstrap. You want to customize the screen size breakpoints so your layout changes at specific widths that fit your design better.

🎯 Goal: Create a Bootstrap-based webpage that uses custom breakpoints to change the background color of a section at different screen widths.

📋 What You'll Learn

Create a basic HTML5 page with Bootstrap CSS included

Define custom breakpoints in CSS using CSS custom properties

Use these custom breakpoints to change the background color of a <section>

Make sure the page is responsive and changes color at the custom breakpoints

💡 Why This Matters

🌍 Real World

Custom breakpoints help you tailor your website's layout to specific device sizes or design needs beyond Bootstrap's defaults.

💼 Career

Web developers often customize frameworks like Bootstrap to meet unique client requirements and improve user experience on various devices.

1

Create the basic HTML structure with Bootstrap

Create a basic HTML5 page with a <section> element that has the class custom-section. Include the Bootstrap CSS from a CDN inside the <head>. Use the lang attribute set to en and include the charset and viewport meta tags.

Bootsrap

  
  
  Custom Breakpoints
  


  
    
  

Hint

Remember to include the Bootstrap CSS link inside the <head> and add a <section> with class custom-section.

2

Add custom breakpoint variables in CSS

Add a <style> block inside the <head> after the Bootstrap CSS link. Inside it, define CSS custom properties for three breakpoints: --bs-sm as 480px, --bs-md as 768px, and --bs-lg as 1024px. These will be your custom breakpoints.

Bootsrap

  
  
  Custom Breakpoints
  
  
    /* Define custom breakpoint variables here */
  


  
    Responsive Section
    This section changes color at custom breakpoints.
  

Hint

Use CSS custom properties inside a :root selector to define your breakpoints.

3

Use media queries with custom breakpoints

Inside the existing <style> block, add three media queries using the custom properties --bs-sm, --bs-md, and --bs-lg. For each breakpoint, change the background color of .custom-section: use lightblue for screens wider than --bs-sm, lightgreen for wider than --bs-md, and lightcoral for wider than --bs-lg.

Bootsrap

  
  
  Custom Breakpoints
  
  
    :root {
      --bs-sm: 480px;
      --bs-md: 768px;
      --bs-lg: 1024px;
    }

    /* Add media queries here to change background colors */
  


  
    Responsive Section
    This section changes color at custom breakpoints.
  

Hint

Use @media (min-width: var(--bs-sm)) syntax to apply styles at your custom breakpoints.

4

Add padding and text color for better visibility

Inside the same <style> block, add CSS to .custom-section to have padding: 2rem; and color: #333; so the text is easier to read on colored backgrounds.

Bootsrap

  
  
  Custom Breakpoints
  
  
    :root {
      --bs-sm: 480px;
      --bs-md: 768px;
      --bs-lg: 1024px;
    }

    @media (min-width: var(--bs-sm)) {
      .custom-section {
        background-color: lightblue;
      }
    }

    @media (min-width: var(--bs-md)) {
      .custom-section {
        background-color: lightgreen;
      }
    }

    @media (min-width: var(--bs-lg)) {
      .custom-section {
        background-color: lightcoral;
      }
    }

    .custom-section {
      /* Add padding and text color here */
    }
  


  
    Responsive Section
    This section changes color at custom breakpoints.
  

Hint

Add padding and text color inside the .custom-section CSS rule for better readability.

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