equal column height in Bootstrap 3

Question

I'm using bootstrap 3 which uses float to align the content. UI is breaking when the height of the 1st column is increased. Don't want to add fixed height to the any of the column. eg. Here it is 2 column grid.. So the height of 1st and 2nd column should be same and 3rd and forth column should be same.. and all 4 column should be inside 1 parent.. if the height if the 1st column increases then height of the 2nd column should increase. I don't want to do it using flex

Is there any CSS fix. Don't want to add any js

Thanks in advance

.left {
  float: left;
  width: 49%;
  border: 1px solid red;
}

.col1 {
  background: red;
}

.col2 {
  background: black
}

.col3 {
  background: blue;
}

.col4 {
  background: green;
}

<div class="left col1">
  Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum. Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae
  quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin
  ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum. Taciti primis cum varius malesuada
  lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus
  mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum.
  Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis
  ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales
  integer tempus eros egestas condimentum. Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum
  venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan
</div>
<div class="left col2">
  Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum. Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae
  quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin
  ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum. Taciti primis cum varius malesuada
  lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus
  mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum.
  Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis
  ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin ante vivamus vitae.
</div>
<div class="left col3">
  Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum. Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae
  quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin
  ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum. Taciti primis cum varius malesuada
  lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus
  mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum.
  Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis
  ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin ante vivamus vitae.
</div>
<div class="left col4">
  Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum. Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae
  quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin
  ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum. Taciti primis cum varius malesuada
  lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus
  mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum.
  Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis
  ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin ante vivamus vitae.
</div>

It's not entirely clear what you want, but if you remove height: 300px from .col1 will you get the desired result? — s.kuznetsov, Nov 23 '20 at 06:40
@sergeykuznetsov I have edited the code please check. Hope you understood the prob — Xenio Gracias, Nov 23 '20 at 06:45
Do you want to make all div's the same height, focusing on the maximum div? — s.kuznetsov, Nov 23 '20 at 07:03
no.. Here it is 2 column grid.. So the height of 1st and 2nd column should be same and 3rd and forth column should be same.. and all 4 column should be inside 1 parent.. I don't want to do it using flex — Xenio Gracias, Nov 23 '20 at 07:08
Now I understand you. But why don't you want to use flex? After all, it's easy to do with flex. — s.kuznetsov, Nov 23 '20 at 07:10
Does this answer your question? [How can I make Bootstrap columns all the same height?](https://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height) — CBroe, Nov 23 '20 at 08:34
@XenioGracias, I made almost the same solution as Moiz-ul-waqar, but when increasing the content, I have the same problem. To be honest, I do not know the bootstrap, and have no experience with this framework. Sorry. — s.kuznetsov, Nov 23 '20 at 08:37
@CBroe Hi, This did not help me. It broke when i changed it to col-sm-6 — Xenio Gracias, Nov 23 '20 at 08:40
Changed what exactly? Please give a proper [mre] of what you currently have. The code you have shown does not even look like actual bootstrap 3 classes to begin with? — CBroe, Nov 23 '20 at 08:42

Moiz-ul -waqar · Answer 1 · 2020-11-23T08:21:29.077

Well Bootstrap has its own grid system. Plus you are also not using classes which are defined in bootstrap 3. Here is the solution that I have created with the help of Bootstrap 3.Make sure you see the solution on Full Page Display.

@media screen and (max-width: 768px) {
    .col4{
        margin-top: 0px !important;
    }
}

.col1 {
  background: red;
}

.col2 {
  background: black;
  color: white;
}

.col3 {
  background: blue;
}

.col4 {
  background: green;
  margin-top: -440px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- Latest compiled and minified CSS (MUST ADD THIS CDN)  -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 col1">
                Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum. Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae
                quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin
                ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum. Taciti primis cum varius malesuada
                lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus
                mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum.
                Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis
                ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales
                integer tempus eros egestas condimentum. Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum
                venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan
                Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum. Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae
                quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin
                ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum. Taciti primis cum varius malesuada
                lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus
                mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum.
                Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis
                ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales
                integer tempus eros egestas condimentum. Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum
                venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan
            </div>
            <div class="col-md-6 col2">
                Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum. Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae
                quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin
                ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum. Taciti primis cum varius malesuada
                lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus
                mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum.
                Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis
                ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales
                integer tempus eros egestas condimentum. Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum
                venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan
            </div>
        </div>
        <div class="row">
            <div class="col-md-6 col3">
                Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum. Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae
                quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin
                ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum. Taciti primis cum varius malesuada
                lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus
                mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum.
                Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis
                ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales
                integer tempus eros egestas condimentum. Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum
                venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan
            </div>
            <div class="col-md-6 col4">
                Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum. Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae
                quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin
                ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum. Taciti primis cum varius malesuada
                lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus
                mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum.
                Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis
                ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales
                integer tempus eros egestas condimentum. Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum
                venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan
                Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum. Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae
                quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin
                ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum. Taciti primis cum varius malesuada
                lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus
                mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum.
                Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis
                ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales
                integer tempus eros egestas condimentum. Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum
                venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan
            </div>
        </div>
    </div>

    
   
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

        <!-- Latest compiled and minified JavaScript (MUST ADD THIS CDN)  -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

Make sure you include Bootstrap 3 cdn for css and js in your html file. I have used online cdn.You can also use downloaded one. Here is the link for Bootstrap 3 CDN. You can visit this link this for Bootstrap 3 Grid System.

Thank you for answering.. Can you please increase the content of the 1st column.. The issue is when you increase the content of 1st div. And the column should be inside 1 Row. Thanks — Xenio Gracias, Nov 23 '20 at 08:02
I have edited the code for you. You can use negative margin to adjust that particular div. Plus I have also increased content of 1st column. — Moiz-ul -waqar, Nov 23 '20 at 08:16
This is not what I was looking for.. Here it is 2 column grid.. So the height of 1st and 2nd column should be same and 3rd and forth column should be same.. and all 4 column should be inside 1 parent.. if the height if the 1st column increases then height of the 2nd column should increase. I don't want to do it using flex — Xenio Gracias, Nov 23 '20 at 08:34

equal column height in Bootstrap 3

1 Answers1