Breakpoint tiers (xs, sm, md, lg, xl, xxl) in Bootsrap - Mini Project: Build & Apply

Responsive Layout with Bootstrap Breakpoint Tiers

📖 Scenario: You are building a simple webpage that changes its layout depending on the screen size. This helps the page look good on phones, tablets, laptops, and big desktop screens.

🎯 Goal: Create a responsive webpage using Bootstrap's breakpoint tiers: xs, sm, md, lg, xl, and xxl. You will build a grid with columns that change width at each breakpoint.

📋 What You'll Learn

Use Bootstrap 5 classes for grid layout

Create a container with a row and columns

Set column widths for each breakpoint tier exactly as specified

Include the Bootstrap CSS link in the

Use semantic HTML5 elements

Make sure the page is responsive and changes layout on different screen sizes

💡 Why This Matters

🌍 Real World

Responsive design is essential for websites to look good on phones, tablets, laptops, and desktops. Using Bootstrap's breakpoint tiers helps developers create layouts that adapt automatically to screen size.

💼 Career

Understanding Bootstrap breakpoints is a key skill for front-end developers and web designers. It helps in building mobile-friendly websites that provide a good user experience on all devices.

1

Setup basic HTML structure with Bootstrap CSS

Create a basic HTML5 page with lang="en" in the <html> tag. Inside the <head>, add the <meta charset="UTF-8"> and <meta name="viewport" content="width=device-width, initial-scale=1"> tags. Also add the Bootstrap 5 CSS link: https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css. In the <body>, add a <main> element with a <div> that has the class container.

Bootsrap

  
  
  Responsive Bootstrap Grid


  
    
      
    
  

Hint

Remember to add the meta tags for character set and viewport for mobile responsiveness. Use the official Bootstrap CDN link for CSS.

2

Add a Bootstrap row with six columns

Inside the <div class="container">, add a <div> with class row. Inside this row, add six <div> elements each with the class col. Inside each column, add text labels: XS, SM, MD, LG, XL, and XXL respectively, in that order.

Bootsrap

  
  
  
  Responsive Bootstrap Grid


  
    
      
        
      
    
  

Hint

Use a div with class row to hold columns. Each column is a div with class col and the correct text inside.

3

Set column widths for each breakpoint tier

Change the six columns so that each uses Bootstrap's breakpoint classes to set widths: the first column uses col-12 for extra small screens (XS), the second uses col-sm-6, the third uses col-md-4, the fourth uses col-lg-3, the fifth uses col-xl-2, and the sixth uses col-xxl-1. Keep the text labels inside each column as before.

Bootsrap

  
  
  
  Responsive Bootstrap Grid


  
    
      
        
        
        
        
        
        
      
    
  

Hint

Use the breakpoint classes exactly as col-12, col-sm-6, col-md-4, col-lg-3, col-xl-2, and col-xxl-1 on each column respectively.

4

Add background colors and padding for visual clarity

Add Bootstrap utility classes to each column to add background colors and padding for easy visual distinction. Use bg-primary and text-white on the first column, bg-secondary and text-white on the second, bg-success and text-white on the third, bg-danger and text-white on the fourth, bg-warning on the fifth, and bg-info and text-white on the sixth. Also add p-3 padding class to all columns.

Bootsrap

  
  
  
  Responsive Bootstrap Grid


  
    
      
        
        
        
        
        
        
      
    
  

Hint

Use Bootstrap background color classes and padding class p-3 on each column. Add text-white where needed for contrast.

Practice

1. Which Bootstrap breakpoint tier applies to extra small devices like phones by default?

easy

A. md

B. xs

C. lg

D. xl

Solution

1. Step 1: Understand Bootstrap breakpoint tiers

   Bootstrap defines breakpoints for different screen sizes: xs, sm, md, lg, xl, and xxl.

2. Step 2: Identify the smallest breakpoint

   The smallest breakpoint is xs, which targets extra small devices like phones.

3. Final Answer:

   xs -> Option B

