Bootstrap columns of rows with same height - or same space between each row

Question

I wish bootstrap had a build in feature where it would assign wrapper div of any item with height based on the height of largest div.

In this fiddle example you will notice that i have video-item-wrapper of different height which breaks the design, I can assign min-height but then i have to write css for different screen size (& still it will break at some point)

Can i with jquery get the max- height of div and assign that to all video-item-wrapper dive so that all divs will be of same height and will not break design also

<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 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" />
                </div>
                </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="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" />
                </div>
                </div>
                <div class="video-details-wrapper"> <span>this is 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/fff" />
                </div>
                </div>
                <div class="video-details-wrapper"> <span>this is 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/fff" />
                </div>
                </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="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" />
                </div>
                </div>
                <div class="video-details-wrapper"> <span>this is video title</span>

                </div>
            </div>
        </div>
    </div>
</div>

Look in the Grid section of the doc for responsive resets. Also see: http://stackoverflow.com/questions/24571062/gap-in-bootstap-stacked-rows In the Bootply on my answer there, the technique I use is probably more tenable given the complexity of your markup. — jme11, May 07 '15 at 09:02
Great. You can mark your own answer as correct, but it would probably be helpful if you added the CSS and markup directly in the answer. — jme11, May 07 '15 at 10:30

score 0 · Accepted Answer · edited May 23 '17 at 12:14

Here my solution which works fine and without any hasle..

https://fiddle.jshell.net/w75vaho2/30/show/

Solution based on comment made by jme11 user

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>

Using jQuery (based on this)

I noticed that this approach has a flaw for example suppose first largest div height is 400px then it apply across all divs in all row event if they don't have more than 1 line of title adds necessary space to other rows which only have small title,

Fiddle example

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);
    });
});

Bootstrap columns of rows with same height - or same space between each row

1 Answers1