Skip to content

Instantly share code, notes, and snippets.

@sarvar

sarvar/index.html

Created May 16, 2019 10:34
Show Gist options
  • Save sarvar/be50324de9e06eb4e36887167a161eba to your computer and use it in GitHub Desktop.
Save sarvar/be50324de9e06eb4e36887167a161eba to your computer and use it in GitHub Desktop.
Download ZIP
Flexbox Sticky Footer
Raw
index.html
<body class="d-flex flex-column">
<div id="page-content">
<div class="container text-center">
<div class="row justify-content-center">
<div class="col-md-7">
<h1 class="font-weight-light mt-4 text-white">Sticky Footer using Flexbox</h1>
<p class="lead text-white-50">Use just two Bootstrap 4 utility classes and three custom CSS rules and you will have a flexbox enabled sticky footer for your website!</p>
</div>
</div>
</div>
</div>
<footer id="sticky-footer" class="py-4 bg-dark text-white-50">
<div class="container text-center">
<small>Copyright &copy; Your Website</small>
</div>
</footer>
</body>
Raw
style.css
/* Sticky Footer Classes */
html,
body {
height: 100%;
}
#page-content {
flex: 1 0 auto;
}
#sticky-footer {
flex-shrink: none;
}
/* Other Classes for Page Styling */
body {
background: #007bff;
background: linear-gradient(to right, #0062E6, #33AEFF);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment