<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 mt-5 border-5 pt-2 active pb-0 px-3"> <div class="card-body "> <div class="row"> <div class="col-12 "> <h4 class="card-title "><b>Program Title</b></h4> </div> <div class="col"> <h6 class="card-subtitle mb-2 text-muted"> <p class="card-text text-muted small "> <img src="https://img.icons8.com/metro/26/000000/star.png" class="mr-1 " width="19" height="19" id="star"> <span class="vl mr-2 ml-0"></span> Created by <span class="font-weight-bold"> BBBootstrap Team</span> on 1 Nov , 2018</p> </h6> </div> </div> </div> <div class="card-footer bg-white px-0 "> <div class="row"> <div class=" col-md-auto "> <a href="#" class="btn btn-outlined btn-black text-muted bg-transparent" data-wow-delay="0.7s"><img src="https://img.icons8.com/ios/50/000000/settings.png" width="19" height="19"> <small>SETTINGS</small></a> <i class="mdi mdi-settings-outline"></i> <a href="#" class=" btn-outlined btn-black text-muted"><img src="https://img.icons8.com/metro/26/000000/link.png" width="17" height="17" id="plus"> <small>PROGRAM LINK</small> </a> <a href="#" class="btn btn-outlined btn-black text-muted "><img src="https://img.icons8.com/metro/26/000000/more.png" width="20" height="20" class="mr-2 more"><small>MORE</small></a> <span class="vl ml-3"></span> </div> <div class="col-md-auto "> <ul class="list-inline"> <li class="list-inline-item"> <img src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1573035860/Pra/Hadie-profile-pic-circle-1.png" alt="DP" class=" rounded-circle img-fluid " width="35" height="35"> </li> <li class="list-inline-item"> <img src="https://img.icons8.com/ios/50/000000/plus.png" width="30" height="30 " class="more"> </li> </ul> </div> </div> </div> </div> <div class="card mt-5 border-5 pt-2 active pb-0 px-3"> <div class="card-body "> <div class="row"> <div class="col-12 "> <h4 class="card-title "><b>Company Culture</b></h4> </div> <div class="col"> <h6 class="card-subtitle mb-2 text-muted"> <p class="card-text text-muted small "> <img src="https://img.icons8.com/color/26/000000/christmas-star.png" class="mr-1 " width="19" height="19" id="star"> <span class="vl mr-2 ml-0"></span> <i class="fa fa-users text-muted "></i> Public <span class="vl ml-1 mr-2 "></span> <span></span>Updated by <span class="font-weight-bold"> BBBootstrap Team</span> on 1 Nov , 2018 </p> </h6> </div> </div> </div> <div class="card-footer bg-white px-0 "> <div class="row"> <div class=" col-md-auto "> <a href="#" class="btn btn-outlined btn-black text-muted bg-transparent" data-wow-delay="0.7s"><img src="https://img.icons8.com/ios/50/000000/settings.png" width="19" height="19"> <small>SETTINGS</small></a> <i class="mdi mdi-settings-outline"></i> <a href="#" class=" btn-outlined btn-black text-muted"><img src="https://img.icons8.com/metro/26/000000/link.png" width="17" height="17" id="plus"> <small>PROGRAM LINK</small> </a> <a href="#" class="btn btn-outlined btn-black text-muted "><img src="https://img.icons8.com/metro/26/000000/more.png" width="20" height="20" class="mr-2 more"><small>MORE</small></a> <span class="vl ml-3"></span> </div> <div class="col-md-auto "> <ul class="list-inline"> <li class="list-inline-item"> <img src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1573035860/Pra/Hadie-profile-pic-circle-1.png" alt="DP" class=" rounded-circle img-fluid " width="35" height="35"> <img src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1573035909/Pra/Loren-profile-pic-circle.png" alt="DP" class=" rounded-circle img-fluid " width="35" height="35"> <img src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1573035929/Pra/59d280613165c000014cc031_circleniamhhogan.png" alt="DP" class=" rounded-circle img-fluid " width="35" height="35"> <img src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1573035929/Pra/59d280613165c000014cc031_circleniamhhogan.png" alt="DP" class=" rounded-circle img-fluid " width="35" height="35"> </li> <li class="list-inline-item"> <img src="https://img.icons8.com/ios/50/000000/plus.png" width="30" height="30 " class="more"> </li> </ul> </div> </div> </div> </div> </div>

body { font-family: 'Rubik', sans-serif; height: 100% !important; background-color: #3F51B5 !important } #star { margin-left: -5px !important; vertical-align: bottom !important; opacity: 0.5 } .more { opacity: 0.5 !important } .btn:hover { color: black !important } .vl { margin: 8px !important; width: 2px; border-right: 1px solid #aaaaaa; height: 25px } #plus { opacity: 0.8 } .card { border-radius: 10px !important } a:hover { background-color: #ccc !important } .btn-outlined:active { color: #FFF; border-color: #fff !important } img { cursor: pointer; overflow: visible } .btn:focus, .btn:active { outline: none !important; box-shadow: none !important } .container { margin-top: 100px !important }