0
0
Bootsrapmarkup~30 mins

Image thumbnails in Bootsrap - Mini Project: Build & Apply

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Image thumbnails
📖 Scenario: You are creating a simple photo gallery webpage for a travel blog. You want to show small clickable images (thumbnails) that link to the full-size photos.
🎯 Goal: Build a webpage using Bootstrap that displays three image thumbnails side by side. Each thumbnail should be a smaller version of the image with a border and some spacing. The thumbnails should be responsive and accessible.
📋 What You'll Learn
Use Bootstrap 5 classes to style the thumbnails
Display exactly three images as thumbnails
Each thumbnail should have a border and some padding
Images should be responsive and scale on smaller screens
Use semantic HTML and include alt text for accessibility
💡 Why This Matters
🌍 Real World
Image thumbnails are common on websites like photo galleries, e-commerce product listings, and portfolios to show small previews that link to larger images.
💼 Career
Knowing how to use Bootstrap to create responsive image thumbnails is useful for front-end web developers building user-friendly and visually appealing websites.
Progress0 / 4 steps
1
Create the HTML skeleton with Bootstrap CSS link
Write the basic HTML5 structure for a webpage with lang="en". Include the <head> section with <meta charset="UTF-8">, viewport meta tag, and link to Bootstrap 5 CSS from the official CDN. Add an empty <body> section.
Bootsrap
Need a hint?

Remember to include the Bootstrap CSS link inside the <head> section for styling.

2
Add a container and row for thumbnails
Inside the <body>, add a Bootstrap <div> with class container. Inside it, add a <div> with class row to hold the thumbnails in a horizontal layout.
Bootsrap
Need a hint?

Use Bootstrap's container and row classes to create a responsive layout for the thumbnails.

3
Add three thumbnail images with Bootstrap classes
Inside the row div, add three div elements each with class col-4. Inside each, add an <img> tag with class img-thumbnail. Use these exact image URLs for the src attributes:
1. https://via.placeholder.com/150?text=Photo+1
2. https://via.placeholder.com/150?text=Photo+2
3. https://via.placeholder.com/150?text=Photo+3
Also add descriptive alt text for each image: Photo 1 thumbnail, Photo 2 thumbnail, and Photo 3 thumbnail respectively.
Bootsrap
Need a hint?

Use Bootstrap's img-thumbnail class on each <img> to get the border and padding. Use col-4 to split the row into three equal parts.

4
Make thumbnails link to full-size images
Wrap each <img> inside an <a> tag that links to the full-size image URL. Use these URLs for the href attributes:
1. https://via.placeholder.com/600?text=Photo+1+Full
2. https://via.placeholder.com/600?text=Photo+2+Full
3. https://via.placeholder.com/600?text=Photo+3+Full
Also add target="_blank" to each <a> so the full image opens in a new tab.
Bootsrap
Need a hint?

Wrap each thumbnail image in an <a> tag with the correct href and target="_blank" to open the full image in a new tab.