How to make the left column of bootstrap fill to the entire height of the screen?

Question

I created a website taking the help of bootstrap template. When the row is divided into two columns with col-sm-4 and col-sm-8. The content in col-sm-4 is not taking the entire screen upto the footer. But second column is taking the entire screen. Can anyone suggest how to get entire screen to the left column ?. Below is the fiddle . Once you check it out, you would understand what i am saying. https://jsfiddle.net/he35pj0n/2/

<div class="container">
  <div class="row">
    <div class="col-sm-4" style="background-color:cyan">
      <h2>About Me</h2>
      <h5>Photo of me:</h5>
      <div class="fakeimg">Fake Image</div>
      <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
      <h3>Some Links</h3>
      <p>Lorem ipsum dolor sit ame.</p>
      <ul class="nav nav-pills nav-stacked">
        <li class="active"><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
      <hr class="hidden-sm hidden-md hidden-lg">
    </div>
    <div class="col-sm-8"  style="background-color:yellow">
      <h2>TITLE HEADING</h2>
      <h5>Title description, Dec 7, 2017</h5>
      <div class="fakeimg">Fake Image</div>
      <p>Some text..</p>
      <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
      <br>
      <h2>TITLE HEADING</h2>
      <h5>Title description, Sep 2, 2017</h5>
      <div class="fakeimg">Fake Image</div>
      <p>Some text..</p>
      <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
    </div>
  </div>
</div>

<div class="jumbotron text-center" style="margin-bottom:0">
  <p>Footer</p>
</div>

I am using 3.4.0. actually i have directly used the link https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css — MAKHAM NAGA BHAVANI, Mar 12 '19 at 15:28
Yeah, I was searching for bootstrap title. I didn't found it . so i used this tag here — MAKHAM NAGA BHAVANI, Mar 12 '19 at 15:29
@MAKHAMNAGABHAVANI, possible duplicate of https://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height — Naga Sai A, Mar 12 '19 at 15:32

score 2 · Accepted Answer · answered Mar 12 '19 at 15:42

To achieve expected result, use below option of using flex

.row{
  display: flex
}

.row > div {
  display: flex;
  flex-direction: column;
}

codepen - https://codepen.io/nagasai/pen/RdjrZm

Refer this link for more options - How can I make Bootstrap columns all the same height?

How to make the left column of bootstrap fill to the entire height of the screen?

1 Answers1