Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Equal height of columns in Bootstrap 4

I have a little non-conventional DIV in this design as shown below. I could use a height and do it but I want it to change dynamically: enter image description here For instance, if the DIV has more content and the height changes in one of the block on the right, the left DIV auto adjust it's height as well. I wonder if flex could help. Here's how it should change to: enter image description here

I have this HTML so far:

<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

like image 718
Elaine Byene Avatar asked Oct 06 '17 17:10

Elaine Byene


1 Answers

You're using Bootstrap 4, right? Bootstrap 4 implements flexbox by default and you can solve this very easy while using purely 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 Fiddle link: https://jsfiddle.net/ydjds2ko/

Details:

  • You don't need the class row-eq-height (it's not in Bootstrap4 anyway) because equal height is default.

  • The first div with the class col-sm-8 has the right height, it's just not visible with the black background, because the inner div has it's own height. I just removed the inner div and added the class black to the col. If you need inner div, give it the (Bootstrap4) class h-100 which adjusts the height to the parent element.

  • the div with the class col-sm-4 get's a the classes d-flex align-content-around flex-wrap. They're aligning the content divs. Bootstrap doku: https://getbootstrap.com/docs/4.0/utilities/flex/#align-content

    • Set the width of the divs inside this container at the widht of the parent with w-100
  • Because the <p> adds a margin at the bottom, your blue div at the ends doesn't close flush with the black div. I added the class "mb-0", which sets the margin bottom to "0" so you can see it works.

That should work wether the right or left div is the one with the bigger height property.

Edit: added classes for content alignment.

like image 165
programmiri Avatar answered Oct 20 '22 04:10

programmiri