Make footer stick to bottom of page using Twitter Bootstrap

Question

I have some webpages that do not have much content and the footer sits in the middle of the page  but I want it to be at the bottom    I have put all my pages in a  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      The html for my footer   lt div class  container  gt     lt div class  row  gt       lt div class  span12  gt         lt div id  footer  gt           lt ul class  footer  gt             lt li gt Website built by  lt a href     gt Fishplate lt  a gt  lt  li gt  amp nbsp  amp nbsp             lt li gt Email exampleemail gmail com lt  li gt           lt  ul gt         lt  div gt       lt  div gt     lt  div gt   lt  div gt    I would like to keep the footer fluid

User · Answer

Use the bootstrap classes to your advantage  navbar-static-bottom leaves it at the bottom    lt div class  navbar-static-bottom  id  footer  gt  lt  div gt

User · Answer

It could be easily achieved with CSS flex  Having HTML markup as follows    lt html gt       lt body gt           lt div class  container  gt  lt  div gt           lt div class  footer  gt  lt  div gt       lt  body gt   lt  html gt    Following CSS should be used   html       height  100     body       min-height  100      display  flex     flex-direction  column    body  gt   container       flex-grow  1      Here s CodePen to play with  https   codepen io webdevchars pen GPBqWZ

User · Answer

http   bootstrapfooter codeplex com   This should solve your problem    lt div id  wrap  gt   lt div id  main  class  container clear-top  gt   lt div class  row  gt   lt div class  span12  gt  Your content here   lt  div gt   lt  div gt   lt  div gt   lt  div gt   lt footer class  footer  style  background-color  c2c2c2  gt   lt  footer gt    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

User · Answer

just add the class navbar-fixed-bottom to your footer   lt div class  quot footer navbar-fixed-bottom quot  gt   Update for Bootstrap 4 - as mentioned by Sara Tibbetts - class is fixed-bottom  lt div class  quot footer fixed-bottom quot  gt

User · Answer

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    lt div id  wrap  gt       lt div class  container clear-top  gt         body content          lt  div gt   lt  div gt   lt footer class  footer  gt      footer content      lt  footer gt    fiddle

User · Answer

As discussed in the comments you have based your code on this solution  https   stackoverflow com a 8825714 681807  One of the key parts of this solution is to add height  100  to html  body so the  footer element has a base height to work from - this is missing from your code   html body      height  100      You will also find that you will run into problems with using bottom  -50px as this will push your content under the fold when there isn t much content  You will have to add margin-bottom  50px to the last element before the  footer

User · Answer

Most of the above mentioned solution didn t worked for me  However  below given solution works just fine              lt div class  fixed-bottom  gt     lt  div gt          Source

[css] Make footer stick to bottom of page using Twitter Bootstrap

Examples related to css

Examples related to twitter-bootstrap