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

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.

1

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

Hint

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

2

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

Hint

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

3

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
  


  

Hint

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

4

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

Hint

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

Practice

1. What does the Bootstrap class col-md-6 do in a responsive layout?

easy

A. Makes the column take half the width on medium and larger screens

B. Makes the column take full width on all screen sizes

C. Makes the column hidden on medium screens

D. Makes the column take one-sixth width on medium screens

Solution

1. Step 1: Understand the class format

   The class col-md-6 means the column uses 6 parts out of 12 on medium (≥768px) screens and larger.

2. Step 2: Interpret the width fraction

   Since Bootstrap grid is divided into 12 parts, 6 parts equal half the width.

3. Final Answer:

   Makes the column take half the width on medium and larger screens -> Option A

4. Quick Check:

   col-md-6 = half width on medium+ [OK]

Hint: Remember 12-grid system: number means parts of 12 width [OK]

Common Mistakes:

• Thinking it applies to all screen sizes
• Confusing '6' with percentage instead of grid parts
• Assuming it hides the column

2. Which of the following is the correct Bootstrap class to make a column full width on small screens and half width on large screens?

easy

A. col-sm-12 col-lg-6

B. col-lg-12 col-sm-6

C. col-6 col-lg-12

D. col-sm-6 col-lg-12

Solution

1. Step 1: Understand screen size prefixes

   sm means small screens (≥576px), lg means large screens (≥992px).

2. Step 2: Match widths to screen sizes

   We want full width (12 parts) on small screens and half width (6 parts) on large screens, so col-sm-12 col-lg-6 fits.

3. Final Answer:

   col-sm-12 col-lg-6 -> Option A

4. Quick Check:

   Full width small + half large = col-sm-12 col-lg-6 [OK]

Hint: Use smaller breakpoint first, then larger breakpoint classes [OK]

Common Mistakes:

• Reversing the order of breakpoints
• Using wrong numbers for widths
• Mixing up screen size prefixes

3. Given the HTML snippet:

<div class="row">
  <div class="col-12 col-md-8">Content A</div>
  <div class="col-6 col-md-4">Content B</div>
</div>

What will be the layout on a medium screen (≥768px)?

medium

A. Content A and B both take full width stacked vertically

B. Content A takes full width, Content B takes half width stacked

C. Content A takes 8/12 width, Content B takes 4/12 width side by side

D. Content A takes 6/12 width, Content B takes 6/12 width side by side

Solution

1. Step 1: Identify classes active at medium screen

   At medium (≥768px), col-md-8 and col-md-4 apply, overriding smaller screen classes.

2. Step 2: Calculate widths

   Content A uses 8 parts out of 12, Content B uses 4 parts out of 12, so they sit side by side with those widths.

3. Final Answer:

   Content A takes 8/12 width, Content B takes 4/12 width side by side -> Option C

4. Quick Check:

   col-md-8 + col-md-4 = full row split 8/4 [OK]

Hint: At breakpoint, use col-{breakpoint}-X classes, ignore smaller ones [OK]

Common Mistakes:

• Using col-12 and col-6 widths instead of col-md-*
• Thinking columns stack vertically on medium screens
• Confusing which class overrides which

4. You wrote this code:

<div class="row">
  <div class="col-sm-6 col-md-4">Box 1</div>
  <div class="col-sm-6 col-md-4">Box 2</div>
  <div class="col-sm-6 col-md-4">Box 3</div>
</div>

But on small screens, Box 3 drops to a new line instead of staying in the same row. Why?

medium

A. Because col-sm-6 means full width on small screens

B. Because col-md-4 overrides col-sm-6 on small screens

C. Because the row class is missing

D. Because three columns of col-sm-6 each exceed 12 grid units, causing wrap

Solution

1. Step 1: Calculate total width on small screens

   Each column uses col-sm-6, meaning 6 parts out of 12, so two columns fit per row (6+6=12).

2. Step 2: Understand why Box 3 wraps

   Three columns each 6 parts wide total 18 parts, which is more than 12, so Box 3 wraps to next line.

3. Final Answer:

   Because three columns of col-sm-6 each exceed 12 grid units, causing wrap -> Option D

4. Quick Check:

   6+6+6 > 12 causes wrap [OK]

Hint: Sum col widths per row; >12 means wrap to next line [OK]

Common Mistakes:

• Thinking col-md-4 affects small screens
• Assuming row class is missing
• Misunderstanding col-sm-6 width

5. You want a layout where on extra small screens all columns stack full width, on small screens two columns share the row equally, and on large screens three columns share the row equally. Which class set achieves this?

hard

A. col-6 col-sm-12 col-lg-4

B. col-12 col-sm-6 col-lg-4

C. col-sm-12 col-md-6 col-lg-4

D. col-12 col-md-4 col-lg-6

Solution

1. Step 1: Define widths for extra small screens

   col-12 makes columns full width on extra small screens (default).

2. Step 2: Define widths for small screens

   col-sm-6 makes two columns per row (6+6=12) on small screens.

3. Step 3: Define widths for large screens

   col-lg-4 makes three columns per row (4+4+4=12) on large screens.

4. Final Answer:

   col-12 col-sm-6 col-lg-4 -> Option B

5. Quick Check:

   Stack, then 2 per row, then 3 per row = col-12 col-sm-6 col-lg-4 [OK]

Hint: Start from smallest screen, add classes for bigger breakpoints [OK]

Common Mistakes:

• Mixing breakpoint order
• Using wrong numbers for equal columns
• Forgetting default col-12 for stacking