Bootstrap Images
Bootstrap 5 gives you a small set of image classes that solve the problems every web page runs into: images that overflow their container on small screens, images that need rounded corners or a circular crop, and images that need to sit neatly inside a caption. In this lesson you will learn the responsive image helper, the shape utilities, the figure component, and how to align and center images without writing a single line of custom CSS.
Responsive images
The most useful image class in Bootstrap is .img-fluid. It sets max-width: 100% and height: auto so an image never grows wider than its parent element and always keeps its original proportions. This is the class you will reach for on almost every image inside a responsive layout.
A responsive image
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<img src="landscape.jpg" class="img-fluid" alt="A mountain landscape">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Image shapes
Bootstrap ships three shape helpers. Use .rounded for gently rounded corners, .rounded-circle to crop a square image into a circle, and .img-thumbnail to add a light border and small padding that looks like a photo frame.
Rounded corners, circle, and thumbnail
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<img src="photo.jpg" class="rounded" alt="Rounded corners">
<img src="avatar.jpg" class="rounded-circle" width="150" height="150" alt="Circular avatar">
<img src="photo.jpg" class="img-thumbnail" alt="Framed thumbnail">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Aligning and centering images
Because an image is an inline element, you can float it with the .float-start and .float-end utility classes. To center a block image, combine .d-block with the auto horizontal margin utility .mx-auto.
Float and center
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<img src="photo.jpg" class="rounded float-start" alt="Floated left">
<img src="photo.jpg" class="rounded float-end" alt="Floated right">
<img src="photo.jpg" class="rounded mx-auto d-block" alt="Centered">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Figures
When an image needs a caption, wrap it in the figure component. The <figure> element gets the .figure class, the image gets .figure-img (often with .img-fluid), and the caption text goes in a <figcaption> with .figure-caption.
An image with a caption
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<figure class="figure">
<img src="waterfall.jpg" class="figure-img img-fluid rounded" alt="A waterfall">
<figcaption class="figure-caption">A waterfall in the national park.</figcaption>
</figure>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Image class reference
With just these classes you can handle nearly every image styling need in a Bootstrap project, all while keeping your layouts responsive by default.
Exercise: Bootstrap Images
What does the .img-fluid class do?
