Children of table-cell bootstrap columns not occupying full height

Question

I have 3 different account cards with varying content in each card. I want all the cards (which reside inside a col-md-4 class) to occupy the full height of the column.

I gathered from [this][1] thread that one way to achieve that is to use display: table. The main issue is that I have a div inside the my columns which I need to occupy the full height of the column. I set those divs to display: inline-block and height to 100% but divs seem to be behaving as if height was set to auto and not occupying full height

Here is my html:

    .container {
     display: table;
    }

    .row {
     display: table-row;
     height: 100%;
    }

    .col-md-4 {
     display: table-cell;
     float: none;
     height: 100%;
    }

   

    .account {

  background: $overlay-color;
  text-align: center;
  display: inline-block;
  margin: 0;
  padding: 0;
  height: 100%;

    }

 <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <div class="account">
                        <h1 class="type">MINI ACCOUNT</h1>

                        <div class="details">
                            <h2 class="ad">A perfect account to start with!</h2>
                            <p class="detail">Spreads from 2.3 pips</p>
                            
                        </div>
                        
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="account">
                        <h1 class="type">STANDARD ACCOUNT</h1>

                        <div class="details">
                            <h2 class="ad">An ideal account for every investor!</h2>
                            <p class="detail">Spreads from 1.9 pips</p>
                            <p class="detail">Minimum deposit = $25 000</p>
                            
                        </div>
                        
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="account">
                        <h1 class="type">EXCLUSIVE ACCOUNT</h1>

                        <div class="details">
                            <h2 class="ad">An exclusive account for exclusive clients!</h2>
                            <p class="detail">Spreads from 0 pips</p>
                            <p class="detail">Minimum deposit = $50,000</p>
                            <p class="detail">Access to Daily Technical Analysis</p>
                            
                        </div>
                        
                    </div>
                </div>
            </div>
        </div>

can you tell me in short exactly what you want , try **https://jsfiddle.net/4nvnubop/1/** — Night Programmer, Apr 04 '18 at 09:39
I want the divs with class 'account' to all be same height regardless of content — junior_2969, Apr 04 '18 at 09:41

score 2 · Accepted Answer · answered Apr 04 '18 at 09:43

Try with flexbox

.container {
    display: table;
}
.row {
    display: flex;
}
.col-md-4 {
    float: none;
}
.account {
 background: rgba(0, 0, 0, 0.34);
 text-align: center;
 display: inline-block;
 margin: 0;
 padding: 0;
 height: 100%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="account">
        <h1 class="type">MINI ACCOUNT</h1>
        <div class="details">
          <h2 class="ad">A perfect account to start with!</h2>
          <p class="detail">Spreads from 2.3 pips</p>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="account">
        <h1 class="type">STANDARD ACCOUNT</h1>
        <div class="details">
          <h2 class="ad">An ideal account for every investor!</h2>
          <p class="detail">Spreads from 1.9 pips</p>
          <p class="detail">Minimum deposit = $25 000</p>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="account">
        <h1 class="type">EXCLUSIVE ACCOUNT</h1>
        <div class="details">
          <h2 class="ad">An exclusive account for exclusive clients!</h2>
          <p class="detail">Spreads from 0 pips</p>
          <p class="detail">Minimum deposit = $50,000</p>
          <p class="detail">Access to Daily Technical Analysis</p>
        </div>
      </div>
    </div>
  </div>
</div>

@junior_2969 Didn't get as [this](https://stackoverflow.com/questions/19089384/twitter-bootstrap-3-two-columns-full-height) is giving 100% height to `col-md` — Athul Nath, Apr 04 '18 at 10:07
its ok thank you for trying, I will just use flexbox I guess — junior_2969, Apr 04 '18 at 10:31

Children of table-cell bootstrap columns not occupying full height

1 Answers1