Bootstrap Images

Bootstrap Image Styling

Bootstrap 5 provides several utility classes to style images, making them responsive and adding common visual treatments.

Rounded Corners

The .rounded class adds rounded corners to an image. This effect is supported by all modern browsers.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Rounded Image Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-3">
    <img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre" width="304" height="236">
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Circle

The .rounded-circle class shapes the image into a circle. Ensure your image is square for a perfect circle; otherwise, it will appear as an oval.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Circle Image Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-3">
    <img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre" width="304" height="236">
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Thumbnail

The .img-thumbnail class adds a light border and padding to an image, giving it a thumbnail appearance.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Thumbnail Image Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-3">
    <img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre" width="304" height="236">
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Responsive Images

Images need to adapt to different screen sizes. Responsive images automatically adjust to fit the width of their parent element.

Create responsive images by adding the .img-fluid class to the <img> tag. This class applies max-width: 100%; and height: auto; to the image, ensuring it scales down if the parent container is narrower, but never scales up larger than its original size.

For more advanced responsive image techniques, such as art direction or serving different image resolutions, consider using the HTML <picture> element. Bootstrap’s .img-fluid class can be applied to images within a <picture> element as well.

Additionally, for performance, you can use the loading="lazy" attribute on <img> tags to defer loading of off-screen images until the user scrolls near them.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Image Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-3">
    <img src="img_chania.jpg" class="img-fluid" alt="Chania" loading="lazy">
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Image Gallery using Grid System

You can combine Bootstrap’s grid system with image classes like .img-thumbnail and .img-fluid to create a responsive image gallery. The grid columns will adjust based on screen size, and .img-fluid will ensure images scale within their columns.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Image Gallery Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-3">
  <div class="row">
    <div class="col-md-4 mb-3">
      <a href="pulpitrock.jpg" class="d-block">
        <img src="pulpitrock.jpg" class="img-fluid img-thumbnail" alt="Pulpit Rock">
        <p class="mt-2">Pulpit Rock: A famous tourist attraction in Forsand, Ryfylke, Norway.</p>
      </a>
    </div>
    <div class="col-md-4 mb-3">
      <a href="moustiers-sainte-marie.jpg" class="d-block">
        <img src="moustiers-sainte-marie.jpg" class="img-fluid img-thumbnail" alt="Moustiers Sainte Marie">
        <p class="mt-2">Moustiers-Sainte-Marie: Considered one of the "most beautiful villages of France".</p>
      </a>
    </div>
    <div class="col-md-4 mb-3">
      <a href="cinqueterre.jpg" class="d-block">
        <img src="cinqueterre.jpg" class="img-fluid img-thumbnail" alt="Cinque Terre">
        <p class="mt-2">The Cinque Terre: A rugged portion of coast in the Liguria region of Italy.</p>
      </a>
    </div>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

In this example, d-block on the <a> tag ensures the link takes up the full width, making the entire image area clickable. mb-3 adds margin at the bottom of each column for spacing.

Responsive Embeds with Ratio Helpers

To make videos or slideshows scale properly on any device while maintaining their aspect ratio, Bootstrap 5 provides ratio helper classes. These replace the older .embed-responsive classes.

Wrap your <iframe>, <embed>, <video>, or <object> in a parent <div> with a .ratio class and an aspect ratio class like .ratio-16x9, .ratio-4x3, etc. The embedded element itself does not need a special class, it will automatically scale.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Embed Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-3">
  <!-- 16:9 aspect ratio -->
  <div class="ratio ratio-16x9 mb-3">
    <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video player" allowfullscreen></iframe>
  </div>

  <!-- 4:3 aspect ratio -->
  <div class="ratio ratio-4x3">
    <iframe src="https://www.youtube.com/embed/anotherVideoID" title="Another YouTube video player" allowfullscreen></iframe>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

	What is aspect ratio? The aspect ratio of an image or video describes the proportional relationship between its width and its height. Common aspect ratios include 16:9 (standard for HD video and modern displays) and 4:3 (older television and monitor standard). Bootstrap provides classes for common ratios like `.ratio-1x1`, `.ratio-4x3`, `.ratio-16x9`, and `.ratio-21x9`.

Custom aspect ratios can be achieved using CSS custom properties (variables). See the official Bootstrap documentation on Ratios for more details.

Complete Bootstrap Image Reference

For a complete reference of all image-related classes and responsive embed helpers, consult the official Bootstrap documentation on Images and Ratios.