<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="row"> <div class="col-12 col-lg-6"> <h1> Design of Followers : </h1> <ul class="nav nav-followers"> <li class="nav-item" data-toggle="tooltip" title="Alaa"> <a href="#" class="nav-link"> <img src="https://s3.amazonaws.com/uifaces/faces/twitter/dustinlamont/128.jpg"> </a> </li> <li class="nav-item" data-toggle="tooltip" title="mohammed"> <a href="#" class="nav-link"> <img src="https://s3.amazonaws.com/uifaces/faces/twitter/dakshbhagya/128.jpg"> </a> </li> <li class="nav-item" data-toggle="tooltip" title="Ahmed"> <a href="#" class="nav-link"> <img src="https://s3.amazonaws.com/uifaces/faces/twitter/annapickard/128.jpg"> </a> </li> <li class="nav-item" data-toggle="tooltip" title="Adam"> <a href="#" class="nav-link"> <img src="https://s3.amazonaws.com/uifaces/faces/twitter/waferbaby/128.jpg"> </a> </li> <li class="nav-item"> <a href="#" class="nav-link"> <span>+9</span> </a> </li> </ul> </div> </div> </div> <script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script> $('[data-toggle="tooltip"]').tooltip(); </script>

.nav-followers{ padding: 3rem 0; padding-left: 30px; } .nav-followers .nav-item{ margin-left: -15px; } .nav-followers .nav-link{ width: 70px; height: 70px; overflow: hidden; border-radius: 50%; padding: 0; border: 5px solid #fff; } .nav-followers .nav-link img{ width: 100%; height: 100%; object-fit: cover; object-position: top; } .nav-followers .nav-link span{ font-size: 18px; font-weight: bold; display: flex; justify-content: center; align-items: center; height: 100%; background: #eee; color: #999; }