Responsive images in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the image responsive using Bootstrap classes.

Bootsrap

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

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

Aimg-fluid

Bimg-scale

Cresponsive-img

Dimg-responsive

Attempts:

3 left

💡 Hint

Common Mistakes

Using outdated or incorrect class names like 'img-responsive' which is from older Bootstrap versions.

Forgetting to add the class at all.

Bootstrap uses the img-fluid class to make images scale nicely to the parent container.

2fill in blank

medium

Complete the code to add alternative text for accessibility.

Bootsrap

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

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

Aimage

Bpicture

CA beautiful landscape

Dphoto

Attempts:

3 left

💡 Hint

Common Mistakes

Using vague alt text like 'image' or 'photo' which doesn't help screen readers.

Leaving the alt attribute empty or missing.

Alternative text should describe the image meaningfully for screen readers. 'A beautiful landscape' is descriptive and helpful.

3fill in blank

hard

Fix the error in the code to correctly make the image responsive.

Bootsrap

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

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

Aimg-fluid

Bimg-responsive

Cresponsive

Dfluid-img

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'img-responsive' which is deprecated in newer Bootstrap versions.

Using non-existent classes like 'responsive' or 'fluid-img'.

In Bootstrap 4 and later, the correct class for responsive images is img-fluid. 'img-responsive' is from Bootstrap 3 and will not work properly.

4fill in blank

hard

Fill both blanks to create a responsive image with rounded corners.

Bootsrap

<img src="avatar.png" class="[1] [2]" alt="User avatar">

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

Aimg-fluid

Brounded

Cimg-rounded

Dresponsive

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'img-rounded' which is not a Bootstrap 4+ class.

Forgetting to include both classes.

Use img-fluid to make the image responsive and rounded to add rounded corners in Bootstrap.

5fill in blank

hard

Fill all three blanks to create a responsive, rounded, and shadowed image.

Bootsrap

<img src="profile.jpg" class="[1] [2] [3]" alt="Profile picture">

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

Aimg-fluid

Brounded

Cshadow

Dimg-responsive

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'img-responsive' instead of 'img-fluid'.

Missing one or more classes for the desired effects.

Combine img-fluid for responsiveness, rounded for rounded corners, and shadow for a subtle shadow effect in Bootstrap.