1. Bootstrap Images - Introduction

Bootstrap’s image classes help in making images responsive and visually appealing with minimal effort.

👉 How to Use Bootstrap Images

• Use the .img-fluid class to make an image responsive.

• Use .rounded, .rounded-circle, or .img-thumbnail to style images.

Example: Responsive Image

<img src="https://via.placeholder.com/400" class="img-fluid" alt="Responsive Image">

2. Image Styling in Bootstrap

Bootstrap provides multiple styling options for images.

👉 Rounded & Circle Images

• .rounded → Adds rounded corners.

• .rounded-circle → Creates a circular image.

Example: Rounded & Circle Image

<img src="https://via.placeholder.com/100" class="rounded" alt="Rounded Image">
<img src="https://via.placeholder.com/100" class="rounded-circle" alt="Circular Image">

✅ Explanation:

• The first image has rounded corners.

• The second image is circular.

3. Using Image Thumbnails

Bootstrap provides .img-thumbnail for adding a border and padding around an image.

Example: Image Thumbnail

<img src="https://via.placeholder.com/150" class="img-thumbnail" alt="Thumbnail Image">

4. Aligning Images in Bootstrap

Bootstrap allows image alignment using .float-start, .float-end, and .mx-auto d-block.

Example: Aligning Images

<img src="https://via.placeholder.com/100" class="float-start" alt="Left Aligned">
<img src="https://via.placeholder.com/100" class="float-end" alt="Right Aligned">
<img src="https://via.placeholder.com/100" class="mx-auto d-block" alt="Centered">

✅ Explanation:

• float-start → Aligns image left.

• float-end → Aligns image right.

• mx-auto d-block → Centers the image.

5. Bootstrap Figures - Introduction

Figures allow captioned images using the <figure> and <figcaption> elements.

👉 How to Use Bootstrap Figures

• Wrap an image inside a <figure> tag.

• Add a <figcaption> for image description.

• Use .figure, .figure-img, and .figure-caption classes.

Example: Image with Caption

<figure class="figure">
  <img src="https://via.placeholder.com/200" class="figure-img img-fluid rounded" alt="Sample Image">
  <figcaption class="figure-caption text-center">This is a sample caption.</figcaption>
</figure>

✅ Explanation:

• .figure → Creates a figure container.

• .figure-img → Styles the image inside the figure.

• .figure-caption → Adds a caption below the image.

6. Responsive Image Grid with Bootstrap

You can create a responsive image grid using Bootstrap’s grid system.

Example: Image Grid

<div class="container text-center">
  <div class="row">
    <div class="col">
      <img src="https://via.placeholder.com/100" class="img-fluid rounded" alt="Image 1">
    </div>
    <div class="col">
      <img src="https://via.placeholder.com/100" class="img-fluid rounded" alt="Image 2">
    </div>
    <div class="col">
      <img src="https://via.placeholder.com/100" class="img-fluid rounded" alt="Image 3">
    </div>
  </div>
</div>

✅ Explanation:

• row & col → Organize images in a grid layout.

• .img-fluid → Makes images responsive.

• .rounded → Adds rounded corners.

7. Overlaying Text on Images

You can overlay text on an image using Bootstrap’s positioning utilities.

Example: Image with Overlay Text

<div class="position-relative">
  <img src="https://via.placeholder.com/300" class="img-fluid" alt="Overlay Image">
  <h5 class="position-absolute top-50 start-50 translate-middle text-white bg-dark p-2 rounded">Overlay Text</h5>
</div>

✅ Explanation:

• position-absolute → Positions text over the image.

• top-50 start-50 translate-middle → Centers the text.

• bg-dark p-2 rounded → Adds a dark background with padding.

8. Responsive Image Carousel (Slider)

Bootstrap’s carousel component allows image sliders.

Example: Image Carousel

<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://via.placeholder.com/400" class="d-block w-100" alt="Slide 1">
    </div>
    <div class="carousel-item">
      <img src="https://via.placeholder.com/400" class="d-block w-100" alt="Slide 2">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
  </button>
</div>

✅ Explanation:

• carousel → Creates an image slider.

• carousel-item active → First image is active by default.

• carousel-control-prev & carousel-control-next → Add navigation buttons.

Conclusion

Bootstrap’s Images & Figures help create beautiful and responsive images effortlessly.

• Images: Use .img-fluid for responsiveness.

• Styling: Apply .rounded, .rounded-circle, .img-thumbnail.

• Alignment: Use .float-start, .float-end, .mx-auto.

• Figures: Wrap images with <figure> and add captions.

• Advanced: Create image grids, overlays, and carousels.

💡 Now, you can easily style and manage images in Bootstrap projects! 🚀