Bootsrapmarkup~30 mins

Why a grid system matters in Bootsrap - See It in Action

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Why a Grid System Matters with Bootstrap

📖 Scenario: You are building a simple webpage that shows three boxes side by side. You want the boxes to line up nicely on all screen sizes, from phones to big desktop screens.

🎯 Goal: Create a webpage using Bootstrap's grid system to arrange three colored boxes in a row that adjusts nicely on different screen sizes.

📋 What You'll Learn

Use Bootstrap 5 grid classes to create a responsive layout

Create three boxes with distinct background colors

Boxes should be side by side on medium and larger screens

Boxes should stack vertically on small screens

Use semantic HTML and include accessibility features

💡 Why This Matters

🌍 Real World

Grid systems are used in almost every website to organize content neatly and make pages look good on phones, tablets, and desktops.

💼 Career

Understanding Bootstrap's grid system is essential for front-end developers to build responsive, accessible, and professional websites quickly.

Progress0 / 4 steps

Set up the basic HTML structure with Bootstrap

Create a basic HTML5 page with lang="en", charset="UTF-8", and viewport meta tags. Include the Bootstrap 5 CSS CDN link inside the <head>. Inside the <body>, add a <div> with class container to hold the content.

Bootsrap




  
  
  Grid System Example

Need a hint?

Remember to include the Bootstrap CSS link inside the <head> section.

Add a Bootstrap row and columns for the boxes

Inside the container div, add a div with class row. Inside this row, add three div elements each with classes col-12 and col-md-4. These will be the columns that hold the boxes.

Bootsrap




  
  
  Grid System Example

Need a hint?

Use col-12 for full width on small screens and col-md-4 for one-third width on medium and larger screens.

Add colored boxes inside each column

Inside each col-12 col-md-4 div, add a div with class p-3 and a unique background color class: bg-primary, bg-success, and bg-warning respectively. Also add text-white class for better contrast and aria-label describing each box.

Bootsrap




  
  
  Grid System Example

Need a hint?

Use Bootstrap padding class p-3 and background color classes. Add aria-label for accessibility.

Add a responsive heading and footer

Above the row, add a <header> with an <h1> that says "Bootstrap Grid Example" and center it using Bootstrap classes. Below the container, add a <footer> with a paragraph that says "© 2024 Grid Demo" and center it as well.

Bootsrap




  
  
  Grid System Example
  


  
  
    
      
        Blue Box
      
      
        Green Box
      
      
        Yellow Box

Need a hint?

Use Bootstrap utility classes text-center and margin classes my-4 to center and add vertical spacing.