Here's a simple method to create a sticky footer with Bootstrap without the need to manually write CSS styles. The Bootstrap navigation bar component includes the .navbar-fixed-bottom class, which allows you to affix a navbar to the bottom of the screen. For instance,
p {
text-align: center;
padding: 10px
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container-fluid">
<p>© 2017 <strong>Coding Tips</strong></p>
</div>
</nav>
By using this approach, you can achieve a sticky bottom navigation bar that functions as a footer solely with Bootstrap.
Edit - Crafting a sticky footer that adjusts with page size.
The previous example showcases a fixed footer at the bottom of the viewport, overlaying the page content. If you prefer a footer that sticks to the bottom when content is sparse, we can utilize flexible boxes.
body {
margin: 0; /* To ensure the footer takes up the full width of the viewport */
}
.container {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.content {
flex: 1;
}
footer {
text-align: center;
}
<div class="container">
<div class="content">
Your content goes here.
</div>
<footer>
<p>© 2017 <strong>Coding Tips</strong></p>
</footer>
</div>
The .content class automatically utilizes the available space, moving the footer to the screen's bottom. With the minimum height of .container set to 100vh, it will occupy at least the entire screen height. As more space is required, the footer adjusts further down. Flexbox offers a straightforward and elegant solution for achieving this effect.
Bootstrap navbars: Components - Bootstrap
Solved by Flexbox: Sticky Footer - Solved by Flexbox - Cleaner, hack-free CSS