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-full

Answer

.col-100

Answer

.col-all

Question 2

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

Accepted Answer

xxl

Answer

xs

Answer

sm

Answer

xl

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

Full viewport width at all sizes

Answer

A 100% height wrapper

Answer

A flexbox row layout

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

Place .col directly inside another .col

Answer

Use the .grid-nested class on the inner columns

Answer

Column nesting requires .container-nested as a wrapper

Question 5

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

Accepted Answer

.align-items-center

Answer

.justify-content-center

Answer

.align-content-center

Answer

.row-align-center

Question 6

Which approach creates three equal-width columns with the LEAST markup needed on individual column elements?

Accepted Answer

Adding .row-cols-3 to the row element

Answer

Adding .col-4 to each column element

Answer

Adding .col to each column element

Answer

Adding .container-cols-3 to the container

Question 7

What is the primary purpose of Bootstrap's .order-* utility classes on grid columns?

Accepted Answer

Visually reorder columns without changing HTML source order

Answer

Set the CSS z-index stacking order

Answer

Define the animation sequence for column transitions

Answer

Set grid column rendering priority in the browser