<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="top-bar"> <div class="container"> <div class="row"> <div class="col-md-6"> <p>Welcome To our Company Inc</p> </div> <!--<div class="col-md-offset-3 col-md-3"> <a href="mailto:">info@askitc.com</a> </div>--> <div class="col-md-6 socl-icons"> <ul> <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-pinterest-p" aria-hidden="true"></i></a></li> </ul> </div> </div> </div> </div>

.top-bar { background: #f7f7f7 none repeat scroll 0 0; height: 40px; width: 100%; } .top-bar p { color: #000000; font: 500 20px/38px roboto; } .socl-icons { padding-top: 5px; } .top-bar .socl-icons ul { float: right; } .top-bar .socl-icons li { float: left; list-style: outside none none; margin-right: 8px; } .top-bar .socl-icons li a { display: inline-block; border-radius: 0; width: 30px; height: 30px; line-height: 30px; background: #000; color: #fff; margin: 0 0px; text-align: center; font-size: 16px; display: block; color: #fff; }