Bootstrap Case Studies & Practical Application 3 — Questions and Answers
Question 1: A developer needs to build a responsive image gallery where each row shows 4 images on large screens, 2 on medium, and 1 on small. Which class combination achieves this?
- col-12 col-md-6 col-lg-3 on each image wrapper (Correct answer)
- col-sm-1 col-md-2 col-lg-4 on each image wrapper
- col-4 col-6 col-12 on each image wrapper
- col-lg-4 col-md-2 col-sm-1 on each image wrapper
Correct answer: col-12 col-md-6 col-lg-3 on each image wrapper
col-12 gives full width on small, col-md-6 gives 2 per row on medium, and col-lg-3 gives 4 per row on large screens.
Question 2: A team is migrating from Bootstrap 4 to Bootstrap 5. Which data attribute prefix change must they update throughout their HTML?
- data-* to data-bs-* (Correct answer)
- data-toggle to data-target
- bs-data-* to data-*
- data-bs-* to data-*
Correct answer: data-* to data-bs-*
Bootstrap 5 namespaced all data attributes with data-bs- to avoid conflicts with other libraries that use generic data-* attributes.
Question 3: A landing page needs a full-width hero image that scales with the viewport. Which Bootstrap utility class makes an image responsive and full-width?
- img-fluid (Correct answer)
- img-responsive
- img-full
- img-stretch
Correct answer: img-fluid
img-fluid applies max-width: 100% and height: auto, making images scale within their parent container.
Question 4: A dashboard uses Bootstrap's grid inside a card. The inner grid is not aligning properly. What container class should wrap the inner row?
- No extra container needed — rows can nest directly inside col elements (Correct answer)
- container-inner wrapping the nested row
- container-fluid on the card body
- nested-grid on the parent column
Correct answer: No extra container needed — rows can nest directly inside col elements
Bootstrap allows nesting rows directly inside col elements without an additional container, as the col's negative margins handle alignment.
Question 5: A user profile page needs an avatar image displayed as a circle. Which Bootstrap utility achieves this without custom CSS?
- rounded-circle (Correct answer)
- img-circle
- border-radius-full
- img-round
Correct answer: rounded-circle
The rounded-circle utility class applies border-radius: 50% to make any element circular.
Question 6: A web app needs a fixed sidebar that doesn't scroll with content. Which Bootstrap positioning utility achieves this?
- position-fixed with top-0 and start-0 (Correct answer)
- position-sticky with offset-top-0
- fixed-sidebar class on the nav element
- position-absolute with left-0
Correct answer: position-fixed with top-0 and start-0
position-fixed removes the element from the document flow and fixes it relative to the viewport, with top-0 and start-0 placing it at the top-left.
Question 7: A news site uses Bootstrap's list group to show article links. How is a list group item made active to indicate the current page?
- Add the active class to the list-group-item element (Correct answer)
- Add selected class to the list-group-item element
- Add list-group-item-active modifier class
- Add aria-current="true" only — Bootstrap reads this for active styling
Correct answer: Add the active class to the list-group-item element
The active class on a list-group-item applies Bootstrap's highlighted styling for the currently selected item.
Bootstrap Case Studies & Practical Application 3
A developer needs to build a responsive image gallery where each row shows 4 images on large screens, 2 on medium, and 1 on small.
Which class combination achieves this?