Bootsrapmarkup~30 mins

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

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

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.

Progress0 / 4 steps

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

Need a hint?

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

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

Need a hint?

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

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

Need a 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.

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

Need a hint?

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