Twitter Bootstrap Question posted in

Footer Isn't Full Width of Page – Twitter bootstrap

EDIT #4: All of my HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="robots" content="index,follow">
        <title>{{var pageTitle}}</title>
        <link rel="icon" type="image/png" href="{{var protoHost}}FavIconstackoverflow32.png">
        <link rel="icon" type="image/x-icon" href="{{var protoHost}}favicon.ico">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
        <link rel="stylesheet" href="{{var protoHost}}css/main.css">
        <link rel="stylesheet" href="{{var protoHost}}css/print.css">
        <link rel="stylesheet" href="{{var protoHost}}css/navbar-custom.css">
        {{var extraHeaders}}
    </head>
    <body>
        <div class="page">
          <div class="container-fluid">
            <div class="topheader col-xs-0 col-md-0">
                  <div class="phonecolours">
                    <p class="headerspacer inlineParagraph"><i class="fa fa-phone"></i><a href="tel:613-865-7733" class="phonecolours"> (613) 865-7733</a></p>
                    <p class="headercontact inlineParagraph"><i class="fa fa-phone"></i><a href="tel:613-817-7733" class="phonecolours"> (613) 817-7733</a></p>
                    <p class="headercontact inlineParagraph"><i class="fa fa-phone"></i><a href="tel:613-454-7733" class="phonecolours"> (613) 454-7733</a></p>
                  </div>
                  <button type="button" class="btn btnstackoverflow buttonspacer">Referral Services</button>
                  <button type="button" class="btn btnstackoverflow buttonlinkspacer">My Account</button>
                  <button type="button" class="btn btnstackoverflow buttonlinkspacer">Reseller Services</button>
            </div>
              <div class="col-xs-3 col-sm-3 branding">
                  <a class="imgCon" href="{{var protoHost}}">
                      <img class="img-responsive" alt="stackoverflowinternet Internet Services" src="{{var protoHost}}img/TrueInternet.png">
                  </a>
              </div>
                  <div class="col-xs-0">
                      <a class="inlineParagraph socialspacer brandingspacer buttonheader" href="https://www.facebook.com/stackoverflowInternetService"><i class="fa fa-facebook-square fa-2x" style="color:#3B5998"></i></a>
                  </div>
                  <div class="col-xs-0">
                      <a class="inlineParagraph socialspacer buttonheader" href="https://twitter.com/stackoverflowinternetcanada"><i class="fa fa-twitter fa-2x" style="color:#1da1f2"></i></a>
                  </div>
                  <div class="col-xs-0">
                      <a class="inlineParagraph socialspacer buttonheader" href="https://www.instagram.com/stackoverflowinternetinternet/"><i class="fa fa-instagram fa-2x" style="color:#623628"></i></a>
                  </div>
                  <div class="col-xs-0">
                      <a class="inlineParagraph socialspacer buttonheader" href="https://www.youtube.com/channel/UC_EH7RNVnL7IUch12iHzFAQ"><i class="fa fa-youtube-play fa-2x" style="color:#E62B24"></i></a>
                  </div>
                  <div class="col-xs-0">
                      <a class="inlineParagraph socialspacer buttonheader" href="https://plus.google.com/116264661972220598755"><i class="fa fa-google-plus-square fa-2x" style="color:#DB4437"></i></a>
                  </div>
                </div>
            <nav class="navbar navbar-custom">
                    <div class="col-xs-0 container-fluid" data-expand="false">
                      <div class="row">
                      <p class="inlineParagraph navbartext"><a href="/internet" color="white"><i class="fa fa-cloud-download navIcon fa-lg"></i>View Our Internet Packages!</a></p>
                      <p class="inlineParagraph navbarspacer"><a href="/phone"><i class="fa fa-phone navIcon fa-lg"></i>Phone Services!</a></p>
                      <p class="inlineParagraph navbarspacer"><a href="/Televison"><i class="fa fa-television navIcon fa-lg"></i>Television Programs!</a></p>
                    </div>
                  </div>
            </nav>
            <div class="col-xs-0">
                {{var content}}
            </div>
            <div class="footerspacer"></div>
                <div class="container-fluid">
                    <div class="row">
                      <footer class="footer">
                      <a class="col-xs-12 col-md-2" href="{{var protoHost}}PrivacyPolicy">Privacy Policy</a>
                      <a class="col-xs-12 col-md-2" href="{{var protoHost}}TermsOfService">Terms Of Service</a>
                      <a class="col-xs-12 col-md-2" href="{{var protoHost}}AcceptableUsePolicy">Acceptable Use Policy</a>
                      <a class="col-xs-12 col-md-2" href="{{var protoHost}}WarrentyAndReturnsPolicy">Warranty &amp; Returns Policy</a>
                      <a class="col-xs-12 col-md-2" href="{{var protoHost}}ThridPartyCopyrightNotices">Third Party Copyright Notices</a>
                      <a class="col-xs-12 col-md-2" href="{{var protoHost}}TermsOfServicePhone">Terms Of Service For Phone</a>
                     <br><br><br>
                    <p>&copy; 2016 stackoverflow Internet Services - All Rights Reserved</p>
                    </footer>
                  </div>
                </div>

        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <script src="{{var protoHost}}js/showhide.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
        <script src="{{var protoHost}}js/navCode.js"></script>
        {{var extraScripts}}
    </body>
