Creating consistently sized rows of Bootstrap columns - with either equal heights or equal spacing between each row

It would be great if bootstrap had a built-in feature where it automatically assigns the wrapper div of any item with a height based on the height of the largest div.

In this example on JSFiddle, you can see that I have different heights for the video-item-wrapper, which breaks the design. I could use min-height, but then I'd have to write CSS for different screen sizes (and it might still break at some point).

Is there a way, possibly using jQuery, to get the maximum height of the div and assign that height to all video-item-wrapper divs so that they are all the same height and do not break the design?

<div class="container">
    <div class="rows v-wrapper">
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
            <div class="video-item-wrapper">
                <div class="video-image-wrapper">
                    <img src="http://placehold.it/600x400" class="img-responsive" />

                <div class="play-item-wrapper">
                    <img src="http://placehold.it/50.png/09f/fff&text=>"/>
                </div>
                </div>
                <div class="video-details-wrapper"> <span>this is video short video title</span>

                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
            <div class="video-item-wrapper">
                <div class="video-image-wrapper">
                    <img src="http://placehold.it/600x400" class="img-responsive" />

                <div class="play-item-wrapper">
                    <img src="http://placehold.it/50.png/09f/fffplacehold" />
                </div>
                </div>
                <div class="video-details-wrapper"> <span>this is long video title this is long video title this is long video title</span>

                </div>
            </div>
        </div>
        <div class="col-xs-12 ...
javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

Here is my effective solution that works seamlessly.

Check out the solution here

This solution was inspired by a comment from user jme11.

CSS

.play-item {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}
.v-wrapper {
    max-width:1000px;
    margin:0 auto;
}
.video-item-wrapper
{
    border-bottom:30px solid green;
}
.video-image-wrapper {
    position:relative;
    width:100%;
}
.video-image-wrapper .img-responsive {
    width:auto;
    position:relative;
    z-index:1;
}
.video-image-wrapper .play-item {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    z-index:2;
}

/* add a little bottom space under the images */

@media (max-width: 767px) {
    .portfolio>.clear:nth-child(2n)::before {
      content: '';
      display: table;
      clear: both;
    }
}
@media (min-width: 768px) and (max-width: 989px) {
    .portfolio>.clear:nth-child(4n)::before {
      content: '';
      display: table;
      clear: both;
    }
}
@media (min-width: 990px) and (max-width: 1199px) {
    .portfolio>.clear:nth-child(6n)::before {
      content: '';
      display: table;
      clear: both;
    }
}
@media (min-width: 1200px) {
    .portfolio>.clear:nth-child(8n)::before {  
      content: '';
      display: table;
      clear: both;
    }
}

HTML

