Bootstrap Lesson 7 of 19
Bootstrap Images
Learn every Bootstrap image class — make images responsive with img-fluid, add rounded corners, create perfect circles for profile photos, style thumbnails, control alignment, add borders and shadows, and build complete image galleries.
Bootstrap Course
In This Lesson
- What are Bootstrap Images?
- Responsive — img-fluid
- Rounded Corners
- Circular Images
- Image Thumbnails
- Image Alignment
- Borders
- Shadows
- Combined Styling
- Image Gallery
- Common Mistakes
- Try It
- FAQ
Progress0/19
Images break more layouts than almost any other element. A missing img-fluid class causes images to overflow containers on mobile. A rectangular photo with rounded-circle turns into an egg. Learn these classes properly once and your images will always look right.
What You'll Learn
Make images responsive with img-fluid
Add rounded corners and full circles
Create thumbnail-style framed images
Align images left, right, and center
Add borders and coloured outlines
Apply shadow effects for depth
Combine multiple classes for pro results
Build a responsive 3-column image gallery
What Are Bootstrap Images?
Bootstrap image classes are simple CSS utilities you add to a standard HTML <img> element. They handle responsiveness, shape, border, alignment, and shadow — all without writing a single line of custom CSS.
The classes work by overriding specific CSS properties on your image. Because they're part of Bootstrap's stylesheet, they're consistent, cross-browser compatible, and take seconds to implement.
Responsive by Default
img-fluid makes images scale to fit any container on any screen size.
Flexible Shapes
Square, rounded, or perfect circle — one class changes the entire shape.
Zero Custom CSS
All styling done with class names — no stylesheet edits needed.
Stackable Classes
Combine img-fluid, rounded, shadow, and border on a single image.
Common real-world uses
Profile Avatars
Circle images for user accounts and team bios
Image Galleries
Responsive thumbnail grids for portfolios
Product Images
E-commerce product cards with bordered images
Blog Thumbnails
Featured images for blog post listings
Testimonials
Customer photos with circular crop styling
Hero Banners
Full-width responsive header images
Responsive Images — img-fluid
The img-fluid class is the most important Bootstrap image class. It makes your image automatically resize to fit its container — never overflowing on small screens. TipsInLearning recommends applying this to almost every image you use.
What img-fluid does under the hood
The class applies three CSS rules:
CSS — What Bootstrap img-fluid applies
/* This is what Bootstrap's img-fluid class does internally */ .img-fluid { max-width: 100%; /* never exceeds its container */ height: auto; /* scales proportionally */ }
HTML — Responsive Image with img-fluid
<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body class="p-4"> <!-- This image will never overflow its container --> <img src="https://picsum.photos/800/400" class="img-fluid" alt="Responsive image example — TipsInLearning" > </body> </html>
TipsInLearning tip: Always use img-fluid as your default. The only time you don't need it is when you've set a fixed pixel width on the image itself and intentionally don't want it to scale down.
Rounded Corners
The rounded class adds smooth curved corners to your images. Bootstrap 5 provides a full range of rounding levels so you can pick exactly how much curve you want.
| Class | Effect | Border Radius |
|---|---|---|
| rounded-0 | No rounding — sharp corners | 0 |
| rounded-1 | Very slight rounding | 0.25rem |
| rounded | Standard Bootstrap rounding | 0.375rem |
| rounded-2 | Medium rounding | 0.5rem |
| rounded-3 | More prominent rounding | 0.75rem |
| rounded-4 | Large radius | 1rem |
| rounded-5 | Very large radius | 2rem |
| rounded-pill | Fully pill-shaped (huge radius) | 50rem |
HTML — Rounded Corner Examples
<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body class="p-4 d-flex gap-3 flex-wrap align-items-start"> <!-- No rounding --> <img src="https://picsum.photos/150" class="rounded-0" alt="No rounding"> <!-- Standard rounding --> <img src="https://picsum.photos/150" class="rounded" alt="Rounded"> <!-- Large rounding --> <img src="https://picsum.photos/150" class="rounded-4" alt="Rounded-4"> </body> </html>
Circular Images
The rounded-circle class applies a 50% border radius, turning any square image into a perfect circle. This is one of the most used Bootstrap image classes — you'll see it on almost every team page, testimonials section, and user profile.
Important: The source image must be square (equal width and height) to produce a perfect circle. If your image is rectangular, rounded-circle will turn it into an oval/ellipse instead. Crop your images to a square first.
HTML — Circular Profile Image
<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body class="p-5 text-center"> <!-- Square image + rounded-circle = perfect circle --> <img src="https://picsum.photos/200" class="rounded-circle" width="150" height="150" alt="Team member — TipsInLearning" > <h5 class="mt-3">Jane Smith</h5> <p class="text-muted">Lead Developer</p> </body> </html>
Image Thumbnails
The img-thumbnail class adds a visible border, 0.25rem of padding, and rounded corners — giving images a framed, gallery-style look. It's responsive too, so it behaves like img-fluid inside its container.
What img-thumbnail adds
Border
1px solid light gray border all the way around the image.
Padding
0.25rem of space inside the border, separating it from the image.
Rounded Corners
Standard Bootstrap border radius on all four corners.
Responsive
max-width: 100% applied — scales down on small screens.
HTML — Image Thumbnail
<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body class="p-4"> <!-- Adds border + padding + rounded corners --> <img src="https://picsum.photos/300/200" class="img-thumbnail" alt="Image thumbnail — TipsInLearning" > </body> </html>
Image Alignment
Control where your image sits on the page using Bootstrap's float and margin utilities. Each method suits a different layout scenario.
| Classes | Position | Best Used For |
|---|---|---|
| float-start | Left — text wraps to the right | Article images with flowing text |
| float-end | Right — text wraps to the left | Pull quotes and side images |
| mx-auto d-block | Centered horizontally | Standalone centered images |
| d-flex justify-content-center on parent | Centered via flex | Centering within a container |
HTML — Image Alignment Examples
<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body class="container py-4"> <!-- Left aligned — text wraps right --> <img src="https://picsum.photos/150" class="img-fluid float-start me-3 mb-2 rounded" alt="Left"> <p>This text wraps to the right of the left-aligned image using float-start. Add me-3 for spacing between the image and text.</p> <div class="clearfix"></div> <!-- Centered image --> <img src="https://picsum.photos/300/150" class="img-fluid mx-auto d-block rounded mt-4" alt="Centered"> </body> </html>
Clearfix matters with floats. When you use float-start or float-end, always add a <div class="clearfix"></div> after the text block. This prevents the float from bleeding into the next section of your page.
Image Borders
Bootstrap's border utilities let you add custom outlines to images. Combine border with colour and width classes to create eye-catching framed images.
HTML — Border Variations
<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body class="p-4 d-flex gap-3 flex-wrap"> <!-- Default gray border --> <img src="https://picsum.photos/140" class="border border-3 rounded" alt="Gray border"> <!-- Primary (blue) border --> <img src="https://picsum.photos/140" class="border border-3 border-primary rounded" alt="Blue border"> <!-- Success (green) border --> <img src="https://picsum.photos/140" class="border border-3 border-success rounded" alt="Green border"> <!-- Danger (red) border --> <img src="https://picsum.photos/140" class="border border-3 border-danger rounded" alt="Red border"> </body> </html>
Image Shadows
Bootstrap's shadow utilities add a CSS box-shadow to your images. Shadows create depth and make images pop off the background — especially effective on white or light-colored pages.
| Class | Shadow Size | Best Used For |
|---|---|---|
| shadow-none | No shadow (removes existing) | Explicitly disabling shadows |
| shadow-sm | Subtle, close shadow | Cards, inline images |
| shadow | Medium standard shadow | Product images, portraits |
| shadow-lg | Large, deep shadow | Hero images, featured items |
HTML — Shadow Size Comparison
<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body class="p-5 d-flex gap-4 flex-wrap"> <img src="https://picsum.photos/150" class="rounded shadow-sm" alt="Small shadow"> <img src="https://picsum.photos/150" class="rounded shadow" alt="Standard shadow"> <img src="https://picsum.photos/150" class="rounded shadow-lg" alt="Large shadow"> </body> </html>
Combined Image Styling
The real power of Bootstrap images is combining multiple classes. Stack as many as you need on a single <img> element — they don't conflict and produce a polished, professional result with zero custom CSS.
HTML — Profile Card with Combined Image Classes
<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body class="p-5 bg-light d-flex gap-4 flex-wrap"> <!-- Profile card: circle + shadow + border --> <div class="card text-center p-4" style="width:200px"> <img src="https://picsum.photos/120" class="rounded-circle shadow border border-3 border-primary mx-auto mb-3" width="100" height="100" alt="TipsInLearning Team" > <h6>Alex Johnson</h6> <small class="text-muted">UI Designer</small> </div> <!-- Product card: fluid + rounded + shadow-lg --> <div class="card" style="width:220px"> <img src="https://picsum.photos/220/160" class="img-fluid rounded-top shadow-lg" alt="Product image" > <div class="card-body"> <h6>Product Title</h6> <p class="text-muted small mb-0">$29.99</p> </div> </div> </body> </html>
Responsive Image Gallery
Combine Bootstrap's grid system with image classes to build a fully responsive image gallery. Use g-3 on the row for gap spacing between items. The gallery automatically stacks to one column on mobile.
HTML — 3-Column Responsive Image Gallery
<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body class="container py-5"> <h2 class="mb-4 text-center">TipsInLearning Gallery</h2> <!-- 3 cols on md+, 2 cols on sm, 1 col on mobile --> <div class="row g-3"> <div class="col-12 col-sm-6 col-md-4"> <img src="https://picsum.photos/400/250?random=1" class="img-thumbnail img-fluid" alt="Gallery image 1"> </div> <div class="col-12 col-sm-6 col-md-4"> <img src="https://picsum.photos/400/250?random=2" class="img-thumbnail img-fluid" alt="Gallery image 2"> </div> <div class="col-12 col-sm-6 col-md-4"> <img src="https://picsum.photos/400/250?random=3" class="img-thumbnail img-fluid" alt="Gallery image 3"> </div> <div class="col-12 col-sm-6 col-md-4"> <img src="https://picsum.photos/400/250?random=4" class="img-thumbnail img-fluid" alt="Gallery image 4"> </div> <div class="col-12 col-sm-6 col-md-4"> <img src="https://picsum.photos/400/250?random=5" class="img-thumbnail img-fluid" alt="Gallery image 5"> </div> <div class="col-12 col-sm-6 col-md-4"> <img src="https://picsum.photos/400/250?random=6" class="img-thumbnail img-fluid" alt="Gallery image 6"> </div> </div> </body> </html>
Common Mistakes
Forgetting img-fluid on images inside containers
Without img-fluid, a large image overflows its parent container on small screens and breaks the layout. This is the single most common Bootstrap image mistake. Make img-fluid your default — only remove it when you explicitly want a fixed-size image.
Without img-fluid, a large image overflows its parent container on small screens and breaks the layout. This is the single most common Bootstrap image mistake. Make img-fluid your default — only remove it when you explicitly want a fixed-size image.
Using rounded-circle on a rectangular image
rounded-circle applies border-radius: 50%. On a 300×200 image that produces an oval, not a circle. Always use a square image (same width and height) for perfect circular results. Set both width and height attributes explicitly.
rounded-circle applies border-radius: 50%. On a 300×200 image that produces an oval, not a circle. Always use a square image (same width and height) for perfect circular results. Set both width and height attributes explicitly.
Floating images without clearfix
When you use float-start or float-end, the next sibling elements wrap around the floated image. If you don't add <div class="clearfix"></div> after your content block, the float bleeds into the sections below it and causes major layout issues.
When you use float-start or float-end, the next sibling elements wrap around the floated image. If you don't add <div class="clearfix"></div> after your content block, the float bleeds into the sections below it and causes major layout issues.
Missing alt attributes
Every Bootstrap image — or any image — must have an alt attribute. It describes the image for screen readers and appears as fallback text if the image fails to load. It also helps TipsInLearning's own SEO. Empty alt="" is acceptable for decorative images, but never omit the attribute entirely.
Every Bootstrap image — or any image — must have an alt attribute. It describes the image for screen readers and appears as fallback text if the image fails to load. It also helps TipsInLearning's own SEO. Empty alt="" is acceptable for decorative images, but never omit the attribute entirely.
Challenge — Practice Bootstrap Images
1Add an image to your page with img-fluid — resize your browser window to confirm it scales correctly on mobile sizes
2Create a team member card: use rounded-circle with a square image (set equal width and height), then add a shadow and a coloured border-primary
3Build a 3-image row using the grid system (col-md-4) and apply img-thumbnail to each — add g-3 to the row for spacing
4Add a left-floated image next to a paragraph of text using float-start me-3 — then add <div class="clearfix"></div> after the paragraph
5Try combining img-fluid rounded-4 shadow-lg border border-2 border-success on a single image — see how stackable Bootstrap classes are
Lesson Summary — Bootstrap Images
1img-fluid — makes images responsive, max-width:100%, height:auto. Use by default.
2rounded / rounded-{n} — adds curved corners; rounded-circle makes perfect circles from square images
3img-thumbnail — adds border + padding + rounded corners; built-in responsiveness included
4float-start / float-end / mx-auto d-block — control left, right, and center alignment
5border + border-{color} — add coloured outlines; shadow / shadow-lg add depth
6Always include alt attributes — required for accessibility and SEO. Never omit them.
Questions About Bootstrap Images
The questions TipsInLearning students ask most about Bootstrap image classes:
What does img-fluid do in Bootstrap?
The img-fluid class applies max-width: 100% and height: auto to the image. This means the image will never exceed the width of its container and will always scale down proportionally on smaller screens. Without it, large images can overflow their container and break your layout on mobile — TipsInLearning sees this as the most common image issue from beginners.
How do I make circular images in Bootstrap?
Use the rounded-circle class on your <img> element. The class applies border-radius: 50%. For a perfect circle (not an oval), your source image must be square — equal width and height. Always set both the width and height attributes on the image element itself to ensure the dimensions are equal.
What is the difference between rounded and img-thumbnail?
rounded only adds curved corners with no other visual change. img-thumbnail adds rounded corners plus a visible 1px border and 0.25rem of padding inside the border — making the image look like a traditional framed thumbnail with a white mat around it. Use rounded when you want just the shape, and img-thumbnail when you want a gallery frame effect.
How do I center an image in Bootstrap?
The most reliable way is to add both mx-auto and d-block to the image: mx-auto sets equal auto margins on both sides, and d-block changes the display to block (required for margins to work on images). Alternatively, wrap the image in a div with text-center or d-flex justify-content-center.
Can I add shadows to Bootstrap images?
Yes. Use shadow-sm for a subtle shadow, shadow for a standard shadow, or shadow-lg for a large dramatic shadow. These classes use Bootstrap's CSS box-shadow utility and work on any element, not just images. Combine them with img-fluid, rounded, and border classes for a complete professional look.
Do Bootstrap images work without JavaScript?
Yes, completely. All Bootstrap image classes — img-fluid, rounded, rounded-circle, img-thumbnail, alignment utilities, border classes, and shadow classes — are pure CSS. No JavaScript is needed for any of these. JavaScript is only required for Bootstrap's interactive components like modals, dropdowns, and carousels.
Why is my floated image breaking the layout below it?
Floated elements are removed from the normal document flow, so content after the float can bleed into unexpected areas. Fix this by adding <div class="clearfix"></div> immediately after the content that wraps around the floated image. This forces the browser to clear the float and resume normal layout flow for everything that follows.