Bootsrapmarkup~30 mins

Responsive column classes in Bootsrap - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Responsive Column Layout with Bootstrap

📖 Scenario: You are creating a simple webpage layout that adjusts the number of columns shown based on the screen size. This helps the page look good on phones, tablets, and desktops.

🎯 Goal: Build a responsive grid using Bootstrap classes that shows 1 column on extra small screens, 2 columns on small screens, and 4 columns on medium and larger screens.

📋 What You'll Learn

Use Bootstrap 5 responsive column classes

Create a container with a row

Add exactly 4 columns inside the row

Each column should have text: 'Column 1', 'Column 2', 'Column 3', 'Column 4'

Columns must stack on extra small screens, show 2 columns on small screens, and 4 columns on medium and larger screens

💡 Why This Matters

🌍 Real World

Responsive column layouts are used in websites to make content look good on phones, tablets, and desktops without extra coding for each device.

💼 Career

Web developers often use Bootstrap's responsive grid system to quickly build layouts that adapt to different screen sizes, improving user experience.

Progress0 / 4 steps

Create the basic Bootstrap container and row

Write the HTML code to create a <div> with class container and inside it a <div> with class row. This sets up the grid structure.

Bootsrap

Need a hint?

Remember, Bootstrap grids need a container and a row to work properly.

Add four columns with responsive classes

Inside the row, add four <div> elements each with the classes col-12 col-sm-6 col-md-3. This means each column takes full width on extra small screens, half width on small screens, and one quarter width on medium and larger screens.

Bootsrap

Need a hint?

Use the classes exactly as col-12 col-sm-6 col-md-3 for each column.

Add a header and footer for semantic structure

Add a <header> above the container with the text Responsive Columns Example and a <footer> below the container with the text Footer content here.

Bootsrap


  


  
    Column 1
    Column 2
    Column 3
    Column 4

Need a hint?

Use semantic tags <header> and <footer> with the exact text.

Add the Bootstrap CSS link and meta tags for responsiveness

Add the <!DOCTYPE html> declaration, <html lang="en">, <head> section with <meta charset="UTF-8">, <meta name="viewport" content="width=device-width, initial-scale=1">, and the Bootstrap 5 CSS CDN link. Wrap the existing code inside <body> and <html> tags.

Bootsrap




  
  



  Responsive Columns Example


  
    Column 1
    Column 2
    Column 3
    Column 4
  


  Footer content here

Need a hint?

Include the standard HTML5 doctype, language attribute, meta tags for charset and viewport, and link to Bootstrap CSS from CDN.