<div class="container">
    <div class="row v-wrapper portfolio">
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
            <div class="video-item-wrapper">
                <div class="video-image-wrapper">
                    <img src="http://placehold.it/600x400" class="img-responsive" />
                    <img src="http://placehold.it/50.png/09f/fff&text=>" class="play-item" />
                </div>
                <div class="video-details-wrapper"> <span>this is video short video title</span>

                </div>
            </div>
        </div>
        <div class="clear"></div> 
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
            <div class="video-item-wrapper">
                <div class="video-image-wrapper">
                    <img src="http://placehold.it/600x400" class="img-responsive" />
                    <img src="http://placehold.it/50.png/09f/fff&text=>" class="play-item" />
                </div>
                <div class="video-details-wrapper"> <span>this is long video title this is long video title this is long video title</span>

                </div>
            </div>
        </div>
        <div class="clear"></div> 
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
            <div class="video-item-wrapper">
                <div class="video-image-wrapper">
                    <img src="http://placehold.it/600x400" class="img-responsive" />
                    <img src="http://placehold.it/50.png/09f/fff&text=>" class="play-item" />
                </div>
                <div class="video-details-wrapper"> <span>this is very very long video title this is very very long video title this is very very long video title</span>

                </div>
            </div>
        </div>
        <div class="clear"></div> 
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
            <div class="video-item-wrapper">
                <div class="video-image-wrapper">
                    <img src="http://placehold.it/600x400" class="img-responsive" />
                    <img src="http://placehold.it/50.png/09f/fff&text=>" class="play-item" />
                </div>
                <div class="video-details-wrapper"> <span>this is video title</span>

                </div>
            </div>
        </div>
        <div class="clear"></div> 
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
            <div class="video-item-wrapper">
                <div class="video-image-wrapper">
                    <img src="http://placehold.it/600x400" class="img-responsive" />
                    <img src="http://placehold.it/50.png/09f/fff&text=>" class="play-item" />
                </div>
                <div class="video-details-wrapper"> <span>this is video title</span>

                </div>
            </div>
        </div>
        <div class="clear"></div> 
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
            <div class="video-item-wrapper">
                <div class="video-image-wrapper">
                    <img src="http://placehold.it/600x400" class="img-responsive" />
                    <img src="http://placehold.it/50.png/09f/fff&text=>" class="play-item" />
                </div>
                <div class="video-details-wrapper"> <span>this is video title this is video title this is video title this is video title</span>

                </div>
            </div>
        </div>
        <div class="clear"></div> 
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
            <div class="video-item-wrapper">
                <div class="video-image-wrapper">
                    <img src="http://placehold.it/600x400" class="img-responsive" />
                    <img src="http://placehold.it/50.png/09f/fff&text=>" class="play-item" />
                </div>
                <div class="video-details-wrapper"> <span>this is video title</span>

                </div>
            </div>
        </div>
        <div class="clear"></div> 
    </div>
</div>

Utilizing jQuery for optimizing vertical spacing between rows in Bootstrap layout (source)

I have identified an issue with the current approach where uneven heights of divs can result in unnecessary space adjustments. This script addresses the issue:

View the enhanced example on Fiddle

var row=$('.portfolio');
$.each(row, function() {
    var maxh=0;
    $.each($(this).find('div[class^="col-"]'), function() {
        if($(this).height() > maxh)
            maxh=$(this).height();
    });
    $.each($(this).find('div[class^="col-"]'), function() {
        $(this).height(maxh);
    });
});

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

What steps should I take when dealing with two dynamic variables in a mediator script within the WSO2 ESB?

I'm facing an issue with my if condition - it doesn't work properly when the value is static. However, when I make `annee2` and `annee1` static (for example =2019), it works fine. Here's the code snippet: <script language="js"&g ...

javascriptwso2wso2-esbwso2-enterprise-integratorwso2-micro-integrator

How come I am unable to connect my CSS to my EJS files?

Having difficulty linking my css files to my ejs files. Using a standard node.js/express setup, I'm attempting to connect my main.css file from the public/css directory to my index.ejs file in views. The html and routing are functioning correctly. Ple ...

htmlcssnode.jsexpressejs

Creating a global variable in Angular that can be accessed by multiple components is a useful technique

Is there a way to create a global boolean variable that can be used across multiple components without using a service? I also need to ensure that any changes made to the variable in one component are reflected in all other components. How can this be ac ...

javascriptangulartypescript

I am encountering a horizontal scroll bar despite setting the width to 100%

I am just starting out as a beginner in web development. I decided to create a webpage to practice my HTML and CSS skills. However, when I set the width of all elements to 100%, I noticed that I am getting a horizontal scroll bar. I have tried troubleshoot ...

javascripthtmlcss

Count the occurrences of values in a JSON object using JavaScript

I'm dealing with a JSON array in vanilla JavaScript (no JQuery) and I've hit a roadblock. My task is to identify each unique value for 'Service' and calculate the frequency of each value. For example, if the value 100 appears 3 times ...

javascriptjson

Is there a way to retrieve the title, description, and image URL of a URL through Ajax, similar to how Facebook shares a link?

Currently, I am developing a project that involves allowing users to submit a URL. The system will then extract the title, images, and description from the provided URL and offer the option to toggle between different images. Upon submission, these extrac ...

phpjavascriptajaxfacebookshare

The Photoswipe default user interface cannot be located

