Bootstrap Grid System & Responsive Layout

Question 1

In Bootstrap's default grid system, how many columns does the layout divide into?

Accepted Answer

12

Answer

Bootstrap uses a 12-column grid system because 12 is evenly divisible by 2, 3, 4, and 6, allowing flexible layout combinations.

Question 2

Which Bootstrap class creates a full-width container that spans the entire viewport width at all breakpoints?

Accepted Answer

.container-fluid

Answer

.container-fluid creates a 100%-width container that stretches to fill the full viewport width regardless of screen size.

Question 3

What is the minimum viewport width for Bootstrap 5's 'md' (medium) breakpoint?

Accepted Answer

768px

Answer

Bootstrap 5's md breakpoint activates at viewport widths of 768px and above, sitting between sm (576px) and lg (992px).

Question 4

Which class creates a column spanning half the grid width on medium screens and larger?

Accepted Answer

.col-md-6

Answer

.col-md-6 spans 6 of 12 columns (50%) on medium screens (≥768px) and wider, stacking to full-width below that breakpoint.

Question 5

What element must directly wrap Bootstrap grid columns to ensure correct alignment and padding?

Accepted Answer

.row

Answer

.row uses negative margins to counteract column padding, so columns must be direct children of a .row element to render correctly.

Bootstrap Practice Test