Not really sure why the sticky footer isn't working in Bootstrap 4. I have a TYPO3 website which I am a beginner at.
The sticky footer is not sticking at the bottom of the page.
Here is a copy of the page source as it has been rendered.
I basically copied the html file from bootstraps docs folder and then modified it and copied it into my TYPO3 template.
If I fill the page with content, the footer does not stick - I have to scroll the page down to see it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Landing Page</title>
<meta name="generator" content="TYPO3 CMS">
<link rel="stylesheet" type="text/css"
href="/typo3temp/assets/css/d42b6e1bdf.css?1507853162" media="all">
<link rel="stylesheet" type="text/css"
href="/fileadmin/templates/landing_page/css/bootstrap.min.css?1507860230"
media="all">
<link rel="stylesheet" type="text/css"
href="/fileadmin/templates/landing_page/css/sticky-footer.css?1507861966"
media="all">
<script
src="/fileadmin/templates/landing_page/js/jquery-3.2.1.min.js?1507862465"
type="text/javascript"></script>
<script
src="/fileadmin/templates/landing_page/js/tether.min.js?1507862602"
type="text/javascript"></script>
<script
src="/fileadmin/templates/landing_page/js/bootstrap.min.js?1507854311"
type="text/javascript"></script>
</head>
<body>
<div class="container">
<div class="mt-1">
<h1>Sticky footer</h1>
</div>
<p class="lead">Pin a fixed-height footer to the bottom of the
viewport in desktop browsers with this custom HTML and CSS.</p>
<p>
Use <a href="../sticky-footer-navbar">the sticky footer with a
fixed navbar</a> if need be, too.
</p>
<div class="row">
<div class="col">1 of 3</div>
<div class="col">1 of 3</div>
<div class="col">1 of 3</div>
</div>
</div>
<footer class="footer">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer>
</body>
</html>
Update 2020 - Bootstrap 4.5+
Now that Bootstrap 4 is flexbox, it's easier to use flexbox for the sticky footer.
<div class="d-flex flex-column min-vh-100">
<nav>
</nav>
<main class="flex-fill">
</main>
<footer>
</footer>
</div>
Bootstrap 4.0 Sticky Footer (4.0.0)
Simple Footer at Bottom Example (4.5.0)
Note: The flex-fill utility was included in Bootstrap 4.1 at later release. So after that release the extra CSS for flex-fill won't be needed. Additionally min-vh-100 is included in newer Bootstrap 4 releases.
Also see: Bootstrap 4 - Sticky footer - Dynamic footer height
Managed to figure it out. Maybe I have a misunderstanding on what "Sticky" is or something, but the solution was to change absolute -> fixed in the css file.
e.g. from:
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
line-height: 60px; /* Vertically center the text there */
background-color: #f5f5f5;
}
to:
.footer {
position: fixed;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
line-height: 60px; /* Vertically center the text there */
background-color: #f5f5f5;
}
The example in the Bootstrap 4 docs has the following CSS:
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px; /* Margin bottom by footer height */
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px; /* Set the fixed height of the footer here */
line-height: 60px; /* Vertically center the text there */
background-color: #f5f5f5;
}
You've probably forgotten to set html { position: relative; min-height: 100%; } - I know I usually forget that part.
In Bootstrap 4, use the fixed-bottom class to stick your footer. No custom CSS needed:
<footer class="footer fixed-bottom">
...
</footer>
<html class="h-100">
.
.
</html>
This should solve the problem. It is similar to Benjineer's answer but ready bootstrap class.
Tested with Bootstrap 4.3.1
if you use
<footer class="footer fixed-bottom">
...
</footer>
remember to add
html {
padding-bottom: >= footer height;
}
to the CSS
to avoid blocking some content at the bottom of your page
Related
Hi I am trying to stick the footer the bottom of the page even when my page is thin on content.
I have tried to use below CSS code but it does not work.
Any suggestions?
CSS
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<aside class="left-panel">
</aside>
<section class="content">
<header class="top-head container-fluid">
</header>
<!-- Header Ends -->
<div class="warper container-fluid">
<div class="page-header"><h1>Blank Template <small>Start new page with this</small></h1></div>
<!-- Work Here -->
</div>
<!-- Warper Ends Here (working area) -->
<footer class="container-fluid footer">
Copyright © 2014 test
<i class="fa fa-chevron-up"></i>
</footer>
</section>
<!-- Content Block Ends Here (right box)-->
</body>
</html>
I would like to add the Bootstrap Sticky Footer example to the white area of this Simple Sidebar example.
I am struggling as I cannot get it working. Either I fail when the content does not fit the screen or I fail when the content exceeds it.
Any hint?
Thank you all.
Just make sure the div is centered within the white area.
Then use position absolute or relative in the styling.
Take a look at my code and pay attention to where the footer div is placed in the html and how the styling is written. Hopefully this helps.
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Simple Sidebar - Start Bootstrap Template</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/simple-sidebar.css" rel="stylesheet">
<style>
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #f5f5f5;
}
</style>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
Start Bootstrap
</a>
</li>
<li>
Dashboard
</li>
<li>
Shortcuts
</li>
<li>
Overview
</li>
<li>
Events
</li>
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1>Simple Sidebar</h1>
<p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.</p>
<p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>
Toggle Menu
<footer class="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer>
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
There's a sticky-footer-navbar.css that seems to be missing in Sidebar Example. Here's the contents of that css file
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
body > .container {
padding: 60px 15px 0;
}
.container .text-muted {
margin: 20px 0;
}
.footer > .container {
padding-right: 15px;
padding-left: 15px;
}
code {
font-size: 80%;
}
From Bootstrap 4 you need to change the style so rather than the body you put the margin on page-content-wrapper.
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
#page-content-wrapper {
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
I am having trouble trying to center an image both horizontally and vertically, using Bootstrap and a sticky footer. It needs to be fluid, responsive and work on both desktops and mobiles.. I don't want the footer to go over the image if the window/screen size is too small (obviously).
Any help or insight would be great appreciated!
Here's what I've got..
404.php
<html lang="en">
<head>
<title>Error 404</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<title>Error 404</title>
<!-- Bootstrap -->
<link href="/assets/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles -->
<link href="/assets/css/sticky-footer.css" rel="stylesheet">
<link href="/assets/css/custom.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container-fluid">
<div class="panel-default">
<div class="panel-body">
<div class="text-center top"><h2>Error 404</h2>
</div>
<div class="form-group text-center">
<h4>Nothing to see here, nothing to see</h4>
<img src="/assets/images/404.jpg" class="img-responsive center-block">
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<p class="text-muted text-center">
<small>© 2015</small>
</p>
</div>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</body>
</html>
sticky-footer.css
/* Sticky footer styles */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 40px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 40px;
}
Sticky bottom footer
Bootstrap has a navbar that I find is useful for footers. Try using navbar navbar-default navbar-fixed-bottom instead of your custom footer class.
Center vertically
This question has a lot of great information regarding centering vertically. This is what I use:
.vertical-center {
min-height: 100%; /* Fallback for browsers do NOT support vh unit */
min-height: 100vh; /* These two lines are counted as one :-) */
display: flex;
align-items: center;
}
Center horizontally
I've found the easiest solution to centering horizontally is just using center-block. Hasn't failed me yet.
I would suggest you have a loook at this stackoverflow question first.
This might also get you started (change it in your sticky-footer.css):
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 40px;
display: table; /*<<<< this line was added*/
}
.container {
height: 100%;
display: table-cell;
vertical-align: middle;
}
.cent {
margin: 0 25% auto 25%;
}
Add the class cent to you paragraph in your webpage, i.e.:
<p class="cent text-muted text-center">
<small>© 2015</small>
</p>
I'm having trouble positioning my vertical navigation bar to the left of my content Div. Here is what I have and what I want:
The problem, is that it's a fixed position so it's different for monitors that are not a similar size. So I'm guessing I'll need to have relative positioning but I'm not too sure on how to do it.
HTML
<!DOCTYPE html>
<html>
<head>
<title> Home Page </title>
<link rel="stylesheet" type="text/css" href= "styles/styling.css" />
</head>
<div class="container">
<ul class="nav">.....(Just nav bar stuff)
<div class="content">
<h1>abcd</h1>
<p>abcd</p>
</div>
CSS
.content {
background-color: #FFFFFF;
width: 650px;
padding: 20px;
margin: auto;
word-wrap: break-word
}
.container {
position: fixed;
top: 151px;
left: 420px;
}
Thanks!
Fixed position will help you keep your menu visible when you scroll down. Otherwise, you should not use it.
<div class="container">
<div class="one-third column">
<ul class="yourmenu">xxx</ul>
<div class="filler"></div>
</div>
<div class="two-thirds column">
Your page content here
</div>
</div>
<style>
.container {width:960px;margin:auto;}
.column {float:left;position:relative;}
.one-third {width:320px;}
.two-thirds {width:640px;}
.filler {width:100%;height:10px;}
.yourmenu {position:fixed;top:100px;} /* do not define left, because it will fix the screen and not the column div */
</style>
Use percent (%) instead of pixels (px).
I am having issues to fix the header. I already manage to make the footer sticky and responsive, now I want the header to be fixed and responsive for different screen size.
This is what I tried so far:
Live Demo http://jsbin.com/vevay/1/edit?html,css,output
HTML code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Responsive Sticky Footer</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body class="container">
<div class="block header_block">
<h1>Responsive Fixed Header</h1>
</div>
<div class="block push body_block">
<h2>Body Content</h2>
</div>
<div class="block footer_block">
<h2>Responsive The Sticky Footer</h2>
<h1>cool</h1>
</div>
</body>
</html>
CSS code
html {
height: 100%;
}
.container {
display: table;
height: 100%;
}
.block {
display: table-row;
height: 1px;
}
.push {
height: auto;
}
.container {
width: 100%;
margin: 0 auto;
}
.block:nth-child(odd) {
}
.header_block{
background: grey;
}
.body_block{
background: lightblue;
}
.footer_block{
background: green;
}
update:
I did some researcher before posting this question, their are this one but the footer is not responsive, that's why I posted this question.
EDIT
I've come up with another solution : http://jsbin.com/gevafi/2/edit but I still have a margin left at the bottom of the footer.
EDIT 2
Temporary solution: http://jsbin.com/vokiqi/1/edit?html,css,output
Decided to have mercy on you and create one from scratch for you: http://jsfiddle.net/yo2ukrua/3/
Instead of using tables, I removed all of it and kept them as blocks. For your setup, you didn't really need any tables and I'm guessing you only used it so that you could make your footer stick to the bottom.
Once they're back to blocks, you can just give the footer and header a fixed position, set the footer to bottom and header to top.
Then apply a top and bottom margin to the body and the margin should be the height of the footer and header.
CSS:
.header_block {
background: grey;
position: fixed;
width: 100%;
top: 0px;
}
.body_block {
background: lightblue;
margin-bottom: 18px; /* height of your footer */
margin-top: 18px; /* height of your header */
}
.footer_block {
background: green;
bottom: 0px;
position: fixed;
width: 100%;
}
HTML:
<body class="container">
<div class="block header_block">
<h1>Responsive Fixed Header</h1>
</div>
<div class="block push body_block">
<h2>Body Content<br>Body Content<br>Body Content <br>Body Content <br>Body Content<br>Body Content<br>Body Content<br>Body Content</h2>
</div>
<div class="block footer_block">
<h2>Responsive The Sticky Footer</h2>
<h1>cool</h1>
</div>
</body>
Alternatively, you can have a better footer
http://jsfiddle.net/yo2ukrua/15/
It uses a div (push) that has a minimum height of the window size but if the window size is smaller than the content (creating a scroll) it then uses the height of the content itself, thus always pushing the footer to the bottom. The footer also retains a position of relative.