Bootsrapmarkup~30 mins

12-column grid model in Bootsrap - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Create a Responsive 12-Column Grid Layout with Bootstrap

📖 Scenario: You are building a simple webpage layout using Bootstrap's 12-column grid system. This layout will help you organize content in neat columns that adjust on different screen sizes.

🎯 Goal: Build a responsive webpage with a container that has a single row divided into three columns using Bootstrap's 12-column grid model. The columns should have widths of 3, 6, and 3 respectively on medium and larger screens.

📋 What You'll Learn

Use Bootstrap 5 CSS from CDN

Create a container with a row

Add three columns inside the row with classes col-md-3, col-md-6, and col-md-3

Include some placeholder text inside each column

Ensure the layout is responsive on different screen sizes

💡 Why This Matters

🌍 Real World

Web developers use Bootstrap's grid system to quickly create responsive layouts that look good on phones, tablets, and desktops without writing complex CSS.

💼 Career

Understanding Bootstrap grids is essential for front-end developers to build flexible and maintainable web pages efficiently.

Progress0 / 4 steps

Set up the basic HTML structure with Bootstrap CSS

Create a basic HTML5 document with lang="en", charset="UTF-8", and a viewport meta tag. Include the Bootstrap 5 CSS CDN link inside the <head>. Add an empty <body> section.

Bootsrap




    
    
    Bootstrap Grid

Need a hint?

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

Add a Bootstrap container and a row inside the body

Inside the <body>, add a <div> with class container. Inside this container, add another <div> with class row to hold the columns.

Bootsrap




    
    
    Bootstrap Grid

Need a hint?

The container centers your content and the row will hold the columns.

Add three columns with widths 3, 6, and 3 inside the row

Inside the row div, add three div elements with classes col-md-3, col-md-6, and col-md-3 respectively. Put the text Column 1, Column 2, and Column 3 inside each column in order.

Bootsrap




    
    
    Bootstrap Grid

Need a hint?

Use the Bootstrap column classes to set the widths. The numbers must add up to 12.

Add responsive text alignment and spacing to columns

Add the Bootstrap class text-center to the second column to center its text. Add the class py-3 to all three columns to add vertical padding for better spacing.

Bootsrap




    
    
    Bootstrap Grid

Need a hint?

Use Bootstrap utility classes to add spacing and center text.