looking to set equal heights to columns in Bootstrap - no Table

Question

I want to set equal heights to my columns in Bootstrap 3. I CAN'T set the rows to 'display: table;' or anything like that cause it screws up the layout of everything.

<article>

 <div id="post-<?php the_ID(); ?>"> <!-- just gets the post's id --> 

   <div class="row">

    <div class="col-md-8 indx-img" style="background-image:url('...');">
    </div>

    <div class="col-md-4 text-cell">
        <h1>title</h1>
        <h3>category</h3> 
    </div>

   </div><!-- /#row -->

 </div><!-- /#post -->

</article>

The content is on the right, a column with a background image is on the left. That column needs a height so that the background image is shown, I want that height applied to the column with the text.

I want it to be responsive height, what I used so far for that is

CSS

indx-img {
 padding: 16% 0;
}

problem is that height doesn't apply the the column with the text. The ultimate goal is to have the two columns the same height, with the text vertically centred in the 'text-cell' column

possible duplicate of [setting equal heights to columns](http://stackoverflow.com/questions/30389101/setting-equal-heights-to-columns) — gautsch, May 23 '15 at 03:44
It is a duplicate, but I have re-asked the question because the answers do not address my issue. I cannot use the answers provided, and re-wrote the question to address that — user3550879, May 23 '15 at 03:54

score 2 · Accepted Answer · 2015-05-23T19:32:14.577

If you can't use any css solutions because they will break your layout, you can use javascript.

Here we define a function named resize which will loop through the posts.
If the page is larger than the break point, set the height of the post container to the height of the image. Then set the height of the text container to 100% once.

If the page is smaller than the break point, check to see if the height is set. If it is we remove the height setting to allow natural expansion and contraction.

We call the resize function once on page load, then assign it to the window resize handler

(Demo)

<script type="text/javascript">
    window.onload = function() {
        (function () {
            "use strict";
            var resize = function () {
                var posts = document.querySelectorAll('[id^="post"] .row'), post;
                for (var i = 0; post = posts[i]; i++) {
                    if (window.innerWidth > 768) {
                        post.style.height = post.firstElementChild.offsetHeight + 'px';
                        if(post.lastElementChild.style.height !== '100%') {
                            post.lastElementChild.style.height = '100%';
                        }
                    } else {
                        if(post.style.height !== '')
                            post.style.height = '';
                    }
                }
            };
            window.onresize = resize;
            resize();
        })();
    }
</script>

that looks like a really cool solution. where do I put that function exactly? I am using Wordpress, can it be placed in my functions.php, or does it need to go in the header/head ? — user3550879, May 23 '15 at 19:24

score 0 · Answer 2 · answered May 23 '15 at 22:54

I use the matchHeight plugin for this kind of issue all the time and it works perfectly with Bootstrap.

Just install the plugin, add a class of matchHeight to your col-md-8 and col-md-4 columns:

  <div class="matchHeight col-md-8 indx-img" style="background-image:url('...');">
</div>

<div class="matchHeight col-md-4 text-cell">
    <h1>title</h1>
    <h3>category</h3> 
</div>

And add the following to your javascript:

$('.matchHeight').matchHeight();

You can then use this fix throughout your site by simply repeating the above steps, even several times on the same page (it automatically scopes to within the current "row" element so if you have 3 rows with 6 elements then only those elements in any given row are matched in size).

looking to set equal heights to columns in Bootstrap - no Table

2 Answers2