Creating equal height Bootstrap 5 cards within card-columns using owl-carousel

I'm having trouble ensuring that all the images in my carousel have the same height. Despite trying to use the h-100 class, the heights still vary. Changing the content within the p tags also affects the size of the images. Here's a snapshot: the left column features an owl-carousel, while the right column displays an advertisement.

My goal is to make sure that both columns have equal heights.

https://i.sstatic.net/cYsYX.jpg

If you have any tips or solutions to achieve this, I'd greatly appreciate it. Thanks!

Here's a snippet of 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6c0e0303181f181e0d1c2c59425f425c410d001c040d5f">[email protected]</a>/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>>
                    <!-- more card elements -->
                </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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="34565b5b40474046554474011a071a04195558445c5507">[email protected]</a>/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>

Answer №1

To ensure cards have equal height, simply include the .h-100 class. For a default setting of equal heights, you can define $card-height: 100% in Sass.

For example:

<div class="card h-100">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This card includes supporting text that leads into further content. The content is slightly longer.</p>
  </div>
</div>

For more details, refer to the documentation link provided below: https://getbootstrap.com/docs/5.3/components/card/

Answer №2

Alright, let's break down the solution into two parts. First, we need to ensure that all cards in the carousel have the same height. Second, we need to customize the column containing the static image to match the height of the other cards.

Part one: To achieve equal height for all carousel cards, you must update your 'Owl Carousel' configuration. Owl Carousel uses the class 'owl-carousel' to manipulate behavior. If you want to incorporate the class d-flex, remember to add it to the Owl Carousel markup, not your own.

Referencing the documentation here, you can customize the wrapper class using the 'stageClass' property:

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

It's advisable to add an extra class alongside d-flex to ensure stability. Adding the default class name 'owl-stage' alongside 'd-flex' usually resolves any display issues.

Part two: To allow the image in the column to expand and fill the space, add the 'flex-grow' property (class flex-grow-1) to your classes. Additionally, include an 'object-fit' class (class object-fit-cover) for scaling purposes.

<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: Make sure to adjust the placement of the <h2> element to prevent unwanted height increments.

<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">
    ...

Lastly, adjust the markup for the 'static image' to prevent shrinking on mobile devices:

<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 combination ensures a height of '500' with the assistance of Bootstrap's img-fluid class. Image aspect ratio is maintained by the object-fit-cover class.

View the updated JS Fiddle: https://jsfiddle.net/lmonk/jz8c06yg/10/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Refresh the data in the DataTables table using a fragment

Currently, I am attempting to reload a fragment using ajax. However, after the reload, my event select and row count do not function properly. It seems that the default configuration is not behaving as expected: @PostMapping("/admin/add") ...

Positioned footer without predetermined height

I am having trouble with positioning the footer so that it always stays at the bottom of the page. When there is not enough content on the page, the footer does not reach the bottom as desired. Additionally, the footer does not have a fixed height. Below i ...

The issue with IE-9 is that it is mistakenly picking up the placeholder value as

My HTML code looks like this: <input id="SLOCriteriaOtherText" name="SLOCriteriaOtherText" style="width: 100%;" type="text" data-role="autocomplete" placeholder="Enter name for 'other' metric..." class="k-input" autocomplete="off" role="textb ...

Emojis representing flags displayed on screen

Is there an option to display a flag icon? For example, I am able to write Hello ...

How can I bypass hotlink protection for RSS images?

According to the definition, RSS feeds are considered public. When images are displayed within the feed, it is essentially "hotlinking," meaning that the content is being read directly from the Internet rather than your local machine. Is there a specific ...

Overflowing HTML Table Spills Over into Neighboring Div

Is there a way to make the data in a table that spans across multiple pages overflow into a separate div on the initial page without using JavaScript since I am generating it as a PDF? See the images below for reference. Current layout: https://i.stack.im ...

Struggling with resizing a webcam feed to fit the dimensions of the iframe container?

