<div id="carouselHero" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://pixelprowess.com/i/pow_angle.webp" class="d-block w-100" alt="Image Description">
      <div class="carousel-caption d-none d-md-block">
        <h5>Slide 01</h5>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni magnam perferendis, similique saepe quas pariatur deleniti ratione dolorum, consequatur ea incidunt, quo corporis suscipit culpa atque ipsum possimus exercitationem commodi!</p>
      </div>      
    </div>
    <div class="carousel-item">
      <img src="https://pixelprowess.com/i/spoon.webp" class="d-block w-100" alt="POW Logo">
      <div class="carousel-caption d-none d-md-block">
        <h5>Slide 02</h5>
        <p>Alias, repudiandae illum maiores vitae dolores, soluta quasi commodi quas, ex dolorum impedit enim reprehenderit doloremque quos earum at saepe temporibus vero voluptatibus hic accusamus eos. Quis odio ex voluptate!</p>
      </div>      
     </div>
  </div>
</div> 
#carouselHero .carousel-item img {  
  object-fit: cover;
  object-position: center;
  overflow: hidden;
  height:100vh;
}
View Compiled

External CSS

  1. https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css

External JavaScript

  1. https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js