HTML Footer at Bottom - html

Question

I am trying to program a website with HTML. This works very well, but I want the footer to be at the bottom of the website!
footer {
background-color: #F2F2F2;
border: 1px solid #DEDCD9;
border-radius: 5px;
clear: both;
}
no error

Answer 1

Here is a 2-column layout with the footer always at the bottom, also using Bootstrap 4 grid for responsiveness:
#wrapper {
min-height: 100vh;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div id="wrapper" class="d-flex flex-column">
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Brand</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
<div class="container mt-3">
<div class="row">
<div class="col-sm-12 col-md-8 col-lg-9">
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut quas quae placeat non, eligendi odio, sit animi corporis unde fugiat ex est reprehenderit voluptas facilis quo amet nisi consequuntur perferendis.</p>
<p class="text-justify">Eius reiciendis, modi nam magni, vel et, labore sit perspiciatis obcaecati illo aspernatur laboriosam, sed veritatis nisi deleniti quae alias nesciunt. Et possimus, reprehenderit voluptatibus officiis consequatur illo architecto magnam!</p>
<p class="text-justify">Qui tempora deserunt, corrupti soluta obcaecati ab fugiat consectetur? Asperiores ullam aliquid recusandae doloribus voluptate ipsa. Reprehenderit aspernatur est dolore ipsum voluptatum doloribus atque suscipit. Quod voluptatum, facere temporibus
iure.</p>
<p class="text-justify">Ipsum quasi, iste fugit doloribus accusantium natus provident, dolorum molestiae alias. Quo earum explicabo corporis assumenda autem ratione ea corrupti tenetur, fugit esse doloremque, laborum, ab iste eum. Mollitia, consectetur!</p>
<p class="text-justify">Eligendi dolores nisi quibusdam, officia earum neque harum iure reprehenderit voluptates, veritatis quaerat deserunt ratione porro itaque rem voluptatum minima similique temporibus unde! Quaerat laborum ullam optio sequi quae quidem!</p>
</div>
<div class="col-sm-12 col-md-4 col-lg-3 mb-3">
<ul class="list-group">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul>
</div>
</div>
</div>
<div class="footer mt-auto text-center p-2 bg-light">
© Lorem ipsum dolor sit amet
</div>
</div>
Hope it helps.