3

I have this code

HTML:

<div class="container-fluid">
    <div class="row">

        <div class="col-md-6">
            <p>Line</p>
            <p>Line</p>
            <p>Line</p>
            <p>Line</p>
            <p>Line</p>
            <p>Line</p>

        </div>
        <div class="col-md-6">
            <p>Line2</p>
            <p>Line2</p>

        </div>

    </div>
</div>

As you can see two columns are not equal and each has a height content.

I tried to make this example in jsfiddle but clearly we did ... but I put the link

I tried to import bootstrap but not working

I also found this example in the documentation bootstrap but failed to implement it

Can you help me please implement this example (if possible in jsdfidle)?

Thanks in advance!

Marius
  • 1,181
  • 3
  • 15
  • 23
  • Interesting read: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks – Salketer Oct 05 '15 at 13:03
  • 1
    Possible duplicate of [How to Force Child Div to 100% of Parent's Div Without Specifying Parent's Height?](http://stackoverflow.com/questions/1122381/how-to-force-child-div-to-100-of-parents-div-without-specifying-parents-heigh) – Salketer Oct 05 '15 at 13:03
  • Bootstrap, or any 'normal' framework won't support this. Also, you don't want to do this with any kind of javascript. No, you want to use flexbox. Relevant article; http://osvaldas.info/flexbox-based-responsive-equal-height-blocks-with-javascript-fallback (only use JS if the browser is really outdated). – Steyn Oct 05 '15 at 13:10

2 Answers2

0

try adding this to your CSS:

.row [class*="col-"]{
  margin-bottom: -99999px;
  padding-bottom: 99999px;
}

.row{
  overflow: hidden; 
}

https://jsfiddle.net/DTcHh/12810/

Or use flexbox:

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}

https://jsfiddle.net/DTcHh/12811/

martincarlin87
  • 10,848
  • 24
  • 98
  • 145
  • I think not you understand divs left and right must be in line and have the same height regardless of content. We div The red is higher than blue – Marius Oct 05 '15 at 13:08
  • if they must be inline regardless of the viewport width then change the col class to `col-xs-6` instead of `col-md-6`. – martincarlin87 Oct 05 '15 at 13:12
  • Try the other solution I provided below, I came across the similar issue and It worked for me pretty well, Its a very simple to use JS code. – CreativePS Oct 05 '15 at 13:16
  • it looks like it will work, but if OP wants the columns to stay inline then he needs to use the appropriate grid class anyway. – martincarlin87 Oct 05 '15 at 13:27
  • http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height%20#answer-19695851 – Jay Oct 05 '15 at 14:53
0

This works for me well, hope it will resolve your issue of equalizing height.

Just apply class "eq_height" in the DIVs you want to make equal and include the code below in your page

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script>
    $(document).ready(function(){

    var highestBox = 0;
        $('.container-fluid .eq_height').each(function(){  
                if($(this).height() > highestBox){  
                highestBox = $(this).height();  
        }
    });    
    $('.container-fluid .eq_height').height(highestBox);

});
</script>

This will take the height of biggest div and equalize according to it.

CreativePS
  • 1,105
  • 7
  • 15