<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- https://codepen.io/mikeair/pen/Kfyin --> <div class="container"> <div class="row"> <div class="col-sm-3"> <div class="sidebar-nav"> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <span class="visible-xs navbar-brand">Sidebar menu</span> </div> <div class="navbar-collapse collapse sidebar-navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Menu Item 1</a></li> <li><a href="#">Menu Item 2</a></li> <li><a href="#">Menu Item 3</a></li> <li><a href="#">Menu Item 4</a></li> <li><a href="#">Reviews <span class="badge">1,118</span></a></li> </ul> </div><!--/.nav-collapse --> </div> </div> </div> <div class="col-sm-9"> Main content goes here </div> </div> </div>

/* make sidebar nav vertical */ @media (min-width: 768px) { .sidebar-nav .navbar .navbar-collapse { padding: 0; max-height: none; } .sidebar-nav .navbar ul { float: none; display: block; } .sidebar-nav .navbar li { float: none; display: block; } .sidebar-nav .navbar li a { padding-top: 12px; padding-bottom: 12px; } }