Bootstrap Grid System & Responsive Layout 1 — Questions and Answers
Question 1: In Bootstrap's default grid system, how many columns does the layout divide into?
- 10
- 12 (Correct answer)
- 16
- 24
Correct answer: 12
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?
- .container
- .container-lg
- .container-fluid (Correct answer)
- .container-full
Correct answer: .container-fluid
.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?
- 576px
- 768px (Correct answer)
- 992px
- 1200px
Correct answer: 768px
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?
- .col-sm-6
- .col-md-6 (Correct answer)
- .col-6
- .col-lg-6
Correct answer: .col-md-6
.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?
- .container
- .wrapper
- .grid
- .row (Correct answer)
Correct answer: .row
.row uses negative margins to counteract column padding, so columns must be direct children of a .row element to render correctly.
Question 6: In Bootstrap 5, which class makes a column automatically size to fit its content's natural width?
- .col-auto (Correct answer)
- .col-fit
- .col-content
- .col-shrink
Correct answer: .col-auto
.col-auto sizes a column based on the natural width of its content rather than distributing equal space across siblings.
Question 7: How would you offset a Bootstrap 5 column by 3 columns to the right?
- .col-offset-3
- .push-3
- .offset-3 (Correct answer)
- .margin-left-3
Correct answer: .offset-3
Bootstrap 5 uses .offset-{n} to add a left margin equal to n columns, pushing the element right without Bootstrap 3's .col-offset- prefix.
Bootstrap Grid System & Responsive Layout 1
In Bootstrap's default grid system, how many columns does the layout divide into?