<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class='card' id='main-card'> <div class='card-header' id='main-card-header'> </div> <div class='card-body d-inline-flex' id='left-card-body'> <div class='col' id='left-column'> <div class='card-column' id='left-card-column'> <div class='card' id='left-card-1'> <div class='card-body' id='left-card-1-body'> </div> </div> <div class='card' id='left-card-2'> <div class='card-header' id='left-card-2-header'> </div> <div class='card-body' id='left-card-2-body'> </div> </div> <div class='card' id='left-card-3'> <div class='card-header' id='left-card-3-header'> </div> <div class='card-body' id='left-card-3-body'> </div> </div> </div> </div> <div class='col' id='right-column'> <div class='card' id='right-card-1'> <div class='card-header' id='right-card-1-header'> </div> <div class='card-body' id='right-card-1-body'> </div> </div> </div> </div> </div> </div>