Image thumbnails in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a Bootstrap thumbnail class to the image.

Bootsrap

<img src="image.jpg" alt="Sample Image" class="[1]">

Drag options to blanks, or click blank then click option'

Aimg-thumbnail

Bthumbnail

Cimg-fluid

Dimg-rounded

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'thumbnail' which is not a valid Bootstrap image class.

Using 'img-rounded' which rounds corners but does not create a thumbnail style.

The correct Bootstrap class for image thumbnails is img-thumbnail. It adds a border and padding to the image.

2fill in blank

medium

Complete the code to make the image responsive with a thumbnail style.

Bootsrap

<img src="photo.png" alt="Photo" class="img-thumbnail [1]">

Drag options to blanks, or click blank then click option'

Aimg-fluid

Bimg-responsive

Cresponsive-img

Dimg-scale

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'img-responsive' which is deprecated in Bootstrap 4+.

Using 'responsive-img' which is not a Bootstrap class.

Bootstrap 4 and later uses img-fluid to make images responsive, scaling with the parent container.

3fill in blank

hard

Fix the error in the thumbnail image code by completing the class attribute.

Bootsrap

<img src="avatar.jpg" alt="User Avatar" class="[1]">

Drag options to blanks, or click blank then click option'

Athumbnail img-fluid

Bimg-thumbnail-fluid

Cimg-thumbnail img-fluid

Dimg-thumbnail img-responsive

Attempts:

3 left

💡 Hint

Common Mistakes

Combining classes without spaces like 'img-thumbnail-fluid' which is invalid.

Using 'thumbnail' instead of 'img-thumbnail'.

The correct way is to combine img-thumbnail and img-fluid separated by a space. This applies both thumbnail styling and responsiveness.

4fill in blank

hard

Fill both blanks to create a responsive thumbnail image with alt text.

Bootsrap

<img src="landscape.jpg" alt="[1]" class="[2]">

Drag options to blanks, or click blank then click option'

ABeautiful Landscape

Bimg-thumbnail

Cimg-fluid

DLandscape Image

Attempts:

3 left

💡 Hint

Common Mistakes

Leaving alt text empty or generic like 'Landscape Image'.

Using incorrect class names like 'img-fluid' alone without thumbnail style.

The alt attribute should describe the image, e.g., 'Beautiful Landscape'. The class should be 'img-thumbnail' to style the image as a thumbnail.

5fill in blank

hard

Fill all three blanks to create a responsive thumbnail image with alt text and rounded corners.

Bootsrap

<img src="profile.png" alt="[1]" class="[2] [3]">

Drag options to blanks, or click blank then click option'

AUser Profile Picture

Bimg-thumbnail

Crounded

Dimg-fluid

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'rounded' instead of 'img-fluid' for responsiveness.

Leaving alt text empty or vague.

The alt text should describe the image, e.g., 'User Profile Picture'. The classes img-thumbnail and img-fluid make the image a responsive thumbnail. The rounded class adds rounded corners but is not required here.