bootstrap_ref_css_images

Bootstrap CSS Images Reference

Bootstrap Images

Bootstrap provides several classes to style images, making them responsive and adding simple shapes.

Image Styling Classes

The following classes can be used to style images in Bootstrap 5:

• .img-fluid: Makes an image responsive. It applies max-width: 100%; and height: auto; to the image so that it scales with the parent element. This replaces the older .img-responsive class.
• .rounded: Adds rounded corners to an image.
• .rounded-circle: Shapes the image to a circle.
• .img-thumbnail: Styles an image to appear as a thumbnail with a padded border.

Example Usage:

<img src="path/to/your/image.jpg" class="img-fluid rounded" alt="Responsive rounded image">
<img src="path/to/your/image.jpg" class="img-fluid rounded-circle" alt="Responsive circular image">
<img src="path/to/your/image.jpg" class="img-fluid img-thumbnail" alt="Responsive thumbnail image">

Responsive Images with .img-fluid

To make images responsive in Bootstrap 5, add the .img-fluid class to the <img> tag. The image will then scale appropriately within its parent container.

The .img-fluid class applies max-width: 100%; and height: auto; to the image.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Image Example</title>
  <!-- Bootstrap CSS -->
  <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="docs/english/books/bootstrap/images/cinqueterre.jpg" class="img-fluid" alt="Cinque Terre">
  </div>
  <!-- Bootstrap JS Bundle (includes Popper) -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Aligning Images

You can align images using float utility classes like .float-start and .float-end, or center block-level images with .mx-auto and .d-block.

<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" alt="...">
<img src="..." class="rounded mx-auto d-block" alt="...">

For more advanced image handling, such as using the <picture> element for art direction or serving different image formats (like WebP), refer to the official Bootstrap documentation on images and HTML5 standards.