Bootstrap 3 Panel 100% height inside column

Jaka Konda Published at Dev

Jaka Konda

I have simple 3 column layout with bootstrap. Each column inside has a panel. My is goal that each panel has 100% height of it's parent and that all of the columns are same height (solved using display: flex). I tried with display table and relative/absolute positioning but nothing came up with desired result. I'd like to avoid fixed values e.g. height: 300px etc.

Thanks!

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
/* Doesn't work */
/*
    .col-sm-4 {
        position: relative;
    }

    .panel-default {
        height: 100%;
        position: absolute;
    }
*/

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row row-eq-height">
    <div class="col-sm-4" style="background: red">
      <div class="panel panel-default">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tristique gravida ligula. Aliquam erat volutpat. Fusce quam erat, porttitor ac ante sed, tempus fringilla nisl. Phasellus sit amet orci volutpat, hendrerit metus vitae, dapibus nunc.
          Phasellus eros mauris, iaculis quis massa vel, dictum sagittis mauris. Donec egestas sem venenatis vehicula facilisis. Mauris in ultrices augue. Etiam eros libero, malesuada nec luctus quis, aliquam nec massa. Fusce vitae hendrerit nibh, eget
          hendrerit mauris. Aliquam quis sem ipsum. Phasellus aliquet rhoncus tellus ac imperdiet. Sed nec lacus at erat elementum efficitur vel in magna. Vestibulum ac enim id ligula iaculis ultricies at facilisis lorem. Nullam lobortis ultrices felis</div>
      </div>
    </div>
    <div class="col-sm-4" style="background: green">
      <div class="panel panel-default">
        <div class="panel-body">Col 2</div>
      </div>
    </div>
    <div class="col-sm-4" style="background: blue">
      <div class="panel panel-default">
        <div class="panel-body">Nullam nec ex metus. Curabitur mollis sem vitae augue ultrices ornare. Phasellus efficitur viverra turpis, nec scelerisque purus rutrum vel. Ut pellentesque congue tincidunt. Nulla et nulla velit. Quisque pellentesque mi ac metus faucibus pretium.
          Duis sit amet vestibulum dolor.
          </div>
        </div>
      </div>
    </div>
  </div>

Shehary

This can solve the problem and avoid using fixed values e.g. height: 300px.

.row-eq-height, .row-eq-height > div[class*='col-'] {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex:1 1 auto;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row row-eq-height">
<div class="col-sm-4" style="background: red">
  <div class="panel panel-default">
	<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tristique gravida ligula. Aliquam erat volutpat. Fusce quam erat, porttitor ac ante sed, tempus fringilla nisl. Phasellus sit amet orci volutpat, hendrerit metus vitae, dapibus nunc.
	  Phasellus eros mauris, iaculis quis massa vel, dictum sagittis mauris. Donec egestas sem venenatis vehicula facilisis. Mauris in ultrices augue. Etiam eros libero, malesuada nec luctus quis, aliquam nec massa. Fusce vitae hendrerit nibh, eget
	  hendrerit mauris. Aliquam quis sem ipsum. Phasellus aliquet rhoncus tellus ac imperdiet. Sed nec lacus at erat elementum efficitur vel in magna. Vestibulum ac enim id ligula iaculis ultricies at facilisis lorem. Nullam lobortis ultrices felis</div>
  </div>
</div>
<div class="col-sm-4" style="background: green">
  <div class="panel panel-default">
	<div class="panel-body">Col 2</div>
  </div>
</div>
<div class="col-sm-4" style="background: blue">
  <div class="panel panel-default">
	<div class="panel-body">Nullam nec ex metus. Curabitur mollis sem vitae augue ultrices ornare. Phasellus efficitur viverra turpis, nec scelerisque purus rutrum vel. Ut pellentesque congue tincidunt. Nulla et nulla velit. Quisque pellentesque mi ac metus faucibus pretium.
	  Duis sit amet vestibulum dolor.
	  </div>
	</div>
  </div>
</div>
</div>

Fiddle

Side Note: Flex has limited browser support especially on mobile devices.

Collected from the Internet

Please contact [email protected] to delete if infringement.