Bootstrap Case Studies & Practical Application 3

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?

Accepted Answer

col-12 col-md-6 col-lg-3 on each image wrapper

Answer

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?

Accepted Answer

data-* to data-bs-*

Answer

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?

Accepted Answer

img-fluid

Answer

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?

Accepted Answer

No extra container needed — rows can nest directly inside col elements

Answer

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?

Accepted Answer

rounded-circle

Answer

The rounded-circle utility class applies border-radius: 50% to make any element circular.

Bootstrap Practice Test

Bootstrap Practice Test

Bootstrap Case Studies & Practical Application 3