Split bootstrap column into n lines with equal height, filling parent height
I am new to Bootstrap, I am grid
struggling with the system trying to reproduce the following pattern:
In this example, I have 3 columns:
- The first columns contain information / pictures. This column contains a lot of data.
- the second column contains 3 (but potentially n) contact information (email, address, phone number, ...)
- The third column contains some random information
I would like to split the 2nd column into 3 rows, with equal height . What I need to do is vertically center these 3 rows in the second column and maybe expand their heights to fill the height of the parent (2nd column).
This is an example of what I have achieved so far:
<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 bootply here with my code
Alternatively, instead of the 3 approaches in the second column, I also happily use <ul>
.
How can i do this? Is there any bootstrap class I can apply to all 3 rows so that they fill the parent height?
Thank you in advance
source to share
If you are open to using another css library along with bootstrap. You can use YAML CSS. Which has a nice feature for a customizable grid.
What you want can be achieved like this 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>
Sorry inline style ... used for reference. Hope it helps :)
source to share
Try this
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 this helps someone
source to share
I added CSS styles to keep the columns in place, as shown in this:
.row {
overflow: hidden;
}
[class*="col-"] {
margin-bottom: -99999px;
padding-bottom: 99999px;
}
To fill in the middle column height, I added javascript that calculates the height of the left column and reallocates it to the rows of the middle column:
$(".parent").each(function(){
var $children = $(this).children();
$children.height($(".height_parent").height() / $children.length - 2);
});
parent
Added a class to the middle column div and a class height_parent
added to the left column div in HTML .
Bootply is updated here .
source to share