Height of columns in Bootstrap 4 grid layout using row-cols

I am faced with a challenge while using the bootstrap grid system with the row-col attribute. The issue is that when columns wrap, they do not maintain the height of the tallest columns from the previous rows. Is there a way to ensure that the wrapped columns maintain the height of the tallest one?

I am exploring possibilities to achieve this intelligently within the framework of Bootstrap, as simple solutions like setting "min-height" are not suitable in this case.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="97e7f8e7e7f2e5b9fde4d7a6b9a6a1b9a7">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<div class="container-fluid">
    <div class="row row-cols-2 row-cols-md-4" id="cordContainer">
        <div class="col mb-4">
            <div class="card h-100 border-primary">
                <div class="card-header bg-primary"></div>
                <img class="card-img-top" src="https://i0.wp.com/www.impact-media.be/wp-content/uploads/2019/09/placeholder-1-e1533569576673-960x960.png">
                <div class="card-body border-top p-2"><p class="card-text text-center">Test</p></div>
            </div>
        </div>
        <div class="col mb-4">
            <div class="card h-100 border-primary">
                <div class="card-header bg-primary"></div>
                <img class="card-img-top" src="http://www.nebero.com/wp-content/uploads/2014/05/placeholder.jpg">
                <div class="card-body border-top p-2"><p class="card-text text-center">Test</p></div>
            </div>
        </div>
        <div class="col mb-4">
            <div class="card h-100 border-primary">
                <div class="card-header bg-primary"></div>
                <img class="card-img-top" src="https://bulma.io/images/placeholders/480x640.png">
                <div class="card-body border-top p-2"><p class="card-text text-center">Test</p></div>
            </div>
        </div>
        <div class="col mb-4">
            <div class="card h-100 border-primary">
                <div class="card-header bg-primary"></div>
                <img class="card-img-top" src="https://bulma.io/images/placeholders/480x640.png">
                <div class="card-body border-top p-2"><p class="card-text text-center">Test</p></div>
            </div>
        </div>
        <div class="col mb-4">
            <div class="card h-100 border-primary">
                <div class="card-header bg-primary"></div>
                <img class="card-img-top" src="http://www.nebero.com/wp-content/uploads/2014/05/placeholder.jpg">
                <div class="card-body border-top p-2"><p class="card-text text-center">Test</p></div>
            </div>
        </div>
    </div>
    <div class="row row-cols-1" id="otherItemsContainer">
    </div>
</div>

https://jsfiddle.net/ak7nb9mx/

cssbootstrap-4

Answer №1

If you choose to use JavaScript:

$( document ).ready(function() {
    var highestHeight = 0;
    document.querySelectorAll('#cordContainer > .col').forEach(function(item, idx) {
        if (parseInt(item.offsetHeight) > highestHeight) highestHeight = parseInt(item.offsetHeight);
    });
    document.querySelectorAll('#cordContainer > .col').forEach(function(item, idx) {
        item.style.height = highestHeight + "px";
    });
});

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

Is the CSS selector '.my-class *:not(input[type="text"])' accurate?

