<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 ----------> <nav class="navbar navbar-expand-lg navbar-light"> <div class="container"> <a class="navbar-brand" href="#">Bootstrap 4</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> </div> </nav> <div class="container"> <div class="row"> <div class="col-xl-10 mx-auto py-2"> <div class="card shadow"> <div class="card-body"> <div class="row align-items-center"> <div class="col-lg-auto col-4 mx-auto text-nowrap text-center px-3"> <a href=""> <img class="d-block mx-auto rounded-circle img-fluid" src="http://api.randomuser.me/portraits/women/73.jpg"> </a> </div> <div class="col-lg text-center text-lg-left"> <h3 class="font-weight-light d-inline"><a class="text-dark" href="">Mary Chesnut</a></h3><span class="badge badge-pill badge-success sup small align-top">4</span> <h6>Triathlete, mom & wife</h6> <ul class="list-inline mt-3"> <li class="list-inline-item"> <button class="btn btn-light rounded-circle"> <i class="h4 far fa-star icon-star lnr lnr-star ion-ios-star-outline align-middle"></i> </button> </li> <li class="list-inline-item"> <button class="btn btn-light rounded-circle"> <i class="h4 fa fa-cog icon-settings lnr lnr-cog ion-ios-settings-outline align-middle"></i> </button> </li> <li class="list-inline-item"> <button class="btn btn-light rounded-circle"> <i class="h4 fa fa-user icon-user lnr lnr-user ion-ios-contact-outline align-middle"></i> </button> </li> <li class="list-inline-item ml-3"> <button class="btn btn-outline-success rounded">Follow +</button> </li> </ul> </div> <div class="col-lg-auto col-sm-8 mx-auto"> <div class="row text-center"> <div class="col-sm-4 py-1"> <button class="btn rounded p-3 btn-outline-secondary text-center w-100"> <h4 class="font-weight-light">123</h4> <a href=""><span class="badge badge-pill badge-dark font-weight-light">posts</span></a> </button> </div> <div class="col-sm-4 py-1"> <button class="btn rounded p-3 btn-outline-secondary text-center w-100"> <h4 class="font-weight-light">19</h4> <a href=""><span class="badge badge-pill badge-dark font-weight-light">friends</span></a> </button> </div> <div class="col-sm-4 py-1"> <button class="btn rounded p-3 btn-outline-secondary text-center w-100"> <h4 class="font-weight-light">45</h4> <a href=""><span class="badge badge-pill badge-dark font-weight-light">badges</span></a> </button> </div> </div> </div> </div> </div> </div> </div> <div class="col-xl-10 mx-auto py-2"> <div class="card shadow"> <div class="card-body"> <div class="row"> <div class="col-lg-auto col-4 mx-auto text-nowrap text-center px-3"> <a href=""> <img class="d-block mx-auto rounded-circle img-fluid" src="http://api.randomuser.me/portraits/men/53.jpg"> </a> </div> <div class="col-lg text-center text-lg-left"> <h3 class="font-weight-light d-inline"><a class="text-dark" href="">Doug Earnest</a></h3> <h6>Lead singer, bass guitar</h6> <span class="badge badge-secondary badge-pill">roots</span> <span class="badge badge-secondary badge-pill">reggae</span> <span class="badge badge-secondary badge-pill">ska</span> </div> <div class="col-lg-3 text-lg-right text-center d-flex flex-lg-column flex-row justify-content-center"> <div class="inline"> <a class="" href=""> <img src="//placehold.it/35?text=H" alt="Link image" class="rounded-circle img-fluid"> </a> <a class="" href=""> <img src="//placehold.it/35/3333/fff?text=C" alt="Link image" class="rounded-circle img-fluid"> </a> <a class="" href=""> <img src="//placehold.it/35/777/fff?text=W" alt="Link image" class="rounded-circle img-fluid"> </a> </div> <div class="small mt-auto ml-auto"> <a href="" class="btn btn-outline-secondary px-2 py-0 mb-1" title="Star on GitHub"> <span class="mr-1 ng-binding">60</span> <i class="lnr lnr-star ion-ios-star-outline"></i> </a> <button class="btn px-2 py-0 mb-1 btn-outline-secondary"> <span class="mr-1 ng-binding">3</span> <i class="lnr lnr-chevron-up ion-ios-arrow-up-outline"></i> </button> </div> </div> </div> </div> </div> </div> </div> <!--/row--> </div> <!--container-->