<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="col-sm-6 col-md-6 col-lg-3"> <div class="card card-inverse"> <img class="profile-img-card-img-top" src="https://i.imgur.com/n2mqwec.png" alt="Card Profile Image"> <div class="profile-img-card-block"> <figure class="profile-img-card-profile"> <img src="https://i.imgur.com/n2mqwec.png" class="profile-img-card-profile-avatar" alt="Card Profile Image"> </figure> <h4 class="profile-img-card-title">Muhammad Omman</h4> <div class="profile-img-card-text"> <a>CEO</a> </div> <div class="profile-img-card-text-bold"> Professional Web Developer </div> </div> <div class="profile-img-card-footer"> <small>Just Now Updated</small> <button class="btn btn-primary pull-right">Follow</button> </div> </div> </div> </div>

/*Added by Omman Begin Profile Style card*/ .profile-img-card { font-size: 1em; overflow: hidden; padding: 0; border: none; border-radius: .28571429rem; box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5; } .profile-img-card-block { font-size: 1em; position: relative; margin: 0; padding: 1em; border: none; border-top: 1px solid rgba(34, 36, 38, .1); box-shadow: none; background: #46629e; } .profile-img-card-img-top { display: block; width: 100%; height: auto; border-radius: 5px 5px 0px 0px; } .profile-img-card-title { font-size: 1.28571429em; font-weight: 700; line-height: 1.2857em; color: #f3f1f1; } .profile-img-card-text { clear: both; margin-top: .5em; color: rgba(7, 9, 5, .68); } .profile-img-card-footer { font-size: 1em; position: static; top: 0; left: 0; max-width: 100%; padding: 0.6em 1em 2em 1em; color: rgba(0, 0, 0, .4); border-top: 1px solid rgba(0, 0, 0, .05) !important; background: #fbfbfd; border-radius: 0px 0px 5px 5px; } .profile-img-card-inverse .btn { border: 1px solid rgba(0, 0, 0, .05); } .profile-img-card-profile { position: absolute; top: -12px; display: inline-block; overflow: hidden; box-sizing: border-box; width: 25px; height: 25px; margin: 0; border: 1px solid #fff; border-radius: 50%; } .profile-img-card-profile-avatar { display: block; width: 100%; height: 25px; border-radius: 50%; } .profile-img-card-profile-inline { position: relative; top: 0; display: inline-block; } .profile-img-card-profile-inline ~ .profile-img-card-title { display: inline-block; margin-left: 4px; vertical-align: top; } .profile-img-card-text-bold { font-weight: 700; } /*Added by Omman End Profile Style card*/