<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="page"> <div class="sidebar"> <ul class="list-group"> <li class="list-group-item">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Morbi leo risus</li> <li class="list-group-item">Porta ac consectetur ac</li> <li class="list-group-item">Vestibulum at eros</li> </ul> </div> <div class="content"> <div class="container"> <div class="row"> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> Navbar header <button type="button" class="btn btn-default navbar-btn">Sign in</button> </div> </div> </nav> </div> </div> </div> </div>

.page{ display:flex; flex-direction:row; height:100vh; } .sidebar{ flex:1; border:solid black 1px; height:100%; } .content{ flex:4; border:solid black 1px; height:100%; }