Is there a way to target all elements inside the DOM element with class "my-class" except for input elements of type text? I tried using the following CSS selector: .my-class *:not(input[type="text"]) { // Some CSS properties here } However, this do ...

htmlcsscss-selectors

The Angular Material Table experienced a collapse when trying to render over 20 columns simultaneously

Currently, I am experiencing an issue in Angular Version 5 where the Angular Material Table collapses when rendering more than 20 columns. Here is a snapshot of what my table looks like: https://i.stack.imgur.com/MXfvQ.png https://i.stack.imgur.com/XHWgq ...

cssangularangular-materialmaterial-ui

Troubleshooting Laravel's Asset Path Problem

I've been working on a Laravel project using version 8 along with Bootstrap UI. I've successfully integrated my Bootstrap template locally, and all assets are stored in the public/assets folder. Within my blade file, I'm utilizing the asset ...

phplaravelbootstrap-4laravel-bladelaravel-8

How come certain invisible screen elements suddenly become visible when the document is printed?

When creating a play-off tournament bracket, I face the challenge of adjusting for varying numbers of participants in each round. Typically, there are 2^n participants in each tour: 16, 8, 4, 2 which can be easily accommodated in a flex column layout. Howe ...

htmlcssprintingmaterial-ui

Replace the css variables provided by the Angular library with custom ones

Having an angular library with a defined set of css variables for colors applied to components, which are globally set like this: :root { -color-1: #000000; -color-2: #ffffff; ... } In my application utilizing this library, I need to override ...

htmlcssangular

"Resolving the issue with unnecessary line breaks in Optimizepress when input is contained within a paragraph

I am experiencing an issue with the code on my server: <p>This is a test to determine why the <input type="text" style="text-align: center;" value="input"/> element appears on a new line when displayed on a wordpress page.</p> When view ...

htmlcsswordpress

Click anywhere outside the sidemenu to close it

I want the menu to behave like the side menu on Medium. When the side menu is open and the user clicks outside of #sidebar-wrapper, the side menu should close. Currently, I have to click the toggle X to close the menu. html <a id="menu-toggle" href="# ...

javascriptjqueryhtmlcssmenu

React forms are experiencing issues with characters overlapping

Having trouble with overlapping label and input letters in my React form. Looking for: The appearance shown in the top image Experiencing: What is displayed in the bottom image Any solutions on how to resolve this issue? https://i.sstatic.net/Y3W2m.png ...

cssreactjs

Is a Responsive Split Layout the Solution for Your Web Design Needs?

I'm looking to create a webpage layout where the left half of the viewport is for Login and the right half is for Signup. This layout should be split side by side on tablets, desktops, and large screens, but stacked vertically (Login on top, Signup on ...

htmlcssbootstrap-4

Ways to prevent the jQuery simple slider from transitioning slides while it is in an invisible state

There is a jQuery slider on my website that behaves strangely when I navigate away from the Chrome browser and return later. It seems to speed through all pending slides quickly when it was not visible. Now, I want the slider to pause when it becomes invi ...

javascripthtmljquerycss

I'm having trouble getting my website to align in the center of the

Struggling to center my website no matter what I try. I experimented with different CSS properties but haven't had much luck. margin: auto 0; I also attempted the following: margin-left: 50%; margin-right: 50%; The closest I got was aligning every ...

css

How can I create a single button to toggle the opening and closing of a div using this jquery code?

$(document).ready(function(){ $('#content1').hide(); $('a#openClose').click(function(){ if ($('#content1').is(':visible')) { $('#content1').hide(&apos ...

jquerycssxhtml

CSS - starting fresh with animations

I am facing an issue with a CSS animation that I created. Everything seems to be working correctly, but I need to complete it by setting the input type to reset the animation. Below is the CSS code snippet that should reset the animation: $('button& ...

javascriptjquerycssanimationreset

Implement a smooth transition effect when changing the image source

I am currently working on enhancing a Squarespace website by adding a new image fade-in/fade-out effect when the mouse hovers over one of three buttons. The challenge I'm facing is that the main static image is embedded as an img element in the HTML r ...

javascripthtmlcss

GWT encrypted CSS class names not being correctly applied

I recently encountered a strange issue with GWT styles. While using UiBinder and programmatically styling my GWT widgets, I ran into the following scenario: <ui:UiBinder xmlns:ui="..." xmlns:g="..."> <ui:style src="bindings.css"/> ...

cssgwtuibinderflextable

Notifying users with Angular bootstrapped alerts directly from a

I have a service that is set up to listen for incoming events. When an event occurs, I need to notify the user. Currently, I am using alert(). My goal is for a Bootstrap alert to pop up in every component when the service triggers. Is there a way to achie ...

angularbootstrap-4bootstrap-5

Excessive Width Issue Caused by Bootstrap 4 Navbar Items

Having trouble with my Bootstrap 4 Navbar menu implementation. When I add more items, they overflow the container instead of floating correctly. Any CSS suggestions to temporarily fix this issue? <!DOCTYPE html> <html lang="en"> <head> ...

htmlcsstwitter-bootstrapnavbar

Importing CSS with Node Sass using npm

Instead of inlining css within sass, I attempted to utilize the npm package Node Sass CSS importer. Unfortunately, I am struggling to get it to function properly. I typically use npm as my build tool: "build:css": "node-sass some_path/style.scss some_pa ...

cssnode.jsnpmsass

Is there a different option to <br /> that allows me to adjust the spacing between lines?

Consider the example below: Line1 <br /> Line2 To create a line break between Line1 and Line2, I have utilized <br />. However, due to lack of cross-browser compatibility in setting the height of br, I am seeking an alternative approach. Any ...

htmlcss

Tips for translating an HTML webpage from Arabic to English

I have a bootstrap site with HTML pages but no backend functionality. How can I manually translate from Arabic to English, given that I already have the translations for all content and don't need to rely on translation tools? Is there a way to map Ar ...

javascripthtmlcssjsonbootstrap-4