<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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 ----------> <footer class="footer"> <div class="container-fluid"> <div class="row"> <div class="col-sm-4 pull-left1"> <ul class="nav nav-pills.nav"> <li>Privacy</li> <li>Contact</li> <li>Help</li> </ul> </div> <div class="col-sm-4 dropup"> <a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false" href="#" style="text-decoration: none !important;">Language<span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li> link_to_unless_current "English", locale: </li> <li>link_to_unless_current "German", locale: </li> </ul> </div> <div class="col-sm-4"> <ul class="social-network social-circle text-right "> <li><a href="#" class="icoFacebook" title="Facebook"><i class="fa fa-facebook">fa</i></a></li> <li><a href="#" class="icoTwitter" title="Twitter"><i class="fa fa-twitter">ga</i></a></li> <li><a href="#" class="icoGoogle" title="Google +"><i class="fa fa-google-plus">fa</i></a></li> </ul> </div> </div> </div> </footer>

.nav li{ padding:0 10px ; } .social-network li{ text-decoration:none; display:inline-block; padding:0 10px ; } .footer [class^='col-sm']{ margin:10px 0; vertical-align:middle; }