12-column grid model in Bootsrap - Browser Rendering Trace

Render Flow - 12-column grid model

Load HTML with container

↓

Create container box

↓

Load row inside container

↓

Create row box with flex display

↓

Load columns inside row

↓

Create 12 equal width columns

↓

Apply gutter spacing

↓

Render columns side by side

Bootstrap's 12-column grid uses a container holding rows, which hold columns. The row uses flexbox to arrange columns side by side, dividing space into 12 equal parts with gutters between columns.

Render Steps - 5 Steps

Code Added:<div class="container"> ... </div>

Before

[Empty page]

→

After

[Container box]
[__________]

Adding the container creates a centered box with horizontal padding to hold content.

🔧 Browser Action:Creates container block with padding and max width

Code Sample

Three equal columns side by side, each taking 4 of the 12 grid parts, inside a container with spacing.

Bootsrap

<div class="container">
  <div class="row">
    <div class="col-4">Column 1</div>
    <div class="col-4">Column 2</div>
    <div class="col-4">Column 3</div>
  </div>
</div>

Render Quiz - 3 Questions

After applying step 3, what fraction of the row width does the single col-4 column occupy?

A One-fourth of the row width

B One-third of the row width

C Half of the row width

D Full row width

Common Confusions - 3 Topics

Why do my columns stack vertically instead of side by side?

If the total column widths exceed 12, Bootstrap wraps columns to next line. For example, three col-5 columns sum to 15, so the last wraps down.

💡 Sum of col-* numbers in a row should be 12 or less to stay in one line.

Why is there space between columns even though I didn't add margin?

Bootstrap columns have horizontal padding (gutters) inside each column to create space between columns visually.

💡 Gutters come from column padding, not margin.

Why does col-4 take exactly one-third width?

Because Bootstrap divides the row into 12 equal parts, col-4 means 4 parts out of 12, which is 33.333%.

💡 Column width = (col number / 12) * 100%

Property Reference

Property	Value Applied	Axis/Direction	Visual Effect	Common Use
container	max-width + padding	block	Centers content with horizontal padding	Wrap grid content
row	display: flex; flex-wrap: wrap;	horizontal main axis	Aligns columns side by side, wraps if needed	Hold columns in grid
col-1 to col-12	flex: 0 0 (n/12)*100%; max-width: (n/12)*100%;	horizontal width	Sets column width as fraction of row	Create responsive columns
gutter	padding-left/right on cols	horizontal spacing	Adds space between columns	Separate columns visually

Concept Snapshot

Bootstrap 12-column grid divides row into 12 equal parts. Columns use classes col-1 to col-12 to set width as fraction of 12. Rows use flexbox to arrange columns horizontally. Gutters are padding inside columns creating space. Sum of column widths in a row should be 12 or less to avoid wrapping.

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