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.

Practice

1. What is the main purpose of a .row in Bootstrap's grid system?

easy

A. To add background colors to sections

B. To add padding around the entire page

C. To create buttons with consistent styles

D. To group columns horizontally and manage their layout

Solution

1. Step 1: Understand the role of .row

   The .row class in Bootstrap groups columns horizontally to create a structured layout.

2. Step 2: Differentiate from other classes

   Other classes like padding or buttons serve different purposes, not layout grouping.

3. Final Answer:

   To group columns horizontally and manage their layout -> Option D

4. Quick Check:

   Row groups columns [OK]

Hint: Rows always group columns horizontally [OK]

Common Mistakes:

• Thinking rows add padding or style
• Confusing rows with buttons or backgrounds
• Assuming rows create vertical stacks

2. Which of the following is the correct syntax to create a row with three equal columns in Bootstrap?

easy

A.

B.

C.

D.

Solution

1. Step 1: Identify correct Bootstrap column syntax

   Bootstrap uses col classes inside a row to create equal-width columns.

2. Step 2: Check each option

   uses col inside row, which creates three equal columns automatically.

3. Final Answer:

   <div class='row'><div class='col'></div><div class='col'></div><div class='col'></div></div> -> Option A

4. Quick Check:

   Use col inside row for equal columns [OK]

Hint: Use col inside row for equal columns [OK]

Common Mistakes:

• Using container instead of row for columns
• Using non-Bootstrap class names like column
• Using fixed column sizes unnecessarily

3. What will be the visual layout result of this code?

<div class='row'>
  <div class='col-6'>Left</div>
  <div class='col-6'>Right</div>
</div>

medium

A. Two columns side by side, each taking half the row width

B. Two columns stacked vertically, each taking full width

C. One column taking full width, the other hidden

D. Columns overlap each other in the same space

Solution

1. Step 1: Understand col-6 in Bootstrap grid

   Each col-6 takes 6 of 12 parts, so half the row width.

2. Step 2: Visualize the layout

   Two col-6 columns inside a row appear side by side, each half width.

3. Final Answer:

   Two columns side by side, each taking half the row width -> Option A

4. Quick Check:

   col-6 + col-6 = two halves side by side [OK]

Hint: Sum of column numbers should be 12 for full row width [OK]

Common Mistakes:

• Thinking columns stack vertically by default
• Assuming columns overlap without floats or flex
• Confusing col-6 with full width

4. Identify the error in this Bootstrap grid code:

<div class='row'>
  <div class='col-8'>Content</div>
  <div class='col-6'>Sidebar</div>
</div>

medium

A. Using col-8 and col-6 is invalid syntax

B. Missing .container wrapper around the row

C. The total column width exceeds 12, causing layout issues

D. The row class should be column

Solution

1. Step 1: Calculate total column widths

   col-8 + col-6 = 14, which is more than 12 grid units.

2. Step 2: Understand Bootstrap grid limits

   Bootstrap grid rows should have columns summing to 12 or less to avoid wrapping or overflow.

3. Final Answer:

   The total column width exceeds 12, causing layout issues -> Option C

4. Quick Check:

   Sum of columns > 12 breaks layout [OK]

Hint: Column widths in a row must sum to 12 or less [OK]

Common Mistakes:

• Ignoring total column width sum
• Thinking container is mandatory for rows
• Confusing class names like column instead of row

5. You want a layout with 4 columns where the first takes 3 parts, the second 3 parts, the third 4 parts, and the last 2 parts of the row width. Which Bootstrap classes correctly achieve this?

hard

A. col-4, col-3, col-3, col-2

B. col-3, col-3, col-4, col-2

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

D. col-2, col-3, col-4, col-3

Solution

1. Step 1: Check the sum of column widths

   3 + 3 + 4 + 2 = 12, which fits perfectly in Bootstrap's 12-grid system.

2. Step 2: Match the order of columns to the question

   The first column should be 3, second 3, third 4, and last 2, matching col-3, col-3, col-4, col-2 exactly.

3. Final Answer:

   col-3, col-3, col-4, col-2 -> Option B

4. Quick Check:

   Sum 12 and order match [OK]

Hint: Sum columns to 12 and keep order as needed [OK]

Common Mistakes:

• Choosing columns that sum more or less than 12
• Mixing column order
• Using equal columns when specific widths are needed