Sticky footer with padding using LESS and Bootstrap 3

Basing on this answer I write my version of sticky footer with padding. No more need to use push-wrap logic and stuff like that. Check the code below and change the first two variables (@footer-padding and @footer-inner-height) for adapt it to your needs.

 * Sticky footer

@footer-padding:      40px;  // Set here the footer padding
@footer-inner-height: 150px; // Set here the footer height (without padding)

/* Calculates the overall footer height */
@footer-height: @footer-inner-height + @footer-padding*2;

html {
 position: relative;
 min-height: 100%;
body {
 /* This avoids footer to overlap the page content */
 margin-bottom: @footer-height;
 /* Fix the footer on bottom and give it fixed height */
 position: absolute;
 bottom: 0;
 width: 100%;
 height: @footer-height;
 padding: @footer-padding 0;


  <div class="content">Page content here</div>
  <footer>Footer code here</footer>


Category BootstrapCategory CoffeescriptCategory DrupalCategory GravCategory HTMLCategory JavascriptCategory JoomlaCategory jQueryCategory LaravelCategory MagentoCategory PHPCategory SharePointCategory SpringCategory ThymeleafCategory WordPressCategory Workflow


Developed and designed by Netgloo
© 2019 Netgloo