<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="//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="row"> <div class="col-md-3"> <div class="card"> <div class="card-body"> <div class="row"> <div class="col-md-12"> <div class="card bg-light mb-3"> <div class="card-header">Left Sidebar</div> </div> </div> </div> </div> </div> </div> <div class="col-md-9"> <div class="card"> <div class="card-body"> <div class="row"> <div class="col-md-12"> <div class="card bg-light"> <div class="card-header">Sample Page</div> </div> </div> </div> <div class="row mb-3"> <div class="col-md-12"> <div class="card"> <div class="card-body"> <button type="button" class="btn btn-sm btn-primary">Go Back</button> <button type="button" class="btn btn-sm btn-primary">Add New</button> <button type="button" class="btn btn-sm btn-primary">Post New Article</button> </div> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="card bg-light mb-3"> <div class="card-header">Header</div> <div class="card-body"> <h5 class="card-title">Light card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </div> <div class="col-md-6"> <div class="card bg-light mb-3"> <div class="card-header">Header</div> <div class="card-body"> <h5 class="card-title">Light card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </div> </div> </div> </div> </div> </div> </div>

.divider {border-bottom:1px solid #e0e0e0;} .bg-light{background:#f2f2f2!important;color:#;} .card-header{background:#;color:#;} body{font-size:14px;}