Best IT Recipes

Make a footer at the bottom of the page using Twitter Bootstrap

I have several web pages that do not have a lot of content, and the footer is in the middle of the page, but I want it to be at the bottom.

I put all my pages in the "holder"

#holder { min-height: 100%; position:relative; }

And then used the following CSS for my footer

 ul.footer { margin-top: 10px; text-align: center; } ul.footer li { color: #333; display: inline-block; } #footer { bottom: -50px; height: 50px; left: 0; position: absolute; right: 0; }

html for my footer

 <div class="container"> <div class="row"> <div class="span12"> <div id="footer"> <ul class="footer"> <li>Website built by <a href="#">Fishplate</a></li>&nbsp;&nbsp; <li>Email:exampleemail@gmail.com</li> </ul> </div> </div> </div> </div>

I would like to keep the bottom of the liquid.

+69
css twitter-bootstrap
Jul 19 '12 at 7:31
source share
7 answers

As already mentioned in the comments, you based your code on this solution: https://stackoverflow.com/a/4646/

One of the key parts of this solution is adding height: 100% to html, body , so the #footer element has a base height for working - this is not in your code:

 html,body{ height: 100% }

You will also find that you are having problems using bottom: -50px , as this will cause your content to be bent when there is not enough content. You will need to add margin-bottom: 50px to the last element before #footer .

+39
Jul 19 2018-12-12T00:
source share

just add the navbar-fixed-bottom class to the footer.

 <div class="footer navbar-fixed-bottom">
+81
Feb 06 '14 at 13:22
source share

http://bootstrapfooter.codeplex.com/

This should solve your problem.

 <div id="wrap"> <div id="main" class="container clear-top"> <div class="row"> <div class="span12"> Your content here. </div> </div> </div> </div> <footer class="footer" style="background-color:#c2c2c2"> </footer>

CSS

 html,body { height:100%; } #wrap { min-height: 100%; } #main { overflow:auto; padding-bottom:150px; /* this needs to be bigger than footer height*/ } .footer { position: relative; margin-top: -150px; /* negative value of footer height */ height: 150px; clear:both; padding-top:20px; color:#fff; }
+8
Jul 19 '12 at 9:07
source share

Here is an example using css3:

CSS

 html, body { height: 100%; margin: 0; } #wrap { padding: 10px; min-height: -webkit-calc(100% - 100px); /* Chrome */ min-height: -moz-calc(100% - 100px); /* Firefox */ min-height: calc(100% - 100px); /* native */ } .footer { position: relative; clear:both; }

HTML:

 <div id="wrap"> <div class="container clear-top"> body content.... </div> </div> <footer class="footer"> footer content.... </footer>

fiddle

+6
Oct 10 '14 at
source share

Use bootstrap classes to your advantage. navbar-static-bottom leaves it below.

 <div class="navbar-static-bottom" id="footer"></div>
+6
Jul 01 '15 at 12:58
source share

Most of the above solution did not work for me. However, below this solution works just fine:

 <div class="fixed-bottom">...</div>

Source

+4
Oct 17 '17 at 7:31 on
source share

This can be easily achieved with CSS flex. Having HTML markup as follows:

 <html> <body> <div class="container"></div> <div class="footer"></div> </body> </html>

The following CSS should be used:

 html { height: 100%; } body { min-height: 100%; display: flex; flex-direction: column; } body > .container { flex-grow: 1; }

Here's CodePen to play with: https://codepen.io/webdevchars/pen/GPBqWZ

0
Jan 08 '19 at 21:54
source share


More articles:


All Articles