Split bootstrap column in n rows with equal height, filling parent height

Question

I'm quite new to Bootstrap, I'm struggling with the grid system while trying to reproduce the following template:

In this example I have 3 columns:

1. first columns holds some info/pictures. This column holds a lot of data.
2. second column holds 3 (but potentially n) contact info (email, address, phone number, ...)
3. third column holds some random info

I'd like to split the 2nd column into 3 rows, with equal height. What I need to do is to vertically center these 3 rows in the 2nd column, and possibly expand their heights to fill the parent (2nd column) height.

This is an example of what I've achieved till now:

<div class="row container">
  <div class="col-md-4 first">
    <p> ... VERY LONG CONTENT ... </p></div>
  <div class="col-md-4 second">
    <div class="row">
      Telephone number
    </div>
    <div class="row">
      Address
    </div>
    <div class="row">
      email
    </div>
  </div>
  <div class="col-md-4 third">
    Something else, vertically centered
  </div>
</div>

Find here a bootply with my code

As an alternative, instead of 3 subrows in the 2nd column, I would also be happy to use a <ul>.

How can I do this? Is there any bootstrap class that I can apply to all 3 rows in order to have them fullfill the parent height?

Thank you in advance

Answer 1

Try this one

HTML

<div class="container">
<h6>parent row</h6>
<div class="row parent">
    <div class="col-md-4 column">
        <p style="padding-top: 260px;">Column one</p>
    </div>
    <div class="col-md-4 column">
        <div class="row subRow">
            <p>Subrow 1</p>
        </div>
        <div class="row subRow">
            <p>Subrow 2</p>
        </div>
        <div class="row subRow">
            <p>Subrow 3</p>
        </div>
    </div>
    <div class="col-md-4 column">
        <p style="padding-top: 260px;">Column Three</p>
    </div>
</div>

CSS

.subRow {
    color: orange;
    border: 3px solid orange;
    height: 100px;
    padding-left: 5px;
}

.container .parent {
    border: 3px solid green;
}

.container {
    color: green;
}

.column {
    border:3px solid red;
    text-align: center;
    color: red;
}

I hope it will help someone

Answer 2

If you are open to use another css library along with bootstrap.You can go ahead with YAML CSS. Which has a good feature for grid system with customization.

What you want can be achieved as follows in yaml.

    <div class="ym-grid ym-equalize" style="border:2px solid greenyellow;">
        <div class="ym-g33 ym-gl">
            <div class="ym-gbox-left" style="border:2px solid red;">
                <h6>Left Grid Column</h6>
                <p> ... VERY LONG CONTENT ... </p>
                <p> ... VERY LONG CONTENT ... </p>
                <p> ... VERY LONG CONTENT ... </p>
                <p> ... VERY LONG CONTENT ... </p>
                <p> ... VERY LONG CONTENT ... </p>
                <p> ... VERY LONG CONTENT ... </p>
                <p> ... VERY LONG CONTENT ... </p>
                <p> ... VERY LONG CONTENT ... </p>
                <p> ... VERY LONG CONTENT ... </p>

            </div>
        </div>
        <div class="ym-g33 ym-gl">
            <div class="ym-gbox-left" style="border:2px solid red;">
                <div class="ym-grid" >
                    <div class="ym-gbox" style="border:2px solid orange;">
                        <br>
                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing   elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna   aliquyam erat, sed diam voluptua.</p>
                        <br>
                        <br>
                    </div>
                </div>
                <div class="ym-grid" >
                    <div class="ym-gbox" style="border:2px solid orange;">
                         <br>
                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing   elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna   aliquyam erat, sed diam voluptua.</p>
                        <br>
                        <br>
                    </div>
                </div>
                <div class="ym-grid" >
                    <div class="ym-gbox" style="border:2px solid orange;">
                         <br>
                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing   elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna   aliquyam erat, sed diam voluptua.</p>
                        <br>
                        <br>
                    </div>
                </div>
            </div>
        </div>
        <div class="ym-g33 ym-gr">
            <div class="ym-gbox-right" style="border:2px solid red;">
                <h6>Right Grid Column</h6>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing   elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna   aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo   dolores et ea rebum. Stet clita kasd gubergren.</p>
            </div>
        </div>
    </div>

---

---

Excuse the inline styling ... used for reference. Hope this Helps :)

Answer 3

/* used this code it's help */

.first{
    background: yellow;
    display: table-cell;
  float:none;
}
.second{
    background: white;
    display: table-cell;
  float:none;
}
.third{
    background: orange;  
  display: table-cell;
  float:none;
}

Live Demo

Answer 4

I have added css styles to hold columns in place as shown in this answer:

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

To fullfill the middle column height I have added javascript which counts the left column height and redistributes it to the middle column rows:

$(".parent").each(function(){
    var $children = $(this).children();
    $children.height($(".height_parent").height() / $children.length - 2);
});

In HTML parent is class added to the middle column div and height_parent class added to the left column div.

Here is updated bootply.