Menu
I am trying to make a sidebar using the Bootstrap Grid but I want it to stretch all the way to the bottom. Image of what I am trying to accomplish.
I don't want to ruin the responsiveness and avoid Javascript solutions if possible.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* Footer CSS */
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #3e8f3e;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-10" style="background-color: #f5e79e">
Column that does not need to stretch
</div>
<div class="col-md-2" style="background-color: #ffff00;">
Sidebar/column to stretch down to the bottom (to the footer)
</div>
</div>
</div>
<footer class="footer">
<div class="container-fluid">
<h5>Footer to reach down too</h5>
</div>
</footer>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
The code is also avaliable on jsfiddle.net which will probably be a lot easier to work with. Make sure you drag the results so that the site does not show a mobile version with columns underneath each other.
Any help is appreciated as I have been stuck on this problem for ages.
328
I have two option to go forward with:
If you like to have sidebar with grid then use .container-table within flex layout using bootstrap-essentials : jsfiddle.net/grvpanchal/1k1wdu8u
If you want to have a responsive sidebar .navmenu like use this one: jsfiddle.net/grvpanchal/g6kxjxuo
150
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
