Column sizing (col-1 through col-12) in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does col-6 mean in Bootstrap grid?

It means the column will take up 6 out of 12 parts of the row width, so half the row.

beginner

How many total columns does Bootstrap's grid system have?

Bootstrap's grid system has 12 columns in total.

beginner

What happens if you add three col-4 columns in one row?

They will each take 4 parts, so together they fill the entire 12-column row equally.

intermediate

Can you use col-1 to col-12 classes together in one row?

Yes, you can mix different column sizes as long as their total does not exceed 12.

beginner

What is the visual effect of using col-12 on a column?

The column will stretch across the entire row width, taking all 12 parts.

In Bootstrap, what does col-3 represent?

A A column that takes 6/12 of the row width

B A column that takes 3/12 of the row width

C A column that takes 9/12 of the row width

D A column that takes the full row width

col-3 means the column uses 3 parts out of 12 total parts in the row.

How many col-4 columns fit exactly in one Bootstrap row?

A 3

B 2

C 4

D 6

Three col-4 columns each take 4 parts, totaling 12 parts (4+4+4=12).

What happens if column sizes in a row add up to more than 12?

A Columns wrap to the next line

B Columns shrink automatically

C Columns overlap each other

D The row breaks and shows an error

Bootstrap wraps extra columns to a new line if total exceeds 12.

Which class makes a column take the full width of the row?

A col-1

B col-6

C col-12

D col-4

col-12 means the column uses all 12 parts, filling the row.

Can you mix col-2 and col-10 in the same row?

A No, columns must be the same size

B Yes, but only if they add up to more than 12

C No, only multiples of 3 are allowed

D Yes, if their total is 12 or less

You can mix column sizes as long as their total does not exceed 12.

Explain how Bootstrap's column sizing works using col-1 through col-12 classes.

Think of dividing a pizza into 12 slices.

Describe what happens visually when you use three col-4 columns in one Bootstrap row.

Imagine three equal boxes side by side filling a shelf.