I am attempting to align the content as a footer, but having trouble with the dropup not lining up properly:
<footer class="footer">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="pull-left">
<ul class="nav nav-pills">
<li><%= link_to 'Privacy', privacy_path %></li>
<li><%= link_to 'Contact', contact_path %></li>
<li><%= link_to 'Help', help_path %></li>
</ul>
<div class="dropup">
<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false" href="#" style="text-decoration: none !important;"><%= t 'footer_languages' %><span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><%= link_to_unless_current "English", locale: "en" %></li>
<li><%= link_to_unless_current "German", locale: "de" %></li>
</ul>
</div>
</div>
<ul class="social-network social-circle pull-right">
<li><a href="#" class="icoFacebook" title="Facebook"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" class="icoTwitter" title="Twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" class="icoGoogle" title="Google +"><i class="fa fa-google-plus"></i></a></li>
</ul>
</div>
</div>
</div>
</footer>
.footer
position: absolute
bottom: 0
width: 100%
height: 40px
And here is the accompanying image: https://i.sstatic.net/ifbSf.png The color difference is due to cropping!
Any suggestions on how to achieve proper alignment?
Update 1
Following the advice of @Kundan Kumar Mourya, I have achieved these results now: