Social links are displayed as icons
<div class="bg-dark py-4"> <ul class="list-inline mb-0"> <li class="list-inline-item mr-0"> <a href="#" class="text-white opacity-3 fs-25 px-4 hover-white opacity-hover-10"><i class="fab fa-twitter"></i></a> </li> <li class="list-inline-item mr-0"> <a href="#" class="text-white opacity-3 fs-25 px-4 hover-white opacity-hover-10"><i class="fab fa-facebook-f"></i></a> </li> <li class="list-inline-item mr-0"> <a href="#" class="text-white opacity-3 fs-25 px-4 hover-white opacity-hover-10"><i class="fab fa-skype"></i></a> </li> <li class="list-inline-item mr-0"> <a href="#" class="text-white opacity-3 fs-25 px-4 hover-white opacity-hover-10"><i class="fab fa-linkedin-in"></i></a> </li> </ul> </div>
<div class="py-4 bg-secondary pl-3"> <ul class="list-inline mb-0"> <li class="list-inline-item mr-2"> <a href="#" class="w-40px h-40 rounded-circle bg-white text-body bg-hover-primary hover-white d-flex align-items-center justify-content-center"><i class="fab fa-twitter"></i></a> </li> <li class="list-inline-item mr-2"> <a href="#" class="w-40px h-40 rounded-circle bg-white text-body bg-hover-primary hover-white d-flex align-items-center justify-content-center"><i class="fab fa-facebook-f"></i></a> </li> <li class="list-inline-item mr-2"> <a href="#" class="w-40px h-40 rounded-circle bg-white text-body bg-hover-primary hover-white d-flex align-items-center justify-content-center"> <i class="fab fa-instagram"></i></a> </li> <li class="list-inline-item mr-2"> <a href="#" class="w-40px h-40 rounded-circle bg-white text-body bg-hover-primary hover-white d-flex align-items-center justify-content-center"><i class="fab fa-linkedin-in"></i></a> </li> </ul> </div>