<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="row"> <div class="col-sm-8"> <div class="card" style="border:none;"> <div class="card-body"> <h5 class="card-title">Special title treatment</h5> <hr> <p class="card-text">Lorem ipsum dolor sit amet, nec timeam docendi placerat ea, amet sententiae theophrastus ex vis, quodsi laoreet civibus eos ex. Has ad omnis tempor persequeris, at vim vidisse volumus disputationi, ex nec soleat voluptatibus. Qui dicant vulputate elaboraret ad. Et vix menandri argumentum.</p> <p>Lorem ipsum dolor sit amet, nec timeam docendi placerat ea, amet sententiae theophrastus ex vis, quodsi laoreet civibus eos ex. Has ad omnis tempor persequeris, at vim vidisse volumus disputationi, ex nec soleat voluptatibus. Qui dicant vulputate elaboraret ad. Et vix menandri argumentum.</p> <a href="#" class="btn btn-outline-dark">Go somewhere</a> <a href="#" class="btn btn-outline-dark">Go somewhere</a> </div> </div> </div> <div class="col-sm-4"> <br> <div class="card text-white bg-dark mb-3" style="border:none;"> <div class="card-body"> <div class="card-header">Featured Project</div> <h5 class="card-title">IATI Extractor</h5> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-primary">Github</a> </div> </div> </div> </div> <div class="card border-secondary mb-3" style="max-width: 18rem;"> <div class="card-header bg-dark text-white border-secondary">Header</div> <div class="card-body text-dark"> <h5 class="card-title">Success 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> <a href="#" class="btn btn-dark">Go somewhere</a> </div> </div>