<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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-fluid no-padding"> <div class="row "> <div class="col-lg-8 no-padding auto-overflow"> <div class="no-padding match-container "> <div class="row"> <div class="col-xs-4 panel-match "> <div class="panel panel-default "> <div class="panel-heading"> Panel content </div> <!-- /panel-header --> <div class="panel-footer"> Panel content </div> <!-- /panel-footer --> </div> <!-- /panel panel-default panel-match --> </div> <!-- /col-xs-4 col-fixed-4 --> <div class="col-xs-4 col-fixed-4 tree-child"> <div class="panel panel-default panel-match"> <div class="panel-heading"> Panel content </div> <!-- /panel-header --> <div class="panel-footer"> Panel content </div> <!-- /panel-footer --> </div> <!-- /panel panel-default panel-match --> </div> <!-- /col-xs-4 col-fixed-4 --> </div> <!-- row --> <div class="row"> <div class="col-xs-4 col-fixed-4"> <div class="bracket-big"></div> <div class="panel panel-default panel-match"> <div class="panel-heading"> Panel content </div> <!-- /panel-header --> <div class="panel-footer"> Panel content </div> <!-- /panel-footer --> </div> <!-- /panel panel-default panel-match --> </div> <!-- /col-sm-5 --> <div class="col-xs-4 col-fixed-4 col-xs-offset-4 tree-child"> <div class="panel panel-default panel-match"> <div class="panel-heading"> Panel content </div> <!-- /panel-header --> <div class="panel-footer"> Panel content </div> <!-- /panel-footer --> </div> <!-- /panel panel-default panel-match --> </div> <!-- /col-xs-4 col-fixed-4 --> </div> <!-- row --> <div class="row"> <div class="col-xs-4 col-fixed-4"> <div class="panel panel-default panel-match"> <div class="panel-heading"> Panel content </div> <!-- /panel-header --> <div class="panel-footer"> Panel content </div> <!-- /panel-footer --> </div> <!-- /panel panel-default panel-match --> </div> <!-- /col-sm-5 --> <div class="col-xs-4 col-fixed-4 tree-child"> <div class="panel panel-default panel-match"> <div class="panel-heading"> Panel content </div> <!-- /panel-header --> <div class="panel-footer"> Panel content </div> <!-- /panel-footer --> </div> <!-- /panel panel-default panel-match --> </div> <!-- /col-xs-4 col-fixed-4 --> </div> <!-- row --> <div class="row"> <div class="col-xs-4 col-fixed-4"> <div class="panel panel-default panel-match"> <div class="panel-heading"> Panel content </div> <!-- /panel-header --> <div class="panel-footer"> Panel content </div> <!-- /panel-footer --> </div> <!-- /panel panel-default panel-match --> </div> <!-- /col-sm-5 --> </div> <!-- row --> </div> <!-- container-fluid--> </div> <!-- col-lg-8--> <!-- col-lg-4--> </div> <!-- row--> </div> <!--container-fluid-->

.tree-child{ position: relative; top: 50%; -webkit-transform: translateY(50%); -ms-transform: translateY(50%); transform: translateY(50%); } .relative{ position:relative; } .auto-overflow{overflow:auto;} .panel{ margin:10px 0; } .match-container{ width:700px!important; } } .no-padding{ padding:0!important; }