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>
Related
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
I'd like to use Bootstrap's .container property to format my site, not .container-fluid, as I want the width limited at certain viewports. I also would like to have half the (desktop) site static, filling the left half of the window. I can make this happen, but when I use position:fixed; the col-md-6 adopts 50% of the full width of the viewport, not of the .container, and my content extends under the right half, as you can see where I've made the opacity of the white background less.
How do I make the left half of my responsive content fixed, while still maintaining width properties of .container?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<style>
.leftside {
background-image: url("http://studiotierney.com/studiotierneycom/sample/images/leftside-BG.jpg");
background-size:cover;
background-position:50% 50%;
padding:0;
}
#media (max-width:991px) {
.leftside {
height:800px;
color:white;
padding:0;
}
.bluebg {
position:absolute;
width:100%;
background-color:#0063af;
top: 0;
left: 0;
padding: 0; /* Cover the full screen width */
height:800px;
}
}
#media (min-width:992px) {
.leftside {
position:fixed;
height:100%;
color:white;
overflow:hidden;
padding:0;
}
.bluebg {
position:fixed;
width:50%;
background-color:#0063af;
top: 0;
left: 0;
padding: 0; /* Cover the full screen width */
height:100%;
}
}
.logo {
text-align:center;
}
</style>
<!-- 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 bluebg"></div>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6 leftside">
<div class="row">
<div class="col-xs-2" style="background-color:yellow; height:300px;"></div>
<div class="col-xs-8 logo">
<img src="http://studiotierney.com/studiotierneycom/sample/images/sampleLogo.png" class="img-responsive" alt="Sample Logo" style="margin:auto;" />
</div>
<div class="col-xs-2" style="background-color:yellow; height:300px;"></div>
</div>
</div>
<div class="col-xs-12 col-md-6 col-md-offset-6" style="background-color:white;height:4000px; opacity:.8;">Scroll Content</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="../js/jquery-1.11.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../js/bootstrap.js"></script>
</body>
</html>
http://studiotierney.com/studiotierneycom/sample/container-sample.html
Make column fixed position in bootstrap
I currently have a page like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Title</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.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">
<div class="page-header">
<h3>HEADING</h3>
<button class="btn btn-danger pull-right">Button</button>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
I want the h3 and the button to be vertically aligned in the div, and I've tried setting style to vertical-align:middle but it doesn't work. What should I do?
EDIT: It seems my original question was unclear. I meant that I want the header text and button to appear on the same "line", but to be aligned vertically on that line. Right now, I can get them to be on the same line but the text and the button will be aligned by the top edge rather than the center.
Weave: http://kodeweave.sourceforge.net/editor/#0def3ea11664636810328b98a8780ed2
You didn't post your css so I don't know what you're working with. So here's a quick note:
NOTE: vertical-align only works for display: table-cell; and display: inline; elements (It also applies to ::first-letter and ::first-line).
Here's a simple solution using display: table; on the parent and display: table-cell; for what you want vertically centered.
If you want your button centered you have to remove the pull-right class, or you can add another class after it and then override it's css. (Simple solution, just remove the pull-right class.
Edit: So you want the button in the same line as your h3 tag right?
Well before I show you how to solve this remember that h1-h5 tags are all display: block; elements meaning they will always embed as a new line. (Like a paragraph <p> tag) So you need to tell the h3 tag to display either inline or inline-block.
Here is my revised weave: http://kodeweave.sourceforge.net/editor/#7b9839fb7971df2a27b7af895169ad8a
html, body {
height: 100%;
}
.table {
display: table;
width: 100%;
height: 100%;
}
.cell {
display: table-cell;
vertical-align: middle;
}
h3 {
display: inline-block;
}
.btn {
margin-top: 15px;
}
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css"/>
<div class="container table">
<div class="page-header cell">
<h3>HEADING</h3>
<button class="btn btn-danger pull-right">Button</button>
</div>
</div>
https://jsfiddle.net/dsupreme/m92e9dkr/
Make use of FlexBox
HTML code:
<div class="container">
<div class="page-header">
<div id="vertical"><h3>HEADING</h3>
<button class="btn btn-danger pull-right">Button</button></div></div>
</div>
</div>
</div>
CSS code:
.container {
width: 100%;
text-align: center;
}
#vertical {
width: 100%;
}
h3 {
margin: 0;
padding: 0;
}
.page-header {
height: 200px;
width: 100%;
background-color: red;
display: flex;
justify-content: center;
align-items: center;
}
You can verify the elements are vertically aligned by setting bootstraps default margins and paddings to 0px if needed.
.container {
white-space: nowrap;
background: #eee;
}
.contener:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em;
}
.page-header {
display: inline-block;
vertical-align: middle;
width: 300px;
}
https://jsfiddle.net/curtisweeks/md5qos66/
Explanation and source: https://css-tricks.com/centering-in-the-unknown/
http://codepen.io/ruchiccio/pen/xVmJaG
<div class="container">
<div class="page-header">
<div id="vertical"><h3>HEADING</h3>
<button class="btn btn-danger pull-right">Button</button></div></div>
</div>
#vertical {
position: absolute;
top: 40%;
width: 100%;
}
h3 {
margin: 0;
padding: 0;
}
.page-header {
height: 200px;
background-color: red;
position: relative;
}
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;
}
What I am trying to achieve is a page with a sticky footer, which is a vector island.
The island is always at the bottom of the page, but when the browser height is too small it invokes vertical scrolling.
Behind the island is a sunburst that then falls behind all the page content. This is quite big, about 1417px high. This doesn't affect vertical scrolling though.
Here is what I have so far and I've been stuck for hours! Any help would be appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="description">
<meta content="" name="author">
<link href="../../docs-assets/ico/favicon.png" rel="shortcut icon">
<title>Sticky Footer Template for Bootstrap</title><!-- Latest compiled and minified CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
html,
body {
height: 100%;
background-color: #6ec8e4;
}
#wrap {
min-height: 100%;
height: auto;
}
.testBox{
height: 300px;
width: 100%;
background: red;
margin: 20px 0;
}
.footer-image-container {
margin: 0 auto;
position: absolute;
width: 100%;
height: 1417px;
}
.footer-image {
position: absolute;
bottom: 0;
z-index: -1;
}
</style>
</head>
<body>
<!-- Wrap all page content here -->
<div id="wrap">
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sticky footer</h1>
</div>
<div class="row">
<div class="testBox"></div>
</div>
<div class="row">
<div class="testBox"></div>
</div>
<div id="footer">
<div class="footer-image-container"><img class="img-responsive footer-image" src="http://i.imgur.com/wSNrfJD.png">
<img class="img-responsive footer-image" src="http://i.imgur.com/alDv0tE.png"></div>
</div>
</div>
</div><!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
It would be better to use the images as background images in css:
see https://jsfiddle.net/6t9vxq1o/1/
.body{
height:100%;
background: url(http://i.imgur.com/wSNrfJD.png) no-repeat center bottom;
}
#wrap{
background:url(http://i.imgur.com/alDv0tE.png) no-repeat center bottom;
}
This way the images will be always on bottom, the sunburst behind the content, and the grass behind the footer