</html>

EDIT #3: My original issue has been solved, but now may footer isn’t responsive anymore. See my old question to see the issue: Bootstrap Columns not Being Responsive

My footer isn’t the full width of my page. I’ve set the page to 100px and everything else is fitting in it perfect. I’ve tried to set my width to auto (too short), too 100% (too long), and to inherit (it fits it, but I lose all responsiveness).

My CSS:

.page{
    width: 1100px;
    margin: 0 auto;
    height: 100%;
    position: relative;
}
.footer{
  background-color: #277FD8;
  bottom: 0;
  width: 100%;
  height: auto;
}

My HTML: 

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

The page CSS rule is a wrapper.

And the picture:

enter image description here

Edit: Thanks for all the replies! I’ve tried nesting the Footer tag within my container-fluid and row, and it’s not working. Here’s what I mean when I use 100% on my footer for width (sorry, it’s not to tall, I don’t know what I was thinking/typing):

enter image description here

Edit #2:

Navbar HTML:

<nav class="navbar navbar-custom">
  <div class="col-xs-0 container-fluid" data-expand="false">
    <div class="row">
      <p class="inlineParagraph navbartext"><a href="/internet" color="white"><i class="fa fa-cloud-download navIcon fa-lg"></i>View Our Internet Packages!</a></p>
      <p class="inlineParagraph navbarspacer"><a href="/phone"><i class="fa fa-phone navIcon fa-lg"></i>Phone Services!</a></p>
      <p class="inlineParagraph navbarspacer"><a href="/Televison"><i class="fa fa-television navIcon fa-lg"></i>Television Programs!</a></p>
    </div>
  </div>
</nav>

Navbar CSS:

.navbar{
    height: 100px;
}
.navbar-custom {
  background-color: #277FD8;
  border-color: #277FD8;
  z-index: 9999px;
  height: 70px;
}
Tags:

8

Answers


  1. 0

    Try setting it up like this:

    <div class="container-fluid">
  <div class="row">
    <footer>
    ...
    </footer>
  </div>
</div>

    That way your footer shouldn’t interfere with the width.
    (You can also try the following)

    body,html{
  width: 100%;
  height: 100%;
}

    Edit: Your new problem

    .page{
    width: 1100px;
    margin: 0 auto;
    height: 100%;
    position: relative;
}

    The width here makes your 100% on the footer be treated as 1100px
    Putting a fixed width on your page element also defeats the whole purpose of bootstrap. Remove that and let me know if things still go wrong.

    Login or Signup to reply.
  2. 0

    Your footer will inherit whatever surrounds it, you need to take the entire footer html out of its container and add it at the end just befor the body tag. From there make sure it has a 100% width.

    footer {width:100%;}
        <footer>
    ...
    </footer>
