Theory
The poster that broke the column
Back in Unit 1 you set the FestConnect poster to width="600". Inside a Bootstrap column on a phone, 600 pixels is wider than the screen, so the image pokes out and a horizontal scrollbar appears.
You do not want to hand-set pixel widths for every screen. Bootstrap gives image classes that make pictures fit their container automatically, plus a tidy way to sit a small image next to its text, the layout every event card uses.
Theory
A photo that resizes to its frame
A printed photo is a fixed size: too big for a small frame and it will not fit. img-fluid is like a magical photo that shrinks to whatever frame you drop it in, never spilling over the edges, while keeping its proportions. You stop measuring frames; you just say 'fit', and the picture obeys the column it lands in.
Theory
The image utilities
- `img-fluid`: the picture scales down to fit its container (max-width 100%, height auto). This is the responsive image class.
- `img-thumbnail`: a light bordered, rounded frame.
- `rounded`, `rounded-circle`, `rounded-pill`: shape the corners (circle is great for avatars).
- Centering:
mx-auto d-block.
A media object is a small image beside a block of text. In Bootstrap 5 you build it with flex utilities (d-flex) or a card, since the old .media class was removed.
Practical
A responsive poster and an event media object
<!-- responsive: fits any column, no overflow -->
<img src="images/fest-poster.jpg" class="img-fluid" alt="TechFest 2026 poster">
<!-- media object: thumbnail left, text right (flex in BS5) -->
<div class="d-flex">
<img src="images/robotics.jpg" class="rounded me-3"
width="64" height="64" alt="Robotics event">
<div>
<h5>Robotics Challenge</h5>
<p>Build and battle line-follower bots. 12 March, 10 am.</p>
</div>
</div>This example runs in Gri-Learn on the web, where you can edit it and see the output.
Think first
Fix the overflow
Your <img width="600"> poster overflows its column on a phone. Which single Bootstrap class fixes it, and what two CSS rules does that class actually apply under the hood?
Show the answer
Add `img-fluid`. Under the hood it applies max-width: 100% (never wider than its container) and height: auto (keep the aspect ratio). So on a 360px phone the poster caps at 360px and its height scales down proportionally, no scrollbar. You can even drop the fixed width="600" once img-fluid is in charge of sizing.
Quiz
You want circular profile photos for the FestConnect organiser team. Which class shapes a square image into a circle?
- rounded-circle
- img-fluid
- img-thumbnail
- btn-circle
Show the answer
rounded-circle
rounded-circle rounds the corners all the way into a circle (best on a square image), so it makes a round avatar (A). img-fluid (B) only handles responsive sizing, not shape. img-thumbnail (C) adds a square bordered frame. btn-circle (D) is not a Bootstrap class at all. Pair rounded-circle with a square source image or it becomes an oval.
Watch out
Image utility traps
1. Overflowing images on mobile: you forgot img-fluid. It is the single most common Bootstrap image fix.
2. Reaching for the old `.media` class: it was removed in Bootstrap 5. Use d-flex or a card for the image-beside-text layout.
3. Dropping src and alt: Bootstrap classes only style the image; the plain-HTML essentials from Unit 1 (a real src and meaningful alt) are still required.
Theory
These become cards
The media object here is the seed of a Bootstrap card, a bordered box with an image, title, text, and buttons. FestConnect's event listing is a grid (Unit 2 grid lesson) of these cards. And when there are more events than fit on one screen, the next lesson, pagination, splits them into numbered pages.
Summary
Key takeaways
- img-fluid makes an image scale to its container (max-width 100%, height auto): the key responsive image class.
- img-thumbnail adds a bordered frame; rounded / rounded-circle / rounded-pill shape the corners.
- A media object (image beside text) is built with d-flex or a card in Bootstrap 5 (the old .media class was removed).
- Bootstrap styles the image but src and alt from Unit 1 are still required.
- Overflowing images on mobile almost always mean a missing img-fluid.
- Memory hook: a photo that resizes to its frame.