Bootstrap Grid System & Responsive Layout 3

Question 1

Which Bootstrap class creates a column that spans all 12 columns, making the element full-width?

Accepted Answer

.col-12

Answer

.col-12 spans all 12 columns in the grid, making the element occupy the full width of its container row.

Question 2

Which breakpoint tier was newly introduced in Bootstrap 5 that did not exist in Bootstrap 4?

Accepted Answer

xxl

Answer

Bootstrap 5 added the 'xxl' breakpoint (≥1400px), extending the responsive tier system beyond Bootstrap 4's maximum of xl (≥1200px).

Question 3

What does the Bootstrap .container class provide compared to .container-fluid?

Accepted Answer

Responsive fixed max-widths that change at each breakpoint

Answer

.container applies responsive max-width values that increase at each breakpoint, centering content with horizontal margins, unlike .container-fluid which is always 100% wide.

Question 4

What is the correct Bootstrap markup pattern for nesting columns inside another column?

Accepted Answer

Place a .row then child .col elements inside a parent .col

Answer

Nested Bootstrap grids require a new .row inside the parent .col, then child .col elements inside that row to maintain correct padding and alignment.

Question 5

Which Bootstrap 5 class vertically centers all column items within a row?

Accepted Answer

.align-items-center

Answer

.align-items-center uses the CSS flexbox align-items property to vertically center columns on the row's cross axis.

Bootstrap Practice Test

Bootstrap Practice Test

Bootstrap Grid System & Responsive Layout 3