CODEWITHSUNDEEP
bootstrap-5bootstrap-carouselbootstrap-cards
Tim Kruger
Tim Kruger

Reputation: 897

Bootstrap 5.3.x carousel within a card not displaying image correctly

How do I accomplish adding an image to a card and get the image to display correctly?

Here's a code snippet of what I'm trying to do, as well as the result:

<div class="card">
    <div id="carouselJdkEntertainment" class="carousel slide w-100">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img alt="JDK Entertainment" class="card-img-top" src="{{ asset('img/vendor/JDK-Entertainment-[01].jpeg') }}" />
        </div>
        <div class="carousel-item">
          <img alt="JDK Entertainment" class="card-img-top" src="{{ asset('img/vendor/JDK-Entertainment-[02].jpeg') }}" />
        </div>
        <div class="carousel-item">
          <img alt="JDK Entertainment" class="card-img-top" src="{{ asset('img/vendor/JDK-Entertainment-[03].jpeg') }}" />
        </div>
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#carouselJdkEntertainment" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#carouselJdkEntertainment" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>
...

Result

enter image description here

Upvotes: -1

Views: 267

Answers (1)

MHD Alaa Alhaj
MHD Alaa Alhaj

Reputation: 3223

Since you are utilizing the grid system of Bootstrap i.e. row - col, you don't have to make a fixed width for your image.

Next, use object-fit on your image to make it fit your card's available width.

.carousel > .carousel-inner > .carousel-item > img {
    height: 520px !important;
    object-fit: cover; /* You can also use 'contain' to show full image */
    object-position: center; /* Tweak this as needed */
}
<!doctype html>
<html lang="en">
  <head>
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div class="row my-1 gy-2">
      <div class="col-md-3 d-flex">
        <div class="card">
          <div id="carouselJdkEntertainment" class="carousel slide w-100">
            <div class="carousel-inner">
              <div class="carousel-item">
                <img alt="JDK Entertainment" class="card-img-top" src="https://bellsandbrides.co.za/img/vendor/JDK-Entertainment-[01].jpeg" />
              </div>
              <div class="carousel-item active">
                <img alt="JDK Entertainment" class="card-img-top" src="https://bellsandbrides.co.za/img/vendor/JDK-Entertainment-[02].jpeg" />
              </div>
              <div class="carousel-item">
                <img alt="JDK Entertainment" class="card-img-top" src="https://bellsandbrides.co.za/img/vendor/JDK-Entertainment-[03].jpeg" />
              </div>
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselJdkEntertainment" data-bs-slide="prev">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselJdkEntertainment" data-bs-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="visually-hidden">Next</span>
            </button>
          </div>

          <!-- <img alt="JDK Entertainment" class="card-img-top" src="https://bellsandbrides.co.za/img/vendor/JDK-Entertainment-[01].jpeg" /> !-->
          <div class="card-body">
            <h5 class="card-title">JDK Entertainment</h5>
            <p class="card-text">
              Make your wedding reception unforgettable with our professional DJ services! At JDK Enterta...
              <br />
              <a href="https://www.facebook.com/share/zj3qGcDft64oN8h9/?mibextid=qi2Omg" target="_blank">
                <i class="fa-brands fa-facebook"></i>
              </a>
            </p>
            <a href="#" class="btn-neon">
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              More
            </a>
          </div>
        </div>
      </div>

      <div class="col-md-3 d-flex">
        <div class="card">
          <img alt="VDM Photo and Film" class="card-img-top" src="https://bellsandbrides.co.za/img/vendor/VDM-Photo-and-Film-[01].jpg" />
          <div class="card-body">
            <h5 class="card-title">VDM Photo and Film</h5>
            <p class="card-text">
              Hi, We're a team. Videographer and Photographer. You can have us for photography, v...
              <br />
              <a href="https://www.facebook.com/PhotographyByRen?mibextid=ZbWKwL" target="_blank">
                <i class="fa-brands fa-facebook"></i>
              </a>
            </p>
            <a href="#" class="btn-neon">
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              More
            </a>
          </div>
        </div>
      </div>

      <div class="col-md-3 d-flex">
        <div class="card">
          <img alt="Stella's Bridal Boutique" class="card-img-top" src="https://bellsandbrides.co.za/img/vendor/Stellas-Bridal-Boutique-[01].jpg" />
          <div class="card-body">
            <h5 class="card-title">Stella's Bridal Boutique</h5>
            <p class="card-text">
              Hey bride to be. Let us help you find your dream dress. To keep the local South African fas...
              <br />
              <a href="https://www.facebook.com/stellasbboutique?mibextid=ZbWKwL" target="_blank">
                <i class="fa-brands fa-facebook"></i>
              </a>
            </p>
            <a href="#" class="btn-neon">
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              More
            </a>
          </div>
        </div>
      </div>

      <div class="col-md-3 d-flex">
        <div class="card">
          <img alt="AVD Fashion Design" class="card-img-top" src="https://bellsandbrides.co.za/img/vendor/AVD-Fashion-Design-[01].jpeg" />
          <div class="card-body">
            <h5 class="card-title">AVD Fashion Design</h5>
            <p class="card-text">
              AVD Fashion Design specializing in custom made experience, like custom made Wedding Dresses, Men's e...
              <br />
              <a href="https://m.facebook.com/avdcouture/" target="_blank">
                <i class="fa-brands fa-facebook"></i>
              </a>
            </p>
            <a href="#" class="btn-neon">
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              More
            </a>
          </div>
        </div>
      </div>
    </div>
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

Upvotes: 0

Related Questions