</body>
    Login or Signup to reply.
  3. 0

    You should re-order you footer, according to bootlint it is only allowed to place row’s in .container and .col, .col can only be placed inside .row. See footer code below

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

    The issue is that the footer is wrapped in a div that has a fixed width.

    .page {
   width: 1100px; <-- THIS IS THE PROBLEM.  REMOVE THIS.
   margin: 0 auto;
   height: 100%;
   position: relative;
}

    If you remove this, the footer will expand the full width of the window, however I don’t know how removing that will affect the rest of the page. Your best bet is to remove it, and then use bootstrap’s container class as the page wrapper. Container-fluid will span 100% width, however container is probably what you’re looking for as it will use widths that are appropriate for each media size breakpoint (without you having to worry about defining them). If you have your page content in a wrapper with a fixed width, as you do now, your page will not be responsive because you are preventing the elements within that wrapper from scaling down any smaller than 1100px. Just by looking quickly at your full page markup, it seems like you’d be OK if you removed the .page elements and changed container-fluid to container. Keep in mind that if these sections have background colors that you want to span 100%, they will no longer be 100% once wrapped in a container. So you’d have to do something like this:

    #background-color {
    background: #ccc;
}

<div id="background-color">
    <div class="container">
        *content here *
    </div>
</div>

    Also, if you want to have your footer take up 100% of the page, but the content inside the footer to only fill the container (or wrapper) width, you will want to set it up similar to this:

    <footer>
   <div class="container">
      <div class="row">
          <a href="XYZ"></a>
          etc..
       </div>
   </div>
</footer>
    Login or Signup to reply.
  5. 0

    Have you tried:

    <footer class="footer">
  <div class="container-fluid">
    Footer Content Goes Here.
  </div>
</footer>
    Login or Signup to reply.
  6. 0

    Though you have mentioned width: 100%; for class footer, but you placed Footer inside class page, whose width is 1100px. That’s why you Footer’s 100% is 1100px. So, you try to place your Footer outside class page. This will help you. Thanks.

    Login or Signup to reply.
  7. 0

    .container-fluid class provides a full width container, spanning the entire width of the viewport

    Containers are not nestable (you cannot put a container inside another container).

    footer class with margin and padding adjustment 

    <footer class="footer">
  <a class="col-xs-12 col-md-2" href="{{var protoHost}}PrivacyPolicy">Privacy Policy</a>
  <a class="col-xs-12 col-md-2" href="{{var protoHost}}TermsOfService">Terms Of Service</a>
  <a class="col-xs-12 col-md-2" href="{{var protoHost}}AcceptableUsePolicy">Acceptable Use Policy</a>
  <a class="col-xs-12 col-md-2" href="{{var protoHost}}WarrentyAndReturnsPolicy">Warranty &amp; Returns Policy</a>
  <a class="col-xs-12 col-md-2" href="{{var protoHost}}ThridPartyCopyrightNotices">Third Party Copyright Notices</a>
  <a class="col-xs-12 col-md-2" href="{{var protoHost}}TermsOfServicePhone">Terms Of Service For Phone</a>
</footer>
    Login or Signup to reply.
  8. 0

    By what I understand, you just want the footer bar to be full width, but the content to be the width of the page. Here is what I came up with:

    https://run.plnkr.co/najlsKreCkKZCESQ/

    https://plnkr.co/edit/lS7NiTBfMSe8l4KBLxvH?p=preview

    Basically, I moved the footer out of the page wrapper, and did some small modifications to it, that work:

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

    By moving the footer out of the page wrapper, it takes full width, then the content inside just has to be wrapped in a div with the page class. If this isn’t 100% what you wanted, let me know. I know, it isn’t pretty, but it works. 🙂

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search