i am trying to build a new bootstrap "frame" template around my website content. With the navbar i have no problems... But then there are a few problems with the footer.
The footer shall be:
What i have so far:
sticky-footer.css:
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 550px;
}
.footer {
background: black;
position: absolute;
bottom: 0;
width: 100%;
}
#contentFooter {
margin: 0px;
width: 100%;
background: dimgray;
padding: 50px 0 40px;
margin-bottom: 30px;
color: #939fa6;
}
#copyrightFooter {
color: black;
line-height: 30px;
}
#backToTopLink::before {
display: block;
content: "";
width: 15px;
height: 15px;
border-left: 1px solid #93959d;
border-top: 1px solid #93959d;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
left: 50%;
top: 13px;
margin-left: -9px;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>ACME Inc.</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link href="sticky-footer.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</head>
<body>
<header>
<div class="container">
<nav class="navbar navbar-toggleable-md navbar-light">
<button class="navbar-toggler navbar-toggler-right" type="button"
data-toggle="collapse" data-target="#navbarText"
aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#"><img src="http://via.placeholder.com/200x70"></a>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Foo</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Bar</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Qux</a>
</li>
</ul>
</div>
</div>
</header>
<div class="container">
<div class="mt-1">
<h1>ACME Inc. presents</h1>
</div>
<p class="lead">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<footer class="footer">
<div id="contentFooter">
<div class="container">
<div class="row">
<div class="col-md-3">
<h6>ACME Inc.</h6>
</div>
<div class="col-md-3">
<h6>How to reach us</h6>
<ul>
<li>[email protected]</li>
<li>+1 234 567 890</li>
<li>Earth, Milkyway</li>
</ul>
</div>
<div class="col-md-3">
<h6>General</h6>
<ul>
<li>Imprint</li>
<li>Foo</li>
<li>Bar</li>
</ul>
</div>
<div class="col-md-3">
<h6>Sponsored by</h6>
<img style="max-width: 100%; height: auto; width: auto; vertical-align: middle;" src="http://via.placeholder.com/350x100">
</div>
</div>
</div>
</div>
<div class="container" id="copyrightFooter">
<div class="row">
<div class="col-md-3">
<small class="text-muted">ACME Inc.</small>
</div>
<div class="col-md-6">
<a href="#" id="backToTopLink"></a>
</div>
</div>
</div>
</footer>
</body>
</html>
This does mostly work, but i have 3 remaining problems (see picture also):
ACME Inc. in the black part of the footer to be centered as soon as the responsive narrowing kicks in.body { margin-bottom: 550px; } or otherwise the footer will "eat" some part of the content. The thing is... is there some way to make this "dynamically" so i don't need to recalculate the approximate footer height and refresh it in the body CSS rule?Screenshot of problems from problem list
I was not able to create a runnable code sample with the stack overflow editor (cannot find the button: https://stackoverflow.blog/2014/09/16/introducing-runnable-javascript-css-and-html-code-snippets/), so i created a jsfiddle:
When the browser image is so narrow that the responsive style kicks in, i suddenly have a white stripe below the black part of the footer. I would like the black part to continue down to the absolute bottom of the browser window.
Define columns for smaller viewports as well. There are different column definitions for different windows sizes. So your divs should look like this:
<div class="container" id="copyrightFooter">
<div class="row">
<div class="col-3 col-md-3">
<small class="text-muted">ACME Inc.</small>
</div>
<div class="col-6 col-md-6">
<a href="#" id="backToTopLink"></a>
</div>
</div>
</div>
This will make your divs have the same relative width as on big screens, if you want them to take a whole row, just set it to:
<div class="col-12 col-md-3"></div>
I would like the ACME Inc. in the black part of the footer to be centered as soon as the responsive narrowing kicks in.
You can implement css that will only affect a certain screen width. This is done using Media queries.
So if you want to have this centered on small screens, you could do something like
@media screen and (max-width: 992px)
{
.some-css-class{
text-align: center;
}
}
This will only affect screens with a viewport width <= 992px.
The same goes for your third question:
I need to define body { margin-bottom: 550px; } or otherwise the footer will "eat" some part of the content. The thing is... is there some way to make this "dynamically" so i don't need to recalculate the approximate footer height and refresh it in the body CSS rule?
You can define certain margins or paddings for your body element using media queries for different viewport widths.