<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-xs-3 wodapanel row-eq-height" style="background-color:blue;">What</div> <div class="col-xs-3 wodapanel row-eq-height" style="height:120px;background-color:green;">OverView</div> <div class="col-xs-3 wodapanel row-eq-height" style="background-color:red;">Detail</div> <div class="col-xs-3 wodapanel row-eq-height" style="background-color:yellow;">Action</div> </div> </div>

.row-eq-height { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }