<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-4"> <div class="profile-general"> <div class="profile-userpic"> <img src="http://yeslk.com/images/OIP-M393629d86ddac3631ad893bc703842eao0.jpg" class="img-responsive" alt=""> </div> <div class="profile-usertitle"> <div class="profile-usertitle-name"> USER ID 5 </div> <div class="profile-usertitle-job"> 4 stars </div> </div> <div class="profile-userbuttons"> <button type="button" class="btn btn-danger btn-sm">Report</button> </div> </div> </div> </div> </div>

body { background: #F1F3FA; } /* Profile sidebar */ .profile-general { text-align: center; width: 100%; padding: 60px 0 60px 0; background: #fff; } .profile-userpic img { float: none; margin: 0 auto; width: 50%; height: 50%; -webkit-border-radius: 50% !important; -moz-border-radius: 50% !important; border-radius: 50% !important; } .profile-usertitle { text-align: center; margin-top: 20px; } .profile-usertitle-name { color: #5a7391; font-size: 16px; font-weight: 600; margin-bottom: 7px; } .profile-usertitle-job { text-transform: uppercase; color: #5b9bd1; font-size: 12px; font-weight: 600; margin-bottom: 15px; } .profile-userbuttons { text-align: center; margin-top: 10px; } .profile-userbuttons .btn { text-transform: uppercase; font-size: 11px; font-weight: 600; padding: 6px 15px; margin-right: 5px; }