Twitter Bootstrap : Same height for grid

Question

With Bootstrap 4, I want to same height for my sections. But I want to enlarge only content <div class="content"> (Not the header and the footer)

 section { background: #ccc; border: 1px solid #000 } header { background: red; color: #fff } footer { background: blue; color: #fff } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <div class="col-3"> <section> <header> Title </header> <div class="content"> <ul> <li> Item 1 </li> </ul> </div> <footer> Footer </footer> </section> </div> <div class="col-3"> <section> <header> Title </header> <div class="content"> <ul> <li> Item 1 </li> <li> Item 2 </li> </ul> </div> <footer> Footer </footer> </section> </div> <div class="col-3"> <section> <header> Title </header> <div class="content"> <ul> <li> Item 1 </li> <li> Item 2 </li> <li> Item 3 </li> <li> Item 4 </li> </ul> </div> <footer> Footer </footer> </section> </div> </div> 

Can you help me?

Answer 1

 section { background: #ccc; border: 1px solid #000; height: 100%; display: flex !important; flex-direction: column; align-content: space-between; } header { background: red; color: #fff } footer { background: blue; color: #fff } .content { flex: 1 0 auto; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" /> <div class="row"> <div class="col-3"> <section> <header> Title </header> <div class="content"> <ul> <li> Item 1 </li> </ul> </div> <footer> Footer </footer> </section> </div> <div class="col-3"> <section> <header> Title </header> <div class="content"> <ul> <li> Item 1 </li> <li> Item 2 </li> </ul> </div> <footer> Footer </footer> </section> </div> <div class="col-3"> <section> <header> Title </header> <div class="content"> <ul> <li> Item 1 </li> <li> Item 2 </li> <li> Item 3 </li> <li> Item 4 </li> </ul> </div> <footer> Footer </footer> </section> </div> </div> 

Answer 2

Something like this?

.content {
  min-height: 150px;
  height: 150px;
}

 section { background: #ccc; border: 1px solid #000 } header { background: red; color: #fff } footer { background: blue; color: #fff } .content { min-height: 150px; height: 150px; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <div class="col-3"> <section> <header> Title </header> <div class="content"> <ul> <li> Item 1 </li> </ul> </div> <footer> Footer </footer> </section> </div> <div class="col-3"> <section> <header> Title </header> <div class="content"> <ul> <li> Item 1 </li> <li> Item 2 </li> </ul> </div> <footer> Footer </footer> </section> </div> <div class="col-3"> <section> <header> Title </header> <div class="content"> <ul> <li> Item 1 </li> <li> Item 2 </li> <li> Item 3 </li> <li> Item 4 </li> </ul> </div> <footer> Footer </footer> </section> </div> </div>