Equal Column Height in Bootstrap 4

Question

In this design, I have a little unconventional DIV as shown below. I could use height and do it, but I want it to change dynamically: For example, if a DIV has more content and changes in height in one of the blocks on the right, the left DIV automatically adjusts its height. I wonder if flex can help. Here's how it should change:

I have this HTML:

<div class="container"> <div class="row row-eq-height"> <div class="col-sm-8 col-8"> <div class="black"> <p>Bar Graph or Line Graph</p> </div> </div> <div class="col-sm-4 col-4"> <div class="red"> <p>numbers</p> </div> <div class="purple"> <p>numbers</p> </div> <div class="green"> <p>numbers</p> </div> <div class="blue"> <p>numbers</p> </div> </div> </div> </div> 

and CSS:

 p { color: #fff; } .black { background-color: black; } .green { background-color: green; } .red { background-color: red; } .blue { background-color: blue; } .purple { background-color: purple; } 

JSFiddle Demo

Answer 1

You can use flexbox for this.

Update

And one more way:

https://jsfiddle.net/persianturtle/ar0m0p3a/5/

 .row-eq-height > [class^=col] { display: flex; flex-direction: column; } .row-eq-height > [class^=col]:last-of-type div { margin: 10px; } .row-eq-height > [class^=col]:last-of-type div:first-of-type { margin-top: 0; } .row-eq-height > [class^=col]:last-of-type div:last-of-type { margin-bottom: 0; } .row-eq-height > [class^=col]:first-of-type .black { flex-grow: 1; } 

Update

Better way with more specific classes:

https://jsfiddle.net/persianturtle/ar0m0p3a/3/

 .row-eq-height > [class^=col]:first-of-type { display: flex; } .row-eq-height > [class^=col]:first-of-type .black { flex-grow: 1; } .blue p { margin: 0; } 

Source path:

https://jsfiddle.net/persianturtle/ar0m0p3a/1/

 [class^=col] { display: flex; flex-direction: column; } [class^=col] div { flex-grow: 1 } 

Answer 2

You are using Bootstrap 4, right? Bootstrap 4 implements flexbox by default, and you can solve it very simply using pure classes. Bootstrap 4 provides:

 <div class="container"> <div class="row"> <div class="col-sm-8 col-8 black"> <p>Bar Graph or Line Graph</p> </div> <div class="col-sm-4 col-4 d-flex align-content-around flex-wrap"> <div class="red"> <p>numbers and more and so on and on and on</p> </div> <div class="purple"> <p>numbers</p> </div> <div class="green"> <p>numbers</p> </div> <div class="blue"> <p class="mb-0">numbers</p> </div> </div> </div> </div> 

JS Script Link: https://jsfiddle.net/ydjds2ko/

More details:

• You do not need the row-eq-height class (it is not in Bootstrap4 anyway), since equal height is by default.

• The first div with class col-sm-8 has the correct height, it just doesn't appear on a black background, because the inner div has its own height. I just deleted the inner div and added the black class to col. If you need an inner div, give it a class (Bootstrap4) h-100 that adjusts the height to the parent element.

• div with class col-sm-4 gets class d-flex align-content-around flex-wrap. They align the contents of the div. Bootstrap doku: https://getbootstrap.com/docs/4.0/utilities/flex/#align-content

  • Set width of div inside this container in widht of parent with w-100

• Since <p> adds margin at the bottom, your blue div at the ends does not close with a black div. I added the “mb-0” class, which sets the lower bound of the “0” field so you can see that it works.

This should work if the right or left div is the one with the greater height property.

Edit: Added classes to align content.

Answer 3

Here's a very simple Bootstrap method . You do not need extra CSS.

https://www.codeply.com/go/J3BHCFT7lF

 <div class="container"> <div class="row"> <div class="col-8"> <div class="black h-100"> <p>Bar Graph or Line Graph</p> </div> </div> <div class="col-4 d-flex flex-column"> <div class="red mb-2"> <p>numbers</p> </div> <div class="purple mb-2"> <p>numbers with more lines of content that wrap to the next line</p> </div> <div class="green mb-2"> <p>numbers</p> </div> <div class="blue"> <p>numbers</p> </div> </div> </div> </div> 

It uses the Bootstrap 4 utility classes to get the desired column height.

---

on this topic:
loading height 4 lines