<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="d-flex justify-content-center align-items-center h-100 my-5"> <ul class="avatars"> <li> <img alt="..." class="avatar avatar-lg" src="https://i0.wp.com/tricksmaze.com/wp-content/uploads/2017/04/Stylish-Girls-Profile-Pictures-36.jpg?resize=300%2C300&ssl=1" /> </li> <li> <img alt="..." class="avatar avatar-lg" src="https://pipeline.mediumra.re/assets/img/avatar-female-2.jpg" /> </li> <li> <img alt="..." class="avatar avatar-lg" src="https://i0.wp.com/tricksmaze.com/wp-content/uploads/2017/04/Stylish-Girls-Profile-Pictures-36.jpg?resize=300%2C300&ssl=1" /> </li> <li> <img alt="..." class="avatar avatar-lg" src="https://pipeline.mediumra.re/assets/img/avatar-female-2.jpg" /> </li> </ul> </div> </div>

.avatars { padding-left: 0; list-style: none; margin: 0; } .avatars > li { display: inline-block; } .avatars > li + li { margin-left: -0.75rem; } .avatar { width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 2px solid #f8f9fa; background: #f8f9fa; color: #fff; } .avatar.avatar-sm { width: 1.5rem; height: 1.5rem; } .avatar.avatar-lg { width: 3.2rem; height: 3.2rem; } .avatar.avatar-xl { width: 4.5rem; height: 4.5rem; }