<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 userMain"> <div class="col-md-3 col-sm-4"> <div class="userBlock"> <div class="backgrounImg"> <img src="https://preview.ibb.co/miQjb7/photography4.jpg"> </div> <div class="userImg"> <img src="https://image.ibb.co/es4AG7/author4.jpg"> </div> <div class="userDescription"> <h5>Tom Smith</h5> <p>Newyork, USA</p> <div class="followrs"> <span class="number">137</span> <span>Followers</span> </div> <a href=""> <button class="btn">Follow</button> </a> </div> </div> </div> <div class="col-md-3 col-sm-4"> <div class="userBlock"> <div class="backgrounImg"> <img src="https://preview.ibb.co/cqEz9S/photography3.jpg"> </div> <div class="userImg"> <img src="https://image.ibb.co/es4AG7/author4.jpg"> </div> <div class="userDescription"> <h5>Tom Smith</h5> <p>Newyork, USA</p> <div class="followrs"> <span class="number">137</span> <span>Followers</span> </div> <a href=""> <button class="btn">Follow</button> </a> </div> </div> </div> <div class="col-md-3 col-sm-4"> <div class="userBlock"> <div class="backgrounImg"> <img src="https://preview.ibb.co/m4Fjb7/photography2.jpg"> </div> <div class="userImg"> <img src="https://image.ibb.co/es4AG7/author4.jpg"> </div> <div class="userDescription"> <h5>Tom Smith</h5> <p>Newyork, USA</p> <div class="followrs"> <span class="number">137</span> <span>Followers</span> </div> <a href=""> <button class="btn">Follow</button> </a> </div> </div> </div> <div class="col-md-3 col-sm-4"> <div class="userBlock"> <div class="backgrounImg"> <img src="https://preview.ibb.co/cqEz9S/photography3.jpg"> </div> <div class="userImg"> <img src="https://image.ibb.co/es4AG7/author4.jpg"> </div> <div class="userDescription"> <h5>Tom Smith</h5> <p>Newyork, USA</p> <div class="followrs"> <span class="number">137</span> <span>Followers</span> </div> <a href=""> <button class="btn">Follow</button> </a> </div> </div> </div> <div class="col-md-3 col-sm-4"> <div class="userBlock"> <div class="backgrounImg"> <img src="https://preview.ibb.co/m4Fjb7/photography2.jpg"> </div> <div class="userImg"> <img src="https://image.ibb.co/es4AG7/author4.jpg"> </div> <div class="userDescription"> <h5>Tom Smith</h5> <p>Newyork, USA</p> <div class="followrs"> <span class="number">137</span> <span>Followers</span> </div> <a href=""> <button class="btn">Follow</button> </a> </div> </div> </div> <div class="col-md-3 col-sm-4"> <div class="userBlock"> <div class="backgrounImg"> <img src="https://preview.ibb.co/j7ygOn/photography.jpg"> </div> <div class="userImg"> <img src="https://image.ibb.co/es4AG7/author4.jpg"> </div> <div class="userDescription"> <h5>Tom Smith</h5> <p>Newyork, USA</p> <div class="followrs"> <span class="number">137</span> <span>Followers</span> </div> <a href=""> <button class="btn">Follow</button> </a> </div> </div> </div> <div class="col-md-3 col-sm-4"> <div class="userBlock"> <div class="backgrounImg"> <img src="https://preview.ibb.co/cqEz9S/photography3.jpg"> </div> <div class="userImg"> <img src="https://image.ibb.co/es4AG7/author4.jpg"> </div> <div class="userDescription"> <h5>Tom Smith</h5> <p>Newyork, USA</p> <div class="followrs"> <span class="number">137</span> <span>Followers</span> </div> <a href=""> <button class="btn">Follow</button> </a> </div> </div> </div> <div class="col-md-3 col-sm-4"> <div class="userBlock"> <div class="backgrounImg"> <img src="https://preview.ibb.co/miQjb7/photography4.jpg"> </div> <div class="userImg"> <img src="https://image.ibb.co/es4AG7/author4.jpg"> </div> <div class="userDescription"> <h5>Tom Smith</h5> <p>Newyork, USA</p> <div class="followrs"> <span class="number">137</span> <span>Followers</span> </div> <a href=""> <button class="btn">Follow</button> </a> </div> </div> </div> </div> </div>

@import url('https://fonts.googleapis.com/css?family=Open+Sans'); body{ background:#f3f3f4; padding-top:30px; font-family: 'Open Sans', sans-serif; } .userMain .userBlock{ float: left; width: 100%; box-shadow: 0px 0px 23px -3px #ccc; padding-bottom: 12px; margin-bottom: 30px; overflow: hidden; background:#fff; } .userMain .userBlock .backgrounImg{ float: left; overflow: hidden; height: 77px; } .userMain .userBlock .backgrounImg img{ width: auto; } .userMain .userBlock .userImg{ text-align: center; } .userMain .userBlock .userImg img{ width: 80px; height: 80px; margin-top: -39px; border-radius: 100%; border: 5px solid #fff; } .userMain .userBlock .userDescription{ text-align: center; } .userMain .userBlock .userDescription h5{ margin-bottom: 2px; font-weight: 600; } .userMain .userBlock .userDescription p{ margin-bottom: 5px; } .userMain .userBlock .userDescription .btn{ padding: 0px 23px 0px 23px; height: 22px; border-radius: 0; font-size: 12px; background: #0198dd; color: #fff; } .userMain .userBlock .userDescription .btn:hover{ opacity:0.7; } .userMain .userBlock .followrs{ display: inline-flex; margin-right: 10px; border-right: 1px solid #ccc; padding-right: 10px; } .userMain .userBlock .followrs .number{ font-size: 15px; font-weight: bold; margin-right: 5px; margin-top: -1px; }