Make Footer full-width (container-fluid) despite body container non-fluid

Question

How can I make my Footer width cover the entire width of the browser window?

Note: I'm using Bootstrap, the Footer uses 'container-fluid' but the page content uses 'container'.

Live link: http://185.123.96.102/~kidsdrum/moneynest.co.uk/blog.html

HTML

<footer class="container-fluid" style="margin-top: 30px;"> 
  <div class="row">
    <div class="col-sm-7 footercta">
  <h4 class="bottomoffer">Sign up to access your free Jumpstart your Finances email course:</h4>
<div id="mc_embed_signup2">
    <div id="mc_embed_signup_scroll">




<div id="mlb2-2024903" class="ml-subscribe-form ml-subscribe-form-2024903">
    <div class="ml-vertical-align-center">
        <div class="subscribe-form ml-block-success" style="display:none">
            <div class="form-section">
                <h4></h4>
                <p>Success!</p>
            </div>
        </div>
        <form class="ml-block-form" action="//app.mailerlite.com/webforms/submit/i4m1h1" data-code="i4m1h1" method="POST" target="_blank">
            <div class="subscribe-form">
                <div class="form-section">
                    <h4></h4>
                    <p></p>
                </div>
                <div class="form-section">
                    <div class="form-group ml-field-email ml-validate-required ml-validate-email">
                        <input type="email" name="fields[email]" class="form-control" placeholder="Email*" value="" id="footer-cta-input">
                    </div>
                </div>
                <input type="hidden" name="ml-submit" value="1" />
                <button type="submit" class="text-uppercase btn btn-primary btn-lg btn-bottom primary gradient-on">
                    Start Class Now
                </button>
                <button disabled="disabled" style="display: none;" type="button" class="loading gradient-on">
                    <img src="//static.mailerlite.com/images/rolling.gif" width="20" height="20" style="width: 20px; height: 20px;">
                </button>
            </div>
        </form>
        <script>
            function ml_webform_success_2024903() {
                jQuery('.ml-subscribe-form-2024903 .ml-block-success').show();
                jQuery('.ml-subscribe-form-2024903 .ml-block-form').hide();
            };
        </script>
    </div>
</div></div>
<script type="text/javascript" src="//static.mailerlite.com/js/w/webforms.js?v25"></script>


    </div> </div>
    <div class="col-sm-5 footerlinks">
    <br>
    <ul class="mylist">
          <li><a href="/">Home</a></li>
    <li><a href="/blog.html">Blog</a></li>
  <li><a href="/about.html">About</a></li>
  <li><a href="/contact.html">Contact</a></li>
    </ul>
    <ul class="mylist2">
  <li><a href="https://www.facebook.com/ukmoneynest/">Facebook</a></li>
  <li><a href="https://twitter.com/ukmoneynest">Twitter</a></li>

    </ul>
  </div>

  </div>
  <br> 
  <br>
   <div class="finalfooterlinks"><p>
  <a href="/privacy-policy.html">Privacy Policy</a> | <a href="/terms-and-conditions.html">Terms of Service</a></p>

  <p>&copy; Copyright 2015 -
<script type="text/javascript">
    now = new Date
    theYear=now.getYear()
    if (theYear < 1900)
    theYear=theYear+1900
    document.write(theYear)
</script></div>
<br>

</footer>

score 2 · Accepted Answer · answered Mar 31 '16 at 16:03

2

Your footer is inside a .container which has a 1170px width.

So you just need to get it out of here.

answered Mar 31 '16 at 16:03

Vincent G

8,547
1
18
36

Thanks, I believe it has to stay in the container for proper Bootstrap mark-up. I think the container width is inhertied from the page width? – Sam Jefferies Apr 01 '16 at 06:37
You can do as @Ali Seyedi said in that case, if it stays in `.container`, he will inherit from `1170px` width. – Vincent G Apr 01 '16 at 07:32
Thanks, I just closed the page container above the footer and this sorted the issue out. – Sam Jefferies Apr 01 '16 at 08:12

score 1 · Answer 2 · answered Mar 31 '16 at 16:06

1

Is it what you want?

<div class="container">
    <p>Your content goes here</p>
</div>

<footer class="footer">
      <div class="container">
          <p>Your footer content here.</p>
      </div>
</footer>

answered Mar 31 '16 at 16:06

Ali Seyedi

1,758
1
19
24

score 1 · Answer 3 · edited May 23 '17 at 12:09

Another solution if you don't want to move the footer outside of container, just add this css to your code:

footer {
position: relative;
width: 100vw;
left: calc(-50vw + 50%);}

This will make footer have 100% of the viewport width, and move the child element 50% of the viewport width – minus 50% of the parent element's width – to the left to make it meet the edge of the screen. I found this answer here: Is there are way to make a child DIV's width wider than the parent DIV using CSS?.

Hope this help.

score 0 · Answer 4 · answered Mar 31 '16 at 16:03

0

If you move your footer outside of, and directly after div.container, it will span the full-width of the browser window.

answered Mar 31 '16 at 16:03

smrubin

551
6
13

Make Footer full-width (container-fluid) despite body container non-fluid

4 Answers4