I have the following footer below using bootstrap:
.align-center {
text-align: center;
}
#footer {
background-color: #3c3d41;
color: white;
padding-top: 25px;
padding-bottom: 10px;
}
.footer-social-media-text {
text-decoration: none;
height: 25px;
color: white;
white-space: nowrap;
}
.footer-social-media-icon {
padding-right: 8px;
margin-left: 30px;
margin-right: 2px;
font-weight: bold;
height: 25px;
color: white;
}
#footer a {
-o-transition: .25s;
-ms-transition: .25s;
-moz-transition: .25s;
-webkit-transition: .25s;
transition: .25s;
}
#footer a:hover {
text-decoration: none;
color: greenyellow;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<footer id="footer">
<div class="container">
<div class="row">
<div class="col-md-3">
<a href="https://www.mycompany.com/" class="footer-social-media-text">
<i class="fa fa-home fa-2x social footer-social-media-icon"></i> My Company
</a>
</div>
<div class="col-md-9">
<a href="https://www.facebook.com" class="footer-social-media-text pull-right">
<i class="fa fa-facebook fa-2x social footer-social-media-icon"></i> Facebook
</a>
<a href="https://www.instagram.com" class="footer-social-media-text pull-right">
<i class="fa fa-instagram fa-2x social footer-social-media-icon"></i> Instagram
</a>
<a href="https://twitter.com" class="footer-social-media-text pull-right">
<i class="fa fa-twitter fa-2x social footer-social-media-icon"></i> Twitter
</a>
</div>
</div>
<hr />
<p class="align-center">© 2017 My Company</p>
</div>
</footer>
</div>
</div>
https://jsfiddle.net/coyagf2b/
My issue is the code above is that the width threshold using the bootstrap grid does not really match my expectation: <div class="col-md-3">
and <div class="col-md-9">
.
Basically I would like to:
- Having the right part stacking below the left part when it’s the page width is heavily reduced I tried different
col-md-x
/col-lg-x
/col-sm-x
without much result… - Change the content align of the two parts to center when the right part is stacking below
How can I do that?
2
Answers
Bootstrap’s
col-xs-
classes do work perfectly find with your code. If you want the right column to fall underneath the left then I would just addcol-xs-12
on each of thecol-md-
divs you have. And you center only on mobile you can use some media queries to achieve that. Something like looks like:And here is a link to a working codepen:
https://codepen.io/egerrard/pen/rGrPmM
Check this example, using
.text-center
,.float-md-left
and.float-md-right
.