Flushing footer to bottom of the page, twitter bootstrap
Found the snippets here works really well for bootstrap
Html:
<div id="wrap">
<div id="main" class="container clear-top">
<p>Your content here</p>
</div>
</div>
<footer class="footer"></footer>
CSS:
html, body {
height: 100%;
}
#wrap {
min-height: 100%;
}
#main {
overflow:auto;
padding-bottom:150px; /* this needs to be bigger than footer height*/
}
.footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
padding-top:20px;
}
Flush footer to the bottom of the page in bootstrap 4
Bootstrap has neither anyid selector nor .content-header or .content-footer.There are a couple of ways that you can achieve it. I want to show you 3 of them.
Flex - flex-grow-1
Use the
h-100class for all the parents of the#contentdiv includinghtmlandbody.Use
d-flex,flex-column, andh-100classes for the#contentdiv.- Use
flex-grow-1on themaincontent.
You should use boostrap version 4.1 or higher because the lower version does not have flex-grow-1.
See this pen. I recommend you to add and remove texts so that you see that it works.
https://codepen.io/anon/pen/bKEjLR
Flex - mt-auto
Use the
h-100class for all the parents of the#contentdiv includinghtmlandbody.Use
d-flex,flex-column, andh-100classes for the#contentdiv.- Use
mt-autofor thefooter.
html,body { height: 100%}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" /><div id="app" class="h-100"> <div id="content" class="d-flex flex-column h-100"> <nav id="content-header" class="bg-info p-5"> ...code here... </nav> <main id="content-main" class="bg-primary p-5"> ...code here... Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat hic aspernatur quibusdam alias delectus odit officiis in, est sapiente deserunt harum aliquam at mollitia deleniti labore corrupti illum recusandae dolorum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste inventore voluptatum sint mollitia unde quisquam numquam vitae? Id, quia. Cupiditate nam vero natus, facere nesciunt vel delectus assumenda eos sequi! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Non asperiores perferendis quae harum ab, dolorem dicta repudiandae quisquam repellendus eveniet, totam voluptatum, eum cum nobis? Atque alias dolores nam illum. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi odit aspernatur minima tempora! Similique consequatur distinctio odit nemo, pariatur consectetur ad ipsum provident corporis nostrum culpa cumque doloremque quo quia. </main> <div id="footer" class="bg-danger p-5 mt-auto"> ...code here... </div> </div></div>Flushing footer to bottom of the page, twitter bootstrap
Found the snippets here works really well for bootstrap
Html:
<div id="wrap">
<div id="main" class="container clear-top">
<p>Your content here</p>
</div>
</div>
<footer class="footer"></footer>
CSS:
html, body {
height: 100%;
}
#wrap {
min-height: 100%;
}
#main {
overflow:auto;
padding-bottom:150px; /* this needs to be bigger than footer height*/
}
.footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
padding-top:20px;
}
How to make footer stay on the bottom of the page bootstrap 4
You can use pure CSS, like this:
footer {
position: absolute;
bottom: 0;
width: 100%;
background-color: #333;
color:#fff;
}
Make footer stick to bottom of page using Twitter Bootstrap
As discussed in the comments you have based your code on this solution: https://stackoverflow.com/a/8825714/681807
One of the key parts of this solution is to add height: 100% to html, body so the #footer element has a base height to work from - this is missing from your code:
html,body{
height: 100%
}
You will also find that you will run into problems with using bottom: -50px as this will push your content under the fold when there isn't much content. You will have to add margin-bottom: 50px to the last element before the #footer.
Bootstrap 4 - Push footer to the bottom of page and fill height with main content
use 100vh here and if you don't want full viewpoint, you can cut navigation bar height from it so no scrollbar appers.
html { position: relative; min-height: 100%;}body { /* Margin bottom by footer height */ margin-bottom: 60px;}
.container { max-width:100%;}
.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;}
.mainClass { height: calc(100vh - 40px);}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" /><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<header> <nav style="color:white;" class="navbar navbar-dark bg-dark"> Navbar </nav></header>
<main style="background:grey;color:white;width:100%;" role="main" class="container mainClass"> <p> Pin Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin aliquam nisl, ut elementum eros volutpat ac. Aliquam erat volutpat. Fusce felis urna, cursus vel arcu vitae, egestas ornare nulla. Integer aliquam volutpat justo, vitae pharetra mi luctus ac. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam vel magna a ligula viverra posuere. Integer a augue id nunc hendrerit molestie. Morbi tempor sapien tellus, non dignissim ex dignissim sit amet. Suspendisse sed sodales mauris, et blandit mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam eu posuere elit. </p></main>
<footer class="footer"> <div class="container"> <span class="text-muted">Place sticky footer content here.</span> </div></footer>Bootstrap 4: Footer not at bottom
You can use built-in bootstrap class to achieve this.
What you need is the container to be a column flex container . class to use are : d-flex flex-column
To set the container to height:100% you can apply the class h-100to html, body and the container or add to the container style height:100vh;
For the footer, a margin-top:auto will do, the class to use is : mt-auto;
example below to run in full page mode
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<html class="h-100">
<body class="h-100">
<!-- Page Container -->
<div id="page-container" class="container-fluid pr-0 pl-0 h-100 d-flex flex-column">
<!-- Header -->
<nav class="navbar navbar-expand-lg navbar-light bg-light pt-3 pb-3 d-flex justify-content-center">
<div class="col-md-8 col-lg-8 col-sm-12 col-xs-12 d-flex justify-content-between">
<div class="d-flex justify-content-start align-items-center">
<a href="/" class="kf-links">
<span class="h5">
<i class="fas fa-paper-plane"></i>
<span class="h4 font-weight-bold kf-dark">
MyPage
</span>
</span>
</a>
</div>
<!-- Main Header Navigation -->
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a href="/" class="nav-link ">Link1</a>
</li>
<li class="nav-item">
<a href="" class="nav-link ">Link2</a>
</li>
<li class="nav-item">
<a href="" class="nav-link ">Link3</a>
</li>
</ul>
</div>
<!-- END Main Header Navigation -->
</div>
</nav>
<!-- END Header -->
<!-- Main Container -->
<div style="background:#5c90d2">
<div class="col-md-12 text-center pt-5 pb-5">
<div class="pt-5 pb-5">
<h1>
<span class="main-text">
Login
</span>
</h1>
<p class="lead"><span class="main-text">
Login Now!
</span></p>
</div>
</div>
</div>
<!-- Content -->
<div class="d-flex justify-content-center fadeIn">
<div class="col-md-8 col-xs-12">
<div class="d-flex justify-content-center">
<div class="col-md-6 pt-5 pb-5 pr-0 pl-0">
<form class="form-horizontal" method="post">
<div class="form-group">
<div class="col-xs-12">
<div class="">
<label for="id_username">E-Mail</label>
<input id="id_username" class="form-control" maxlength="254" name="username" value="" type="text" required>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<div class="">
<label for="id_password">Password</label>
<input id="id_password" class="form-control" name="password" type="password" required>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<small class="float-right">
<a href="#" class="kf-links">Forgot Password?</a>
</small>
</div>
</div>
<div class="form-group mt-5">
<div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4 pl-0">
<button class="btn btn-sm btn-block btn-primary" type="submit">Login</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- END Content -->
<!-- END Main Container -->
<!-- Footer -->
<footer class="d-flex justify-content-center mt-auto">
<div class="d-flex justify-content-between col-md-8 col-md-offset-2 mb-3 mt-5">
<!-- Copyright Info -->
<div class="align-left">
<a class="font-weight-bold small kf-blue kf-links" href="#">Link1</a> |
<a class="font-weight-bold small kf-blue kf-links" href="/">Link2</a> |
<a class="font-weight-bold small kf-blue kf-links" href="/">Link3</a>
</div>
<div class="align-right small">
Crafted with Love by <a class="font-weight-bold kf-blue kf-links" href="#" target="_blank">Me</a>
</div>
<!-- END Copyright Info -->
</div>
</footer>
<!-- END Footer -->
</div>
<!-- END Page Container -->
</body>
</html>Related Topics
What Does "I" Mean in a CSS Attribute Selector
How to Make a Div Unselectable
Css Page-Break Not Working in All Browsers
Css Grid of Squares With Flexbox
How to Reset/Remove Chrome'S Input Highlighting/Focus Border
Why Does CSS Float Not Change the Width of the Following Div
How to Use Any Other Tag Inside <Ul> Along with <Li>
How to Dynamically Add a Class to Manual Class Names
Does CSS Hover Work on Mobile Devices
Is There a Sass.Js? Something Like Less.Js
Google Chrome Extensions - Can't Load Local Images With Css
Can You Add Noise to a CSS3 Gradient