Image thumbnails in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is an image thumbnail in web development?

An image thumbnail is a smaller version of a larger image. It helps pages load faster and shows a preview without using much space.

beginner

How do you create a thumbnail using Bootstrap?

Use the <code>img-thumbnail</code> class on an <code>&lt;img&gt;</code> tag. This adds a border and padding to make the image look like a thumbnail.

intermediate

Why should thumbnails be responsive?

Responsive thumbnails adjust their size on different screen sizes, so they look good on phones, tablets, and desktops without breaking the layout.

beginner

What Bootstrap class helps make images responsive?

The <code>img-fluid</code> class makes images scale nicely to the parent container's width, keeping them responsive.

beginner

How can you add accessibility to image thumbnails?

Add descriptive alt text to the <img> tag so screen readers can explain the image to users who cannot see it.

Which Bootstrap class adds a border and padding to create a thumbnail effect?

A img-thumbnail

B img-responsive

C img-rounded

D img-fluid

The img-thumbnail class adds a border and padding to make the image look like a thumbnail.

What class should you add to make an image scale nicely on all screen sizes?

A img-responsive

B img-thumbnail

C img-fluid

D img-rounded

The img-fluid class makes images responsive by scaling them to the width of their container.

Why use thumbnails instead of full-size images on a webpage?

A To save space and load faster

B To remove image borders

C To make images blurry

D To make the page load slower

Thumbnails save space and help pages load faster by showing smaller versions of images.

Which attribute is important for accessibility on image thumbnails?

A title

B src

C href

D alt

The alt attribute provides descriptive text for screen readers.

If you want a thumbnail image to adjust size on mobile devices, what should you do?

A Add <code>img-thumbnail</code> only

B Add both <code>img-thumbnail</code> and <code>img-fluid</code>

C Add <code>img-fluid</code> only

D No classes needed

Using both img-thumbnail and img-fluid makes the image look like a thumbnail and stay responsive.

Explain how to create a responsive image thumbnail using Bootstrap and why it is useful.

Think about combining style and responsiveness classes.

Describe how to make image thumbnails accessible for all users.

Accessibility means helping users who rely on screen readers or have vision challenges.