Quantcast
Channel: Active questions tagged row - Stack Overflow
Viewing all articles
Browse latest Browse all 445

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

$
0
0

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

enter image description here

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


Viewing all articles
Browse latest Browse all 445

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>