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.

Practice

1. What does the Bootstrap class img-thumbnail do when added to an <img> tag?

easy

A. It changes the image to grayscale.

B. It makes the image full width of the container.

C. It hides the image from view.

D. It adds a border and padding to create a small framed image.

Solution

1. Step 1: Understand the purpose of img-thumbnail

   The img-thumbnail class in Bootstrap styles images with a border and padding to look like thumbnails.

2. Step 2: Compare with other options

   Options B, C, and D describe behaviors unrelated to img-thumbnail. Only It adds a border and padding to create a small framed image. correctly describes the border and padding effect.

3. Final Answer:

   It adds a border and padding to create a small framed image. -> Option D

4. Quick Check:

   Thumbnail styling = border + padding [OK]

Hint: Remember thumbnails have a border and padding by default [OK]

Common Mistakes:

• Confusing thumbnail with full-width image
• Thinking it hides the image
• Assuming it changes image colors

2. Which of the following is the correct way to add a Bootstrap thumbnail style to an image?

easy

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

B. <img src='pic.jpg' class='img_thumb' alt='pic'>

C. <img src='pic.jpg' class='thumbnail' alt='pic'>

D. <img src='pic.jpg' class='img-thumbnailed' alt='pic'>

Solution

1. Step 1: Recall the exact Bootstrap class name

   The correct Bootstrap class for thumbnails is img-thumbnail, not any variation.

2. Step 2: Check each option's class

   <img src='pic.jpg' class='img-thumbnail' alt='pic'> uses img-thumbnail exactly. Options A, B, and D use incorrect or non-existent class names.

3. Final Answer:

   <img src='pic.jpg' class='img-thumbnail' alt='pic'> -> Option A

4. Quick Check:

   Class name must be img-thumbnail [OK]

Hint: Use exact class img-thumbnail for thumbnails [OK]

Common Mistakes:

• Misspelling the class name
• Using underscores instead of hyphens
• Omitting the class attribute

3. What will be the visual result of this HTML snippet?

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

medium

A. A small image with a gray border and padding around it.

B. A large image stretched to full container width.

C. An image with no border or padding.

D. An image that is hidden from the page.

Solution

1. Step 1: Identify the effect of img-thumbnail

   This class adds a visible border and padding, making the image look like a framed thumbnail.

2. Step 2: Understand the default size behavior

   The image size remains as the original or as set by CSS, but it gains the border and padding. It is not stretched or hidden.

3. Final Answer:

   A small image with a gray border and padding around it. -> Option A

4. Quick Check:

   Thumbnail = border + padding visible [OK]

Hint: Thumbnail means small framed image with border [OK]

Common Mistakes:

• Thinking it stretches image size
• Expecting no border or padding
• Assuming image is hidden

4. You wrote this code but the image does not show the thumbnail style:

<img src='dog.jpg' class='img_thumbnail' alt='dog'>

What is the error?

medium

A. The alt attribute is missing.

B. The class name should be img-thumbnail with a hyphen, not underscore.

C. The src attribute is incorrect.

D. The img tag must be inside a <div>.

Solution

1. Step 1: Check the class name spelling

   The class name uses an underscore img_thumbnail, but Bootstrap requires a hyphen: img-thumbnail.

2. Step 2: Verify other attributes

   The alt attribute is present, and src looks correct. The img tag does not require a div wrapper for thumbnails.

3. Final Answer:

   The class name should be img-thumbnail with a hyphen, not underscore. -> Option B

4. Quick Check:

   Class name spelling matters: hyphen, not underscore [OK]

Hint: Check class spelling carefully: hyphen, not underscore [OK]

Common Mistakes:

• Using underscore instead of hyphen in class
• Thinking alt attribute affects thumbnail style
• Believing img needs a div wrapper

5. You want to display three image thumbnails side by side, each with equal spacing and responsive sizing. Which Bootstrap classes and structure should you use?

hard

A. <div class='d-flex gap-3'><img src='1.jpg' class='img-thumbnail flex-fill' alt='1'><img src='2.jpg' class='img-thumbnail flex-fill' alt='2'><img src='3.jpg' class='img-thumbnail flex-fill' alt='3'></div>

B. <div><img src='1.jpg' class='img-thumbnail' alt='1'><img src='2.jpg' class='img-thumbnail' alt='2'><img src='3.jpg' class='img-thumbnail' alt='3'></div>

C. <div class='row'><div class='col'><img src='1.jpg' class='img-thumbnail' alt='1'></div><div class='col'><img src='2.jpg' class='img-thumbnail' alt='2'></div><div class='col'><img src='3.jpg' class='img-thumbnail' alt='3'></div></div>

D. <div class='container'><img src='1.jpg' class='img-thumbnail' alt='1'><img src='2.jpg' class='img-thumbnail' alt='2'><img src='3.jpg' class='img-thumbnail' alt='3'></div>

Solution

1. Step 1: Understand layout for side-by-side thumbnails

   Using Bootstrap grid with row and col classes places images side by side with equal width and spacing.

2. Step 2: Check each option's layout approach

   <div class='row'><div class='col'><img src='1.jpg' class='img-thumbnail' alt='1'></div><div class='col'><img src='2.jpg' class='img-thumbnail' alt='2'></div><div class='col'><img src='3.jpg' class='img-thumbnail' alt='3'></div></div> uses row and col correctly. <div class='d-flex gap-3'><img src='1.jpg' class='img-thumbnail flex-fill' alt='1'><img src='2.jpg' class='img-thumbnail flex-fill' alt='2'><img src='3.jpg' class='img-thumbnail flex-fill' alt='3'></div> uses flex but may cause uneven sizing without container. Options B and C lack layout classes for spacing and responsiveness.

3. Final Answer:

   <div class='row'><div class='col'><img src='1.jpg' class='img-thumbnail' alt='1'></div><div class='col'><img src='2.jpg' class='img-thumbnail' alt='2'></div><div class='col'><img src='3.jpg' class='img-thumbnail' alt='3'></div></div> -> Option C

4. Quick Check:

   Grid layout = row + col for equal spacing [OK]

Hint: Use Bootstrap grid (row + col) for equal side-by-side thumbnails [OK]

Common Mistakes:

• Not using grid or flex for layout
• Missing spacing between images
• Using container without layout classes