Search code examples
htmlcssbootstrap-5owl-carousel

How to make Bootstrap 5 cards the same height in card-columns with owl-carousel?

I use cards for images in my carousel, and I'd like to make the height of each card equivalent.

Using the class h-100 doesn't work.

Changing any of the p tag content makes the size of the card different from the others whilst I'd like it to have a fixed size.

Look at this image, I have two cols. The left col is an owl-carousel and the right col is an advertisement.

I want all their heights to be the same.

demo

I'm looking forward to any tips and solutions you might come up with. Thanks.

Below is my HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/owl.carousel.min.css">
</head>
<body class="bg-primary">
<section class="pt-5">
    <div class="container">
        <div class="row">
            <div class="col-lg-9 mb-3">
                <h2 class="mb-5 text-dark">Our Products</h2>
                <div class="owl-carousel new-product">
                    <div class="me-1 ms-1 d-flex align-items-stretch">
                        <div class="card w-100 h-100">
                            <div class="card-body d-flex flex-column">
                                <a href="#" class="text-dark h2 text-decoration-none mb-4">Underground House</a>
                                <div class="float-start">
                                    <span class="badge bg-success p-3"></span>
                                </div>
                                <img src="https://www.forbes.com/advisor/wp-content/uploads/2021/08/download-22.jpg" alt="" height="125">
                                <div class="small text-center mt-5">
                                    <span>A bunker is meant to be a shelter from bombs or other disasters, but an underground house is intended as a permanent dwelling. </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="me-1 ms-1 d-flex align-items-stretch">
                        <div class="card w-100 h-100">
                            <div class="card-body d-flex flex-column">
                                <a href="#" class="text-dark h2 text-decoration-none mb-4">Carriage / Coach House</a>
                                <div class="float-start">
                                    <span class="badge bg-success p-3"></span>
                                </div>
                                <img src="https://www.forbes.com/advisor/wp-content/uploads/2021/08/download-9.jpg" alt="" height="125">
                                <div class="small text-center mt-5">
                                    <span>Initially built to store the horse-drawn carriage or coach of the residents of the main house, a carriage or coach house is a separate building on the property. </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="me-1 ms-1 d-flex align-items-stretch">
                        <div class="card w-100 h-100">
                            <div class="card-body d-flex flex-column">
                                <a href="#" class="text-dark h2 text-decoration-none mb-4">In-Law Suite</a>
                                <div class="float-start">
                                    <span class="badge bg-success p-3"></span>
                                </div>
                                <img src="https://www.forbes.com/advisor/wp-content/uploads/2021/08/download-8.jpg" alt="" height="125">
                                <div class="small text-center mt-5">
                                    <span>A house that’s classified as a single-family home can still be meant for multiple generations.</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="me-1 ms-1 d-flex align-items-stretch">
                        <div class="card w-100 h-100">
                            <div class="card-body d-flex flex-column">
                                <a href="#" class="text-dark h2 text-decoration-none mb-4">Single-Family</a>
                                <div class="float-start">
                                    <span class="badge bg-success p-3"></span>
                                </div>
                                <img src="https://thumbor.forbes.com/thumbor/fit-in/900x510/https://www.forbes.com/home-improvement/wp-content/uploads/2022/07/download-23.jpg" alt="" height="125">
                                <div class="small text-center mt-5">
                                    <span>Detached single-family houses are the most common types of homes in the U.S., as well as the most desirable for many Americans. </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 mb-3">
                <div class="card">
                    <img src="https://www.buildofy.com/blog/content/images/size/w2000/2022/06/_DSC9610-Edited_-min.jpg" class="img-fluid" height="100" alt="">
                </div>
            </div>
        </div>
    </div>
</section>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script>
    $('.new-product').owlCarousel({
        autoplay: true,
        autoplayHoverPause: true,
        loop: true,
        autoplayTimeout: 2000,
        items: 2,
        nav: true,
        responsive: {
            0: {
                items: 1,
                dots: false,
            },
            485: {
                items: 2,
                dots: false,
            },
            728: {
                items: 3,
                dots: false,
            },
            960: {
                items: 4,
                dots: false,
            },
            1200: {
                items: 4,
                dots: true,
            }
        }
    });
</script>
</body>
</html>
Solution

  • OK, so there are two parts to this solution. Part one is getting the cards in the carousel to be the same height. Part two is customising the column with the static image in it to match the height of the other cards.

    Part one: You need to update your 'Owl Carousel' configuration to solve this one.

    Owl Carousel references the class 'owl-carousel' to add markup which it uses to control behaviour. If you want to use the class d-flex, you need to add it to the Owl Carousel markup not your own.

    Looking in the documentation here, you can customise the relevant wrapper class using the property 'stageClass':

    $('.new-product').owlCarousel({
  ...
  stageClass: 'owl-stage d-flex',
  responsive: { ...

    It's worth noting that you should include an additional class to d-flex. For some reason, the display can be a bit buggy and sometimes not work at all if only 'd-flex'. Personally, I included the default class name 'owl-stage' alongside it and it works as intended.

    Part two: You need to edit your classes to allow the image to grow in size using the flex-grow property (class flex-grow-1), and include an 'object-fit' class to allow the image to scale and fill the space (class object-fit-cover)

    <div class="col-lg-3 mb-3 d-flex align-items-stretch">
  <div class="card flex-grow-1">
    <img src="https://www.buildofy.com/blog/content/images/size/w2000/2022/06/_DSC9610-Edited_-min.jpg" alt="" class="flex-grow-1 object-fit-cover img-fluid" height="500">
  </div>
</div>

    EDIT The final few changes to make this work is, one, to move the <h2> above the row to prevent it from adding unwanted height.

    <div class="container">
  <h2 class="mb-5 text-dark">Our Products</h2>
  <div class="row">
    <div class="col-lg-9 mb-3">
        <div class="owl-carousel new-product">...</div>
    </div>
            
    <div class="col-lg-3 mb-3 d-flex align-items-stretch">
    ...

    And two, update the 'static image' markup so that it doesn't shrink on mobile:

    <img src="https://www.buildofy.com/blog/content/images/size/w2000/2022/06/_DSC9610-Edited_-min.jpg" alt="" class="flex-grow-1 object-fit-cover img-fluid" height="500">

    This works because you have a height of '500', supplemented by the 'auto-height' of Bootstrap's img-fluid class. Image aspect ratio is being handled by the object-fit-cover class.

    Updated JS Fiddle: https://jsfiddle.net/lmonk/jz8c06yg/10/