Bootstrap Vertical Navbar – Bootstrap Sidebar NAV

Learn how to make Bootstrap vertical navbar with twitter bootstrap. Full height fixed responsive sidebar with little CSS. Bootstrap sidebar navigation nav with example and explanation of every code.

Searching for Bootstrap 100% height with navbar make your parent elements  height 100% in HTML. As HTML and Body tag height increases as per content height. Bootstrap framework provides divides page in column (becomes responsive on media devices).  Bootstrap full height Sidebar is easy, make your element fixed position and make height 100% for full height. Below the CSS/HTML to copy and paste then your bootstrap vertical navbar sidebar is ready.

we define similar Bootstrap technique in Independent Column Scrolling. To make Bootstrap vertical Sidebar, assign position fixed.


Bootstrap Vertical Navbar Sidebar:

We use columns for the responsive width. We setup a live preview of Bootstrap vertical navbar here Bootstrap Sidebar.

  • Give body, HTML and outer containers 100% height.
  • Make div with a class “col-md-3”, and set a class “sidebar” as well.
  • Make another div with class col-md-9 and margin class “col-md-offset-3” , as well as content class.
  • Add some CSS written below to make it full height navbar.

HTML for Vertical Navbar:

 <div class="container-fluid">
  <div class="row">
   <div class="col-md-3 sidebar">Sidebar</div>
   <div class="col-md-9 col-md-offset-3 content">Main Content</div>
  </div>
 </div>

CSS for Bootstrap Vertical Navbar:

html, body,  .container-fluid,  .row {
 height: 100%;
}

.sidebar {
 background-color: #CCCCCC;
}
@media (min-width: 992px) {
.sidebar {
 position: fixed;
 top: 0;
 left: 0;
 bottom: 0;
 z-index: 1000;
 display: block;
 background-color: #CCCCCC;
}
}
  1. In above CSS ” HTML and body ” has 100%. Read also how to Define 100% Height to a Div.
  2. For the vertical navbar, Media query has been define with a break-point of 992px.
  3. Fixed position property assigned to sidebar.

Creative people think ideas for full height navbar . As observed many of them tried bootstrap techniques to setup bootstrap vertical sidebar. We need you to share your ideas regarding navbar techniques of bootstrap.

Leave a Reply

Your email address will not be published. Required fields are marked *