Image thumbnails in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

Thumbnail Image Size with Bootstrap

You have this Bootstrap thumbnail image code:

<img src='img.jpg' class='img-thumbnail' alt='Sample'>

What will be the visual effect of the img-thumbnail class on the image?

Bootsrap

<img src='img.jpg' class='img-thumbnail' alt='Sample'>

A The image will have a small border and padding, making it look like a framed thumbnail.

B The image will have rounded corners but no border or padding.

C The image will be hidden and replaced by a placeholder icon.

D The image will be stretched to fill the entire container width without border.

💡 Hint

Think about what a thumbnail usually looks like: a small framed picture.

The Bootstrap img-thumbnail class adds a border, some padding, and rounded corners to the image, making it look like a small framed thumbnail.

❓ selector

intermediate

Bootstrap Class for Responsive Thumbnails

Which Bootstrap class should you add to an image to make it scale nicely on all screen sizes while keeping the thumbnail style?

A img-thumbnail img-fluid

B img-thumbnail img-responsive

C thumbnail-responsive

D img-responsive img-rounded

💡 Hint

Bootstrap 5 uses img-fluid for responsive images.

The img-fluid class makes images scale with the parent container. Combined with img-thumbnail, it keeps the thumbnail style and makes it responsive.

🧠 Conceptual

advanced

Accessibility for Image Thumbnails

Why is it important to include the alt attribute on thumbnail images in Bootstrap?

A It automatically resizes the image to thumbnail size.

B It provides descriptive text for screen readers, helping visually impaired users understand the image content.

C It adds a tooltip that appears on hover with the image filename.

D It changes the image border color to improve contrast.

💡 Hint

Think about users who cannot see images.

The alt attribute gives a text description of the image. Screen readers read this text aloud, making the web accessible to users with vision impairments.

❓ layout

advanced

Arranging Multiple Thumbnails with Bootstrap Grid

You want to display 4 thumbnail images side by side on large screens and stacked on small screens. Which Bootstrap classes should you use on the container and images?

A Use <code>grid</code> on container and <code>thumbnail</code> on images without columns.

B Use <code>container</code> on container and <code>col-4</code> on images without any row.

C Use <code>row</code> on container and <code>col-lg-3 col-12</code> on each image wrapper with <code>img-thumbnail img-fluid</code> on images.

D Use <code>row</code> on container and <code>col-6</code> on images with <code>img-rounded</code> class.

💡 Hint

Bootstrap grid uses rows and columns with breakpoints like lg and col-12 for full width on small screens.

Using row and columns with col-lg-3 makes 4 equal columns on large screens. col-12 makes each image full width on small screens. img-thumbnail img-fluid styles images properly.

📝 Syntax

expert

Identify the Error in Thumbnail Image Code

What error will this Bootstrap thumbnail image code cause?

<img src='photo.jpg' class='img-thumbnail img-fluid' alt>

Bootsrap

<img src='photo.jpg' class='img-thumbnail img-fluid' alt>

A The <code>alt</code> attribute is empty but valid; no error occurs.

B The image will not display because <code>alt</code> is required to have text.

C The <code>class</code> attribute is invalid because it has two classes.

D Missing value for <code>alt</code> attribute causes HTML validation error.

💡 Hint

Check how attributes are written in HTML.

The alt attribute must have a value or be written as alt="". Writing just alt without value is invalid HTML and causes validation errors.