New to bootstrap and using the alpha version of bootstrap 4 to create a site for my home network.
I’d like the sidebar to fill the entire left side of the page, starting below the top nav bar. Right now there is a small 20 or so pixel gap between the top navbar and sidebar. I’d also like it to continue all the way down, despite the size of the page.
I’m using the admin template from bootstrap and modified it to my needs.
https://jsfiddle.net/ced6ee78/
CSS:
body, html {
height: 100%;
}
body {
padding-top: 70px;
}
/* BrandName 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;
}
/* BrandName Sidebar */
.so-sidebar {
background-color: #13293d;
}
/* workaround modal-open padding issue */
body.modal-open {
padding-right: 0 !important;
}
#sidebar {
padding-left:0;
}
/*
* Off Canvas at medium breakpoint
* --------------------------------------------------
*/
@media screen and (max-width: 48em) {
.row-offcanvas {
position: relative;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.row-offcanvas-left
.sidebar-offcanvas {
left: -33%;
}
.row-offcanvas-left.active {
left: 33%;
margin-left: -6px;
}
.sidebar-offcanvas {
position: absolute;
top: 0;
width: 33%;
height: 100%;
}
}
/*
* Off Canvas wider at sm breakpoint
* --------------------------------------------------
*/
@media screen and (max-width: 34em) {
.row-offcanvas-left
.sidebar-offcanvas {
left: -45%;
}
.row-offcanvas-left.active {
left: 45%;
margin-left: -6px;
}
.sidebar-offcanvas {
width: 45%;
}
}
.card {
overflow:hidden;
}
.card-block .rotate {
z-index: 8;
float: right;
height: 100%;
}
.card-block .rotate i {
color: rgba(20, 20, 20, 0.15);
position: absolute;
left: 0;
left: auto;
right: -10px;
bottom: 0;
display: block;
-webkit-transform: rotate(-44deg);
-moz-transform: rotate(-44deg);
-o-transform: rotate(-44deg);
-ms-transform: rotate(-44deg);
transform: rotate(-44deg);
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="assets/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/brandname/css/style.css" rel="stylesheet">
<script src="assets/jquery/jquery.min.js"></script>
<script src="assets/jquery-ui/jquery-ui.min.js"></script>
<title>Dashboard | BrandName</title>
</head>
<body>
<nav class="navbar fixed-top navbar-toggleable-sm navbar-light bg-fade mb-3 so-navbar-top">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="flex-row d-flex">
<a class="navbar-brand mb-1" href="#" title="ServiceOps">BrandName</a>
<button type="button" class="hidden-md-up navbar-toggler" data-toggle="offcanvas" title="Toggle responsive left sidebar">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="collapsingNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa fa-bell-o"></i><span class="badge badge-pill badge-danger">1</span> Alerts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa fa-cog"></i> Settings
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa fa-user"></i> Profile
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa fa-sign-out"></i> Logout
</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid" id="main">
<div class="row row-offcanvas row-offcanvas-left">
<div class="col-md-3 col-lg-2 sidebar-offcanvas so-sidebar" id="sidebar" role="navigation">
<ul class="nav flex-column pl-1">
<li class="nav-item"><a class="nav-link" href="#">Dashboard</a></li>
<li class="nav-item">
<a class="nav-link" href="#submenu1" data-toggle="collapse" data-target="#submenu1">Sites</a>
<ul class="list-unstyled flex-column pl-3 collapse" id="submenu1" aria-expanded="false">
<li class="nav-item"><a class="nav-link" href="">Item 1</a></li>
<li class="nav-item"><a class="nav-link" href="">Item 2</a></li>
</ul>
</li>
</ul>
</div>
<div class="col-md-9 col-lg-10 main">
<!--toggle sidebar button
<p class="hidden-md-up">
<button type="button" class="btn btn-primary-outline btn-sm" data-toggle="offcanvas"><i class="fa fa-chevron-left"></i> Menu</button>
</p>-->
<h1 class="display-2 hidden-xs-down">Dashboard</h1>
<div class="row mb-3">
<div class="col-xl-3 col-lg-6">
<div class="card card-inverse card-success">
<div class="card-block bg-success">
<div class="rotate">
<i class="fa fa-user fa-5x"></i>
</div>
<h6 class="text-uppercase">Users</h6>
<h1 class="display-1">134</h1>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-6">
<div class="card card-inverse card-danger">
<div class="card-block bg-danger">
<div class="rotate">
<i class="fa fa-list fa-4x"></i>
</div>
<h6 class="text-uppercase">Posts</h6>
<h1 class="display-1">87</h1>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-6">
<div class="card card-inverse card-info">
<div class="card-block bg-info">
<div class="rotate">
<i class="fa fa-twitter fa-5x"></i>
</div>
<h6 class="text-uppercase">Tweets</h6>
<h1 class="display-1">125</h1>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-6">
<div class="card card-inverse card-warning">
<div class="card-block bg-warning">
<div class="rotate">
<i class="fa fa-share fa-5x"></i>
</div>
<h6 class="text-uppercase">Shares</h6>
<h1 class="display-1">36</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="container-fluid">
<p class="text-right small">©2017 BrandName</p>
</footer>
</body>
</html>
2
Answers
padding-top
onbody
should be the same height as your navbar.In this case:
If you need more spacing for the content in the left nav and main content area, add padding/margin to
.so-sidebar
and.main
.padding-top: 70px;
on the body, which causes everything besides for the fixed header to be70px
from the top of the page.You need this rule to prevent all other elements from starting behind your fixed header, however, to prevent any gap, give it the exact height of your header.
100vh
minus the body’s padding (header’s height)You can do that with CSS3’s
calc()
:With this layout, you can put the footer together with the rest of the app to prevent it from appearing below the sidebar.
Here’s a jsFiddle.
The other option would be adding
position: fixed
to the sidebar, and adding padding/margins so the rest of the elements don’t overlap.