Row and column structure in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of a .row in Bootstrap?

A .row groups columns horizontally and ensures they align properly with gutters (space between columns). It helps create a horizontal layout inside a container.

beginner

How do Bootstrap columns behave inside a .row?

Columns inside a .row share the available horizontal space. They stack side-by-side on larger screens and can stack vertically on smaller screens depending on the column classes used.

beginner

What does the class .col-6 mean in Bootstrap?

It means the column takes up 6 out of 12 parts of the row's width, so half the row width. Bootstrap grid is based on 12 equal parts.

intermediate

Why should you always place columns inside a .row?

Because .row applies negative margins that offset the padding of the container, so columns align correctly without extra space on sides.

beginner

How does Bootstrap's grid system help with responsive design?

It uses rows and columns with classes that change width based on screen size, so content adjusts layout automatically for phones, tablets, and desktops.

In Bootstrap, what is the total number of columns in a single row?

A 12

B 6

C 24

D 4

Bootstrap's grid system divides a row into 12 equal columns.

Which class should you use to create a horizontal group of columns in Bootstrap?

A .container

B .row

C .col

D .grid

The .row class groups columns horizontally and manages spacing.

What happens if you put columns outside a .row in Bootstrap?

A Columns may have extra space on sides and misalign

B Columns will align perfectly

C Columns become invisible

D Columns stack vertically always

Without .row, columns lose proper negative margins and may misalign.

What does .col-12 mean in Bootstrap?

A Column is hidden

B Column takes half width of the row

C Column takes one quarter width

D Column takes full width of the row

.col-12 means the column spans all 12 parts, so full width.

How does Bootstrap's grid system help on small screens?

A It hides all columns

B It disables the grid

C It stacks columns vertically for better readability

D It makes columns wider than the screen

Bootstrap stacks columns vertically on small screens to keep content readable.

Explain how Bootstrap's row and column classes work together to create a responsive layout.

Think about how a row holds columns and how columns adjust width.

Describe why it is important to use the .row class when working with columns in Bootstrap.

Consider spacing and alignment inside containers.