Best Practices for Responsive & Dynamic Bootstrap Carousels in 2025 (With Code Examples)

"bootstrap": "^5.3.3",

ss File :-

.custom-carousel {

  max-width: 100%;

  overflow: hidden;

}

.carousel-inner {

  height: 500px; /* or any desired height */

}

.left-img-container {

  width: 50%;

  height: 100%;

}

.right-banner-container {

  width: 50%;

  height: 100%;

  background-color: #a00e3c; /* Optional background color */

}

.full-width-carousel {

  width: 100%;

  max-width: 100vw;

  overflow: hidden;

}

.full-image {

  width: 100%;

  height: auto;

  object-fit: contain;

  display: block;

  margin: 0 auto;

}

Html file :-

<div id="carouselExample" class="carousel slide full-width-carousel" data-bs-ride="carousel" data-bs-interval="3000">

  <div class="carousel-inner">

    <div

      class="carousel-item"

      *ngFor="let image of images; let i = index"

      [class.active]="i === 0"

    >

      <img [src]="image" class="d-block w-100 full-image" alt="Slide image" />

    </div>

  </div>

  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">

    <span class="carousel-control-prev-icon" aria-hidden="true"></span>

  </button>

  <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">

    <span class="carousel-control-next-icon" aria-hidden="true"></span>

  </button>

</div>

Ts File :-

  images = [

    // '../asserts/Screenshot (3).png',

    // '../asserts/Screenshot (13).png',

    // '../asserts/Screenshot (14).png',

    '../asserts/a.jpg',

    '../asserts/aa.webp',

  ];