While attempting to incorporate PhotoSwipe into my website, I encountered an uncaught reference error related to The PhotoswipeUI_Default is not defined at the openPhotoSwipe function Below is the code snippet that I have been working on: <!doctyp ...

javascriptphphtmlcssphotoswipe

Struggling to align the Title Tags perfectly in the center of Images

When attempting to center align images and their post titles, I encountered an issue where the left part of the image and title were being cut off by a small margin. Despite trying various methods, I was unable to successfully center the title tags. You ca ...

javascriptjqueryhtmlcsscentering

Dealing with Failed Axios Requests in React

I'm having trouble figuring out what I'm doing incorrectly. My goal is for the Main component to pass the ajax request method to the child component InputForm. The child component would then return the results, which will be stored in the state ...

javascriptajaxreactjsaxios

Tips for building an interactive button with changing content and retrieving variable information when the button is clicked in an Angular framework

Received dynamic data from the server is shown below: { "data": [ { "id": 4, "first_name": "Eve", "last_name": "Holt", "lat":"25.6599899", "lng":"45.3664646", "status":"0" ...

javascriptangulartypescript

Quick question about utilizing Ajax with spans

<span name = "menu"> <!-- javascript here --> <!-- content loaded via ajax --> </span> <span name = "content"> <!-- content loaded via ajax --> <!-- updated by buttons from the menu--> </span> Seeking a ...

javascriptajaxhtml

Loading an AJAX form submission in a replacement page with jQuery Mobile, seamlessly updating my changes

I have set up a jQuery mobile form that initiates an ajax request. The issue I am facing is not with the request itself, but rather with how jQuery mobile reloads the page content upon submission. This causes an error message I added to the current page to ...

jqueryajaxformsjquery-mobile

The success function of the ajax request is not initiating until I halt the page

I am currently working on a server using the Django 1.4 development environment on Open-SUSE. The Issue I'm Facing Although my jquery ajax request is triggered, the success function does not execute until I manually stop the page in my browser. Att ...

jqueryajaxdjangoformsprogress-bar

Preventing click events with pointer-events property in CSS while still allowing scrolling

Is there a way to use pointer-events: none to disable click events on a specific container while still allowing scroll functionality and an overlay? You can view my fiddle here: https://jsfiddle.net/1eu6d3sq/1/ Currently, when I apply pointer-events: non ...

javascripthtmlcss

Bootstrap implementation for personalized notifications

I am utilizing bootstrap notifications to display important messages to my users. Within my code, there is a DIV element named <div class="notifications bottom-right"></div> Theoretically, the library should be handling the JavaScript. I ha ...

phpjquerycsstwitter-bootstrap

Simulating service calls in Jest Tests for StencilJs

When testing my StencilJs application with Jest, I encountered an issue with mocking a service class method used in a component. The service class has only one function that prints text: The Component class: import {sayHello} from './helloworld-servi ...

javascripttypescriptjestjsstenciljs

What improvements can I make to enhance my method?

I have a block of code that I'm looking to clean up and streamline for better efficiency. My main goal is to remove the multiple return statements within the method. Any suggestions on how I might refactor this code? Are there any design patterns th ...

javascriptooptypescriptrefactoring

Encountered a glitch during the npm installation process for mui core

I recently set up a new create-react-app and am still encountering the same error message. After installing MUI, I'm getting an 'unable to resolve dependency tree' issue. npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve depende ...

htmlreactjsmaterial-ui

What is the best way to trigger a controller action using jQuery in your application.js file?

Currently, I am incorporating the jQuery autocomplete plugin into my project and looking to personalize a specific event: select: function(event, ui) { $('.topic_field').val(ui.item.topic.name); return false; This event es ...

javascriptjqueryruby-on-railsrubyruby-on-rails-3

Check to see if the upcoming birthday falls within the next week

I'm trying to decide whether or not to display a tag for an upcoming birthday using this boolean logic, but I'm a bit confused. const birthDayDate = new Date('1997-09-20'); const now = new Date(); const today = new Date(now.getFullYear( ...

javascriptangulartypescriptdate