Bootstrap 3 Flush footer to bottom. not fixed
See the example below. This will position your Footer to stick to bottom if the page has less content and behave like a normal footer if the page has more content.
CSS
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: 100%;
margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 155px; /* .push must be the same height as .footer */
}
HTML
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
UPDATE: New version of Bootstrap demonstrates how to add sticky footer without adding a wrapper. Please see Jboy Flaga's Answer for more details.
Flushing footer to bottom of the page, twitter bootstrap
Found the snippets here works really well for bootstrap
Html:
<div id="wrap">
<div id="main" class="container clear-top">
<p>Your content here</p>
</div>
</div>
<footer class="footer"></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;
}
Making footer stay at bottom with Bootstrap 3
You were almost there, the one thing it lacks is setting the parent with a relative position:
body {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
margin-bottom: 50px;
margin-top: 0;
position: relative;
}
And then you can make sure that it stays always there by adding a negative value to bottom. E.g.:
footer {
background-color: #f5f5f5;
bottom: -100px;
height: 60px;
position: absolute;
width: 100%;
}
Btw, you don't need to add margins to the <body>
, since all the content is in it :)
Edit
After reviewing a while, the solution above would be enough if bigger screens with higher heights were not considered...
The problem was that the middle container itself didn't fill the entire space, making the footer appear in the middle.
Therefore, instead of using position: absolute
or fixed
for the footer (or even to the <body>
), the solution was to adjust the height of that same middle container to the height of the window by this:
<script>
$('body>.container').height(
$(window).height()-
$('body>.container-fluid').height()-
$('body>footer').height()
);
</script>
Setting the middle container's to the window's height removing the upper container's and footer's height places the footer in the correct position.
Also for the footer itself this rule comes in handy: footer{overflow: hidden}
, just in case the contents/inner spacings of the footer overflow it.
Getting a footer to stick to the bottom with bootstrap 3
This works for me in Bootstrap 3.3.1
<div class="container">
[...]
</div>
<footer class="footer">
<div class="container">
<p class="text-muted">my footer</p>
</div>
</footer>
make sure the footer tag is outside the container
div
you need the sticky-footer.css too which is here
Edit:
To do what you're asking in the comments, have you tried this?:
<footer class="footer">
<div class="navbar navbar-inverse navbar-fixed-bottom">
<div class="navbar-inner">
<div class="container">
<span>testing</span>
</div>
</div>
</div>
</footer>
Also you need to tweak the css class for .footer
:
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* height: 60px; */
background-color: #f5f5f5;
}
Bootstrap footer doesn't stick to the bottom of the page
Don't use the fixed-bottom
class in the footer and try this instead. You may need to adjust the values a bit instead of using 160px.
html {
position: relative;
min-height: 100%;
padding-bottom:160px;
}
body {
margin-bottom: 160px;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 160px;
}
How to stick footer to bottom of the page, without using fixed
First thing, for footer, you need to use <footer class="footer"></footer>
if you're using bootstrap.
You can also have a separate component for footer if you're using react.
In html, css
Bootstrap footer at the bottom of the page
https://stackoverflow.com/questions/10099422/flushing-footer-to-bottom-of-the-page-twitter-bootstrap#:~:text=The%20simplest%20technique%20is%20probably,the%20footer%20to%20the%20bottom.&text=Tested%20with%20Bootstrap%203.6.
The above links should be helpful
Related Topics
Special Character Not Displaying as Expected
How to Use <Section> and <Article> Tags in HTML5
Extra Space When Centering Elements Using Flexbox
How to Add HTML Code to Jsf Facesmessage
Is 'Disabled' a Valid Attribute for an Anchor Tag
Symetric Div with Background Image Without Clip-Path
"Break-Inside: Avoid-Column" Doesn't Work in Firefox
Difference Between Applying CSS Rules to HTML Compared to Body
How to Conditionally Wrap Some Haml Content in a Tag
Embed Youtube Code Is Not Working in HTML
Insert HTML with Scripts That Should Run
Why Is Padding Expanding a Flex Item
What's The Point of The <Option> "Label" Attribute Inside <Select>
Getting Rid of Bullet Points from <Ul>
Django Doesn't Display Newline Character When Rendering Text from Database
<Input Type="File"> Limit Selectable Files by Extensions
How to Remove X and Y on Submit in HTML Form with Image Type Button
How to Successfully Embed Images in HTML for Display in Webmail Clients