Bootstrap Footer Element Position Bottom

October 25, 2024 Post a Comment

Within a HTML page I have made, I wanted to add a footer. I am making use of Bootstrap and in this example it is shown that the footer element can be positioned to the bottom of th

Solution 1:

If you want footer to be visible all the time at the bottom of the site, but not over the container. You need to add min-height:100% & position:relative to html not to body. To body element you need to add margin-bottom with value of footer height.

html{
    min-height:100%;
    position: relative;
}
body {
    background-color: tomato;
    margin:0060px0;
    padding:0;
}
.container {
    background-color: yellow;
    height: 300px;
}
footer {
    background: #e0f2f7;
    position: absolute;
    bottom: 0;
    width: 100%;
    height:60px;
}

<html><body><h2>Foo</h2><divclass="container">asdasds</div><footer>sadasdsa</footer></body></html>

Edit 1:

If you want to make dynamic height of the footer use this JS code (if you use jQuery)

$( document ).ready(function() {
    var height = $( 'footer' ).height();
    $( 'body' ).css('margin-bottom',height + 'px');
});

Solution 2:

If I understand your question correctly, below is your desired result?

It's because you set the height of the body to 300px; Resulting in a footer at 300px from the top. Remove that line and it should be fine.

.body {
  overflow: scroll;
  background-color: tomato;
  position: relative;
}
.container {
  background-color: yellow;
  /*This would be a dynamic number, when removing this property.
  If you do not really understand the idea I am talking about, try to change
  this value and see for yourself what happens (with the footer element).
  The height is set only for the sake of showing the issue. */height: 500px;
}
footer {
  background: #e0f2f7;
  position: absolute;
  bottom: 0;
  width: 100%;
}

<divclass="body"><h2>
    Foo
  </h2><divclass="container">
    asdasds
  </div><footer>sadasdsa</footer></div>

Solution 3:

<!DOCTYPE html><html><head><metacharset="utf-8"><metaname="viewport"content="width=device-width"><title>Footer at bottom</title><style>.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 20px;
  background-color: #efefef;
  text-align: center;
}
  </style></head><body><divclass="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div></body></html>

This is the way u can always keep the footer at the bottom of page

Solution 4:

You can simply do this using the class "navbar-fixed-bottom" on nav element. Try this example. To know how it works you can checkout this page - http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-navbar.php

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Example of Bootstrap 3 Fixed Navbar</title><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><styletype="text/css">body{
        padding-bottom: 70px;
    }
</style></head><body><navrole="navigation"class="navbar navbar-inverse navbar-fixed-bottom"><divclass="container-fluid"><!-- Brand and toggle get grouped for better mobile display --><divclass="navbar-header"><buttontype="button"data-target="#navbarCollapse"data-toggle="collapse"class="navbar-toggle"><spanclass="sr-only">Toggle navigation</span><spanclass="icon-bar"></span><spanclass="icon-bar"></span><spanclass="icon-bar"></span></button><ahref="#"class="navbar-brand">Brand</a></div><!-- Collection of nav links and other content for toggling --><divid="navbarCollapse"class="collapse navbar-collapse"><ulclass="nav navbar-nav"><liclass="active"><ahref="#">Home</a></li><li><ahref="#">Profile</a></li><li><ahref="#">Messages</a></li></ul><ulclass="nav navbar-nav navbar-right"><li><ahref="#">Login</a></li></ul></div></div></nav><divclass="container-fluid"><pstyle="line-height: 100px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.Quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus. Tibulum consectetur scelerisque lacus, ac fermentum lorem convallis sed.</p></div></body></html>

Html5 Tutorial

Bootstrap Footer Element Position Bottom

Solution 1:

Solution 2:

Solution 3:

Solution 4:

Post a Comment for "Bootstrap Footer Element Position Bottom"