12-column grid model in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the 12-column grid model in Bootstrap?

It is a layout system that divides the page width into 12 equal parts called columns. You can combine these columns to create different widths for content blocks.

beginner

How do you create a row in Bootstrap's 12-column grid?

Use the class="row" on a container element. This groups columns horizontally and ensures proper spacing.

beginner

How do you specify the width of a column in Bootstrap's grid?

Add a class like <code>col-*</code> where * is a number from 1 to 12. For example, <code>col-6</code> means the column takes 6 out of 12 parts, or half the width.

intermediate

Why is the 12-column grid model useful for responsive design?

Because 12 can be divided evenly many ways (2, 3, 4, 6), it lets you easily create layouts that adjust well on different screen sizes.

intermediate

What happens if the total column widths in a row exceed 12?

The columns will wrap to the next line, which can break your layout. Always keep the total column count per row at 12 or less.

In Bootstrap's 12-column grid, what class would you use for a column that takes one quarter of the row's width?

A col-3

B col-4

C col-6

D col-9

Since 12 divided by 4 is 3, a quarter width column uses col-3.

What is the purpose of the row class in Bootstrap's grid?

A To create horizontal groups of columns

B To add padding inside columns

C To set font size

D To add background color

The row class groups columns horizontally and manages spacing between them.

If you want two equal columns side by side in Bootstrap's grid, which classes would you use?

A col-4 and col-8

B col-6 and col-6

C col-3 and col-9

D col-12 and col-12

Two columns each with col-6 take half the width each, fitting side by side.

What happens if you add three columns with classes col-5, col-5, and col-5 inside one row?

A The row breaks and disappears

B All columns fit in one line

C The third column wraps to the next line

D Columns overlap

Because 5+5+5=15 which is more than 12, the third column moves to the next line.

Why is the number 12 chosen for the grid columns in Bootstrap?

A Because 12 is the default font size

B Because 12 is the number of months in a year

C Because 12 is a prime number

D Because 12 divides evenly into many parts

12 divides evenly into halves, thirds, quarters, sixths, making flexible layouts easier.

Explain how the 12-column grid model helps create flexible page layouts in Bootstrap.

Think about how dividing a page into parts helps arrange content.

Describe what happens if the total column widths in a Bootstrap row exceed 12 and how to avoid layout issues.

Consider how space is limited in one row.