Thomas Hutton Thomas Hutton - 6 months ago 12
HTML Question

Bootstrap Columns not Being Responsive

I'm struggling with my columns. They're not being responsive. When I shrink my page down to emulate a phone query, my columns are still being spread out like the page is extra large. I'll show a picture.

My HTML for the footer (where the issue resides):

<footer class="footer">
<div class="container-fluid">
<div class="row">
<a class="col-xs-2 col-md-2" href="{{var protoHost}}PrivacyPolicy">Privacy Policy</a>
<a class="col-xs-2 col-md-2" href="{{var protoHost}}TermsOfService">Terms Of Service</a>
<a class="col-xs-2 col-md-2" href="{{var protoHost}}AcceptableUsePolicy">Acceptable Use Policy</a>
<a class="col-xs-2 col-md-2" href="{{var protoHost}}WarrentyAndReturnsPolicy">Warranty &amp; Returns Policy</a>
<a class="col-xs-2 col-md-2" href="{{var protoHost}}ThridPartyCopyrightNotices">Third Party Copyright Notices</a>
<a class="col-xs-2 col-md-2" href="{{var protoHost}}TermsOfServicePhone">Terms Of Service For Phone</a>
<br><br><br>
<p>&copy; 2016 Truespeed Internet Services - All Rights Reserved</p>
</div>
</div>
</footer>


My CSS:

.footer {
height: 100px;
background-color: #277FD8;
position: absolute;
bottom: 0;
width: 1100px;
}
.footer a{
text-align: center;
height: 100%;
color: white;
}
.footer p{
text-align: center;
height: 100%;
color: white;
}


The picture:

enter image description here

Answer

Your issue is that you have the footer set to the static width of 1100px.

If you set your footer to width: 100%, the columns will then be responsive.