Recently started using Bootstrap and decided to work with the alpha version of Bootstrap 4 to create a website for my home network.
My main concern is with the sidebar, as I want it to cover the entire left side of the page, starting just below the top navigation bar. Currently, there is a small gap of around 20 pixels between the navbar and the sidebar. Additionally, I want the sidebar to extend all the way down, regardless of the page size.
For this project, I chose to customize the admin template provided by Bootstrap to suit my needs.
Check out the JSFiddle link here.
CSS:
body, html {
height: 100%;
}
body {
padding-top: 70px;
}
/* Top Navbar */
.so-navbar-top {
background-color: #087ca7;
height: 48px;
}
.so-navbar-top .navbar-brand {
font-size: 1.5em;
}
.so-navbar-top .nav-item {
font-size: 0.75em;
}
/* Sidebar */
.so-sidebar {
background-color: #13293d;
}
/* Fix for modal-open padding issue */
body.modal-open {
padding-right: 0 !important;
}
#sidebar {
padding-left:0;
}
...
HTML
<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body>
<nav class="navbar fixed-top navbar-toggleable-sm navbar-light bg-fade mb-3 so-navbar-top">
...
</nav>
<div class="container-fluid" id="main">
...
</div>
<footer class="container-fluid">
<p class="text-right small">©2017 BrandName</p>
</footer>
</body>
</html>