I'm facing a challenge embedding a camera feed into a webpage that needs to display manual focus and servo controls. The issue lies in the content scaling within the iframe. Even though the iframe boundary resizes according to the window's width ...

Custom Jquery function is failing to position divs correctly within ajax-loaded content

I recently coded a custom function that efficiently positions absolute divs within a container by calculating top positions and heights: $.fn.gridB = function() { var o = $(this); //UPDATED from var o = $(this[0]); o.each(function() { var ...

Is it possible to open one collapse item and simultaneously close all the others using Bootstrap 5?

Can someone explain how to properly use the Bootstrap 5 collapses component? I want it so that when one collapse item opens, all others close. The documentation mentions setting a parent attribute, but I'm not entirely sure how that works. Here's ...

Experience the feeling of releasing momentum by click and dragging the scroll

One feature I am looking for is the ability to control the scroll speed when dragging, and have the scroll continue moving slightly after release instead of stopping instantly. CodePen: https://codepen.io/rKaiser/pen/qGomdR I can adjust the speed adequat ...

Using Jquery .ajax to Populate Select Dropdown with JSON Data

I have put in a lot of effort but I'm not seeing any results. My JSON data, created with PHP, looks like this (with the header sent before the data): {"users":[ {"id":"3256","name":"Azad Kashmir"}, {"id":"3257","name":"Balochistan"}, {"id":"3258","na ...

Div that adjusts according to the width of an image

I have some images of a laptop and a tablet displayed on my webpage. The issue I am facing is that the div above the laptop should always match the width of the laptop. Everything looks great at full width, but problems arise when I scale down the window s ...

Attempting to maintain the main navigation highlighted while browsing through the secondary navigation

I am facing a small issue that seems like it should be an easy fix, but I can't seem to figure it out. While working on my site, I'm having trouble keeping the parent navigation highlighted when scrolling through the sub-menu. If you hover over ...

Is there a way to execute an onclick function prior to the Bootstrap 5 'hidden' event being triggered?

Our modal popup contains a button with an onclick event. In the previous version of Bootstrap, the onclick event would fire first when the modal was hidden, followed by the hidden.bs.modal event. However, in version 5.2, the hidden.bs.modal event now fire ...

GWT 2.5.1 - How to Restrict the Amount of Items Displayed in a Dropdown Menu (ValueListBox)

Currently, I am utilizing a ValueListBox to showcase a range of values for users to choose from. The main issue I am encountering pertains to IE11 and its subpar behavior when interacting with the control: The dropdown list appears all over the place (in ...

Modify table cell content based on boolean value - HTML

Currently, I am working with a table that displays properties from an object. Is there a simple method to change the text displayed in a cell instead of the true/false values it is currently set to? For example, one of the columns indicates whether the ob ...

Adjusting the iframe for a side navigation with multiple dropdown options

I have a file called index.html that contains two dropdown containers and an iframe. The first dropdown container works with the iframe, but the second one does not. Can anyone help me fix this issue? I am having trouble understanding the script for chang ...

What are the steps to utilize vue.js for dynamically adjusting my sidebar based on a URL input?

Greetings to the amazing community of Vue.js enthusiasts, I am a novice looking to develop a single-page web application using vue.js. This application will consist of a fixed header and dynamic body content that changes based on user interactions. Here&a ...

Tips for integrating bootstrap code within PHP tags

<?php $con=mysqli_connect("localhost","root","","testdatabase"); // Check connection if (mysqli_connect_errno()) { echo "Failed to connect to MySQL: " . mysqli_connect_error(); } $result = mysqli_qu ...

Enhancing Responsive Tables with Vertical Alignment in Bootstrap 4

When utilizing Bootstrap 4 and adding table-responsive to a table, the text may no longer be centered vertically. Is this a bug? If not, is there an easy solution available to center the text in the middle? A pure Bootstrap solution would be greatly apprec ...