"Social Header"
Bootstrap 4.1.1 Snippet by xvmaster

Post to Facebook Tweet this

<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 ----------> <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-md-3"> <ul class="social-network social-circle"> <li><a href="#"> <i class="fa fa-phone"></i></a></li> <li>000 000 000</li> </ul> </div> <div class="col-md-4"> <ul class="social-network social-circle"> <li><a href="#"><i class="fa fa-envelope"></i></a></li> <li>mail@yourmail.com</li> </ul> </div> <div class="col-md-5"> <ul class="social-network social-circle"> <li><a href="https://twitter.com/"><i class="fa fa-twitter"></i></a></li> <li><a href="https://www.facebook.com/"><i class="fa fa-facebook"></i></a></li> <li><a href="https://www.linkedin.com/"><i class="fa fa-linkedin"></i></a></li> <li><a href="https://www.instagram.com/"><i class="fa fa-instagram"></i></a></li> <li><a href="https://www.pinterest.com/"><i class="fa fa-pinterest"></i></a></li> </ul> </div> </div> </div> </body> </html>
body { background-color: #000000; text-decoration: none; color: #ffffff; margin: 50px 10px; } ul.social-network { list-style: none; display: inline; padding: 10%; } ul.social-network li { display: inline; } li a { text-decoration: none; color: #ffffff; } li a:hover { text-decoration: none; color: #ffffff; } .social-circle li a { display:inline-block; position:relative; margin:0 auto 0 auto; -moz-border-radius:100%; -webkit-border-radius:100%; border-radius:100%; text-align:center; width: 25px; height: 25px; font-size:16px; background-color: #fff; margin-bottom: 20px; } .social-circle li i { margin:0; line-height:25px; text-align: center; } .social-circle i { color: #000; }

Related: See More

Get Shit Done Pro
Bootstrap Social Card
Navbar with Social icon & Dropdown
social network layout - bootstrap 4

Questions / Comments: