Column stacking on mobile in Bootsrap - Mini Project: Build & Apply

Column stacking on mobile with Bootstrap

📖 Scenario: You are creating a simple webpage layout that shows three content boxes side by side on larger screens. On smaller screens like phones, these boxes should stack vertically for easy reading.

🎯 Goal: Build a responsive Bootstrap grid with three columns that appear side by side on desktop and tablet screens but stack vertically on mobile screens.

📋 What You'll Learn

Use Bootstrap 5 classes for the grid layout

Create three columns inside a row

Columns should be side by side on medium and larger screens

Columns should stack vertically on small and extra small screens

Each column should contain a <div> with text: 'Column 1', 'Column 2', and 'Column 3' respectively

💡 Why This Matters

🌍 Real World

Responsive column layouts are common in websites to ensure content looks good on all devices, especially mobile phones.

💼 Career

Understanding Bootstrap's grid system and responsive design is essential for front-end web development jobs.

1

Create the basic HTML structure with Bootstrap

Write the basic HTML5 skeleton with lang="en", meta charset="UTF-8", and viewport meta tag. Include the Bootstrap 5 CSS CDN link inside the <head>. Inside the <body>, create a <div> with class container.

Bootsrap

    
    
    Column stacking
    


    
        
    

Hint

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

2

Add a Bootstrap row with three columns

Inside the container div, add a div with class row. Inside this row, create three div elements each with class col. Inside each column div, add text: 'Column 1', 'Column 2', and 'Column 3' respectively.

Bootsrap

    
    
    Column stacking
    


    
        
            
        
    

Hint

Use div elements with class col inside the row to create columns.

3

Make columns side by side on medium and larger screens

Change the class of each column div from col to col-md-4 so that on medium and larger screens, the three columns share the row equally side by side.

Bootsrap

    
    
    Column stacking
    


    
        
            
        
    

Hint

Use the Bootstrap class col-md-4 to make columns take one-third width on medium and larger screens.

4

Add background colors and padding for better visibility

Add Bootstrap utility classes bg-primary text-white p-3 to the first column, bg-success text-white p-3 to the second column, and bg-warning text-dark p-3 to the third column to add background colors, text colors, and padding.

Bootsrap

    
    
    Column stacking
    


    
        
            
        
    

Hint

Use Bootstrap background color classes like bg-primary and padding class p-3 on each column.

Practice

1. What does the Bootstrap class col-12 do on mobile screens?

easy

A. Makes the column take full width and stack vertically

B. Makes the column take half width and stay side-by-side

C. Hides the column on mobile screens

D. Centers the column horizontally

Solution

1. Step 1: Understand col-12 meaning

   The class col-12 means the column will take all 12 parts of the grid, which is full width.

2. Step 2: Effect on mobile screens

   On small screens, columns with col-12 stack vertically because each takes full width.

3. Final Answer:

   Makes the column take full width and stack vertically -> Option A

4. Quick Check:

   col-12 = full width stack [OK]

Hint: Full width columns stack vertically on mobile with col-12 [OK]

Common Mistakes:

• Thinking col-12 means half width
• Assuming columns stay side-by-side on mobile
• Confusing col-12 with hiding columns

2. Which Bootstrap class combination makes two columns stack on mobile but sit side-by-side on medium screens?

easy

A. col-6 col-md-12

B. col-md-6 col-lg-12

C. col-6 col-lg-6

D. col-12 col-md-6

Solution

1. Step 1: Analyze mobile stacking

   col-12 makes columns full width on mobile, so they stack vertically.

2. Step 2: Analyze medium screen layout

   col-md-6 makes columns half width on medium screens, so they sit side-by-side.

3. Final Answer:

   col-12 col-md-6 -> Option D

4. Quick Check:

   Mobile stack = col-12, Medium side-by-side = col-md-6 [OK]

Hint: Use col-12 for mobile stack, col-md-6 for medium side-by-side [OK]

Common Mistakes:

• Reversing col-12 and col-md-6 classes
• Using col-6 on mobile which prevents stacking
• Ignoring breakpoint order in class names

3. Given this HTML snippet:

<div class='row'>
  <div class='col-12 col-md-4'>A</div>
  <div class='col-12 col-md-8'>B</div>
</div>

How will columns appear on a small mobile screen?

medium

A. Columns A and B stacked vertically, each full width

B. Columns A and B stacked vertically, widths 4/12 and 8/12

C. Only column A visible, column B hidden

D. Columns A and B side-by-side with widths 4/12 and 8/12

Solution

1. Step 1: Check mobile classes

   Both columns have col-12 which means full width on small screens, so they stack vertically.

2. Step 2: Check medium screen classes

   col-md-4 and col-md-8 apply only on medium and larger screens, so no effect on mobile.

3. Final Answer:

   Columns A and B stacked vertically, each full width -> Option A

4. Quick Check:

   Mobile uses col-12, so stacked full width [OK]

Hint: On mobile, col-12 stacks columns vertically regardless of col-md-* [OK]

Common Mistakes:

• Thinking col-md-* affects mobile layout
• Assuming side-by-side on mobile
• Confusing widths on small screens

4. You want two columns to stack on mobile but sit side-by-side on medium screens. You wrote:

<div class='row'>
  <div class='col-md-6'>Left</div>
  <div class='col-md-6'>Right</div>
</div>

Why do the columns NOT stack on mobile?

medium

A. Because col-md-6 applies to mobile screens too, so on mobile columns default to equal width side-by-side

B. Because you forgot to add col-12 to make columns full width on mobile

C. Because row class disables stacking on mobile

D. Because columns need col-sm-12 to stack on mobile

Solution

1. Step 1: Understand default column behavior

   Without col-* classes for small screens, columns try to share space equally side-by-side.

2. Step 2: Add col-12 for mobile stacking

   Adding col-12 makes columns full width on mobile, forcing vertical stacking.

3. Final Answer:

   You forgot to add col-12 to make columns full width on mobile -> Option B

4. Quick Check:

   Mobile stack needs col-12 class [OK]

Hint: Add col-12 for mobile stacking, col-md-6 for medium side-by-side [OK]

Common Mistakes:

• Assuming col-md-6 controls mobile layout
• Thinking row class prevents stacking
• Using col-sm-12 instead of col-12 for mobile

5. You want a layout with three columns that stack on mobile, show two columns side-by-side on tablets, and three columns side-by-side on desktops. Which class setup achieves this?

hard

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

B. col-6 col-md-4 col-lg-3

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

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

Solution

1. Step 1: Mobile stacking with full width

   col-12 makes columns full width on mobile, so they stack vertically.

2. Step 2: Two columns side-by-side on tablets

   col-md-6 means on medium screens (tablets), columns take half width, so two fit side-by-side.

3. Step 3: Three columns side-by-side on desktops

   col-lg-4 means on large screens (desktops), columns take 4/12 width, so three fit side-by-side.

4. Final Answer:

   col-12 col-md-6 col-lg-4 -> Option C

5. Quick Check:

   Mobile stack = col-12, Tablet 2 cols = col-md-6, Desktop 3 cols = col-lg-4 [OK]

Hint: Use col-12 mobile, col-md-6 tablet, col-lg-4 desktop for stacking [OK]

Common Mistakes:

• Using col-sm instead of col-md for tablets
• Choosing wrong column widths that don't add up
• Forgetting col-12 for mobile stacking