Bootstrap Grid System & Responsive Layout 2 — Questions and Answers
Question 1: In Bootstrap 5, which column class applies to ALL screen sizes including extra-small (xs)?
- .col-xs-*
- .col-* (Correct answer)
- .col-sm-*
- .col-all-*
Correct answer: .col-*
Bootstrap 5 dropped the explicit 'xs' prefix; .col-* (no breakpoint infix) applies from the smallest screen size upward.
Question 2: What is the minimum viewport width for Bootstrap 5's 'xl' breakpoint?
- 992px
- 1200px (Correct answer)
- 1400px
- 1600px
Correct answer: 1200px
Bootstrap 5's xl breakpoint activates at 1200px and above, sitting between lg (992px) and the new xxl (1400px) breakpoint.
Question 3: Which Bootstrap 5 class removes all gutters from a row, eliminating horizontal padding on columns?
- .row .no-gutters
- .row .g-0 (Correct answer)
- .row .gutter-0
- .row .p-0
Correct answer: .row .g-0
Bootstrap 5 replaced the old .no-gutters class with .g-0, which sets gutter width to 0 using the new gutter utility system.
Question 4: How many columns does .col-lg-4 span in Bootstrap's 12-column grid?
- 2
- 3
- 4 (Correct answer)
- 6
Correct answer: 4
.col-lg-4 spans exactly 4 out of 12 columns on large (≥992px) screens and wider, occupying one-third of the row width.
Question 5: What happens when multiple .col elements (without a number) are placed in the same Bootstrap row?
- Each spans all 12 columns
- Each defaults to 6 columns
- They share the available space equally (Correct answer)
- They hide on small screens
Correct answer: They share the available space equally
.col without a number creates equal-width columns that automatically divide the row's available width equally among all sibling .col elements.
Question 6: Which Bootstrap 5 utility class adds gutters in BOTH the horizontal and vertical directions?
- .gx-3
- .gy-3
- .gap-3
- .g-3 (Correct answer)
Correct answer: .g-3
.g-3 adds gutters in both directions, while .gx-3 is horizontal-only and .gy-3 is vertical-only in Bootstrap 5's gutter system.
Question 7: What is the minimum viewport width for Bootstrap 5's 'xxl' breakpoint?
- 1200px
- 1400px (Correct answer)
- 1600px
- 1800px
Correct answer: 1400px
Bootstrap 5's xxl breakpoint (the largest tier) activates at 1400px and above, making it the only major breakpoint added compared to Bootstrap 4.
Bootstrap Grid System & Responsive Layout 2
In Bootstrap 5, which column class applies to ALL screen sizes including extra-small (xs)?