Bootsrapmarkup~30 mins

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

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

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.

Progress0 / 4 steps

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

Need a hint?

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

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

Need a hint?

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

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

Need a hint?

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

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

Need a hint?

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