4. Quick Check:

   Extra small devices = xs [OK]

Hint: Remember xs is for phones, smallest screens [OK]

Common Mistakes:

• Confusing xs with sm or md
• Thinking xl is for phones
• Assuming xs is deprecated

2. Which is the correct Bootstrap class to make a column span 6 units on medium screens and above?

easy

A. col-lg-6

B. col-xs-6

C. col-xxl-6

D. col-md-6

Solution

1. Step 1: Recall Bootstrap column classes

   Bootstrap uses col-{breakpoint}-{number} to set column width at breakpoints.

2. Step 2: Match medium breakpoint with 6 units

   The class col-md-6 sets the column to span 6 units on medium (md) screens and larger.

3. Final Answer:

   col-md-6 -> Option D

4. Quick Check:

   Medium breakpoint + 6 units = col-md-6 [OK]

Hint: Use col-md-6 for medium screens 6 units wide [OK]

Common Mistakes:

• Using col-xs-6 (deprecated)
• Choosing col-lg-6 for medium screens
• Using col-xxl-6 for medium screens

3. What will happen if you use the class d-none d-lg-block on a div?

medium

A. The div is hidden on all screen sizes.

B. The div is visible on medium screens only.

C. The div is visible only on large screens and above.

D. The div is visible only on small screens.

Solution

1. Step 1: Understand the classes used

   d-none hides the element on all screen sizes by default. d-lg-block makes it display as block starting from large (lg) screens and above.

2. Step 2: Combine effects on screen sizes

   On screens smaller than large, the div is hidden. On large and bigger screens, it becomes visible as a block.

3. Final Answer:

   The div is visible only on large screens and above. -> Option C

4. Quick Check:

   d-none + d-lg-block = visible from lg up [OK]

Hint: d-none hides all, d-lg-block shows from large up [OK]

Common Mistakes:

• Thinking div is always hidden
• Assuming visible on small screens
• Confusing lg with md or xl

4. You wrote <div class='col-sm-4 col-md-6'></div> but on medium screens the column is still full width. What is the likely problem?

medium

A. You forgot to include Bootstrap's CSS file.

B. The class 'col-md-6' is invalid syntax.

C. Bootstrap does not support multiple breakpoint classes.

D. You need to add 'col-lg-6' instead.

Solution

1. Step 1: Check the class syntax

   Both col-sm-4 and col-md-6 are valid Bootstrap classes for different breakpoints.

2. Step 2: Consider why styles don't apply

   If the column is full width on medium screens, likely Bootstrap CSS is missing or not loaded, so classes have no effect.

3. Final Answer:

   You forgot to include Bootstrap's CSS file. -> Option A

4. Quick Check:

   Missing CSS means breakpoint classes don't work [OK]

Hint: Check if Bootstrap CSS is linked properly [OK]

Common Mistakes:

• Assuming class syntax is wrong
• Thinking multiple breakpoints not allowed
• Adding wrong breakpoint class

5. You want a button to be full width on extra small and small screens, but auto width on medium and larger screens. Which classes achieve this?

hard

A. btn w-100 w-md-auto

B. btn w-xs-100 w-md-200

C. btn w-100 w-lg-200

D. btn w-100 w-sm-200

Solution

1. Step 1: Understand width utility classes

   w-100 sets width to 100% (full width). w-md-auto resets width to auto starting at medium screens.

2. Step 2: Match requirements

   Full width on xs and sm means w-100. On md and above, auto width with w-md-auto. Bootstrap does not have w-md-200 or similar fixed pixel classes.

3. Final Answer:

   btn w-100 w-md-auto -> Option A

4. Quick Check:

   Full width xs/sm + auto width md+ = btn w-100 w-md-auto [OK]

Hint: Use w-100 for small, w-md-auto for medium+ widths [OK]

Common Mistakes:

• Using non-existent w-xs-100 or w-md-200 classes
• Confusing breakpoint suffixes
• Expecting fixed pixel widths from Bootstrap utilities