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

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.

1

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
    

Hint

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

2

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
    


    
    

Hint

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

3

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
    


    
        
            
        
    

Hint

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

4

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
    


    
        
            
            
        
    

Hint

Use Bootstrap utility classes to add spacing and center text.

Practice

1. In Bootstrap's 12-column grid system, how many columns can you combine in a single row without breaking the layout?

easy

A. Only 3 columns maximum

B. Exactly 6 columns only

C. Up to 12 columns combined

D. Any number of columns without limit

Solution

1. Step 1: Understand the 12-column grid concept

   The grid divides the page width into 12 equal parts, so columns in a row must add up to 12 or less.

2. Step 2: Apply the rule to column combinations

   You can combine columns as long as their total width does not exceed 12, ensuring the layout fits perfectly.

3. Final Answer:

   Up to 12 columns combined -> Option C

4. Quick Check:

   Sum of columns ≤ 12 = Up to 12 columns combined [OK]

Hint: Remember total columns per row must be 12 or less [OK]

Common Mistakes:

• Thinking you can use more than 12 columns in one row
• Assuming exactly 6 columns are required
• Believing any number of columns works

2. Which of the following is the correct Bootstrap class to create a column that spans 4 out of 12 columns?

easy

A. col-6

B. col-12

C. col-8

D. col-4

Solution

1. Step 1: Identify the class for column width

   Bootstrap uses classes like col-4 to specify a column that spans 4 of the 12 grid columns.

2. Step 2: Match the class to the required width

   Since we want 4 columns wide, col-4 is the correct class.

3. Final Answer:

   col-4 -> Option D

4. Quick Check:

   Class for 4 columns = col-4 [OK]

Hint: Class name matches number of columns (col-4 for 4 columns) [OK]

Common Mistakes:

• Using col-12 which spans full width
• Choosing col-8 or col-6 which are wider than 4 columns
• Confusing col-4 with col-14 (invalid)

3. What will be the layout result of this Bootstrap row?

<div class="row">
  <div class="col-3">A</div>
  <div class="col-6">B</div>
  <div class="col-3">C</div>
</div>

medium

A. Three columns in one row with widths 3, 6, and 3

B. Two rows because columns exceed 12

C. One column spanning full width

D. Columns stacked vertically

Solution

1. Step 1: Calculate total column width in the row

   Sum of columns: 3 + 6 + 3 = 12, which fits exactly in one row.

2. Step 2: Understand Bootstrap layout behavior

   Since total is 12, all columns appear side by side in one row with widths proportional to 3, 6, and 3.

3. Final Answer:

   Three columns in one row with widths 3, 6, and 3 -> Option A

4. Quick Check:

   Total columns = 12 means one row layout [OK]

Hint: Add column numbers; if 12 or less, same row [OK]

Common Mistakes:

• Assuming columns exceed 12 and wrap to next row
• Thinking columns stack vertically by default
• Believing only one column shows

4. Identify the error in this Bootstrap grid code:

<div class="row">
  <div class="col-5">X</div>
  <div class="col-8">Y</div>
</div>

medium

A. Total columns exceed 12, causing layout break

B. Missing closing tag for row

C. Incorrect class names used

D. No error, layout is correct

Solution

1. Step 1: Add column widths to check total

   5 + 8 = 13, which is more than 12 allowed per row.

2. Step 2: Understand Bootstrap grid rules

   When total exceeds 12, columns wrap or break layout, causing unexpected results.

3. Final Answer:

   Total columns exceed 12, causing layout break -> Option A

4. Quick Check:

   Sum > 12 means layout error [OK]

Hint: Sum columns; if over 12, layout breaks [OK]

Common Mistakes:

• Ignoring total column width sum
• Thinking 5 and 8 fit in one row
• Assuming class names are wrong

5. You want to create a responsive layout with three columns: first takes 3 columns on small screens and 6 on medium, second takes 6 on small and 3 on medium, third takes 3 on small and 3 on medium. Which Bootstrap classes correctly achieve this?

hard

A. col-md-3 col-sm-6, col-md-6 col-sm-3, col-md-3 col-sm-3

B. col-sm-3 col-md-6, col-sm-6 col-md-3, col-sm-3 col-md-3

C. col-3 col-6, col-6 col-3, col-3 col-3

D. col-sm-6 col-md-3, col-sm-3 col-md-6, col-sm-3 col-md-3

Solution

1. Step 1: Match small screen classes

   First column: 3 columns on small = col-sm-3, second: 6 columns = col-sm-6, third: 3 columns = col-sm-3.

2. Step 2: Match medium screen classes

   First column: 6 columns on medium = col-md-6, second: 3 columns = col-md-3, third: 3 columns = col-md-3.

3. Step 3: Verify option matches all classes

   col-sm-3 col-md-6, col-sm-6 col-md-3, col-sm-3 col-md-3 matches all these class assignments correctly.

4. Final Answer:

   col-sm-3 col-md-6, col-sm-6 col-md-3, col-sm-3 col-md-3 -> Option B

5. Quick Check:

   Responsive classes match screen sizes [OK]

Hint: Use col-sm-* for small, col-md-* for medium screens [OK]

Common Mistakes:

• Mixing up small and medium class prefixes
• Using col-* without breakpoint for responsiveness
• Swapping column sizes between breakpoints