<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 ----------> <!--Coded with love by Mutiullah Samim--> <div class="container"> <div class="d-flex justify-content-center align-items-center h-100 my-5"> <img alt="..." class="avatar avatar-sm" src="https://i0.wp.com/tricksmaze.com/wp-content/uploads/2017/04/Stylish-Girls-Profile-Pictures-36.jpg?resize=300%2C300&ssl=1" /> <img alt="..." class="avatar" src="https://i0.wp.com/tricksmaze.com/wp-content/uploads/2017/04/Stylish-Girls-Profile-Pictures-36.jpg?resize=300%2C300&ssl=1" /> <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" /> <img alt="..." class="avatar avatar-xl" src="https://i0.wp.com/tricksmaze.com/wp-content/uploads/2017/04/Stylish-Girls-Profile-Pictures-36.jpg?resize=300%2C300&ssl=1" /> </div> </div>

.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; }