Matt Matt -4 years ago 255
CSS Question

Aligning footer elements in bootstrap

Given a two column bootstrap footer, I'm trying to align the black box at top right over the 4 grey images below it. When resizing the browser, as soon as the black box disappears, the 4 grey boxes need to be aligned as they are now, but centered under the big grey "222 x 100" box for tablet and mobile.

HTML

<footer>
<div class="footer" id="footer">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<img src="http://placehold.it/222x100" class="footer-logo">
<ul class="advertisement">
<li>This is an advertisement</li>
<li>© 1998-2016. All right reserved. Company Name</li>
</ul>
</div>

<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 ">
<div class="row">
<ul class="social pull-right">
<li>
<a href="#"> <i class=" fa fa-facebook"> </i> </a>
</li>
<li>
<a href="#"> <i class="fa fa-twitter"> </i> </a>
</li>
<li>
<a href="#"> <i class="fa fa-google-plus"> </i> </a>
</li>
<li>
<a href="#"> <i class="fa fa-youtube-play"> </i> </a>
</li>
<li>
<a href="#"> <i class="fa fa-linkedin"> </i> </a>
</li>
</ul>
</div>
<div class="row">
<ul class="company-logos pull-right">
<li><img src="http://placehold.it/156x68"></li>
<li><img src="http://placehold.it/156x68"></li>
</ul>
<ul class="company-logos pull-right">
<li><img src="http://placehold.it/156x68"></li>
<li><img src="http://placehold.it/156x68"></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</footer>


CSS

.footer {
background: #242729;
height: auto;
padding-bottom: 30px;
position: relative;
width: 100%;
border-bottom: 1px solid #CCCCCC;
}

.footer p {
margin: 0;
}

.footer ul {
font-size: 13px;
list-style-type: none;
margin-left: 0;
padding-left: 0;
margin-top: 15px;
color: #7F8C8D;
}

.footer ul.social {
background-color: #000000;
padding: 10px;
margin-top: 0;
width: 58%;
}

@media (max-width: 991px) {
.footer ul.social {
display: none;
}
}

@media (max-width: 1199px) {
.footer ul.social {
width: 70%;
}
}

.footer .social li {
background: #000000;
border: 0px solid #B5B5B5;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
float: left;
height: 36px;
line-height: 36px;
margin: 0 8px 0 0;
padding: 0;
text-align: center;
width: 55px;
}

.footer .social li a {
color: #ffffff;
}

.footer .social li:hover {
border: 0px;
background: #000000 !important;
}

.footer .social li a {
font-size: 21px;
margin: 0 0 0 5px;
color: #fff !important;
}

.footer .footer-bottom {
background: #E3E3E3;
border-top: 1px solid #DDDDDD;
padding-top: 10px;
padding-bottom: 10px;
}

.footer .footer-bottom p.pull-left {
padding-top: 6px;
}

.footer img.footer-logo {
margin-left: 30%;
width: 40%;
margin-top: 40px;
}

.footer ul.advertisement {
text-align: center;
color: #666666;
}

.footer ul.company-logos {
-moz-column-count: 2;
-moz-column-gap: 0px;
-webkit-column-count: 2;
-webkit-column-gap: 0px;
column-count: 2;
column-gap: 14px;
}

.footer ul.company-logos li {
margin-right: 6px;
}

.footer ul.company-logos li img {
width: 156px;
padding: 14px;
}

@media (max-width: 991px) {
.footer ul.company-logos {
column-count: 3;
margin-right: 4%;
margin-left: 28%;
}
}

@media (min-width: 376px) {
.footer ul.company-logos {
column-count: 2;
margin-right: 7%;
}
}


JSFIDDLE:LINK

Answer Source

Matt,

I'll admit, there are an awful lot of odd margin and breakpoint numbers that make it tricky to navigate, but the below seems to help nudge things in the right direction.

  • You can just remove everything from: @media (min-width: 376px) .footer ul.company-logos

  • You'll also want to remove all floating at your 991px breakpoint, when you start centering things (mainly from the UL's that are being given float:right !important).

  • Give your .company-logos a display:inline-block;

  • You also need to give the .company-logos parent .row text-align:center;

When it gets even smaller, though, you'll want to just stack all those elements by shifting your column-count to 1 and using text-align:center.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download