<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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 ----------> <div id="wrapper"> <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="#">LOGO</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarText"> <ul class="navbar-nav side-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Side Menu Items</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> </ul> <ul class="navbar-nav justify-content-end"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Top Menu Items</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> </div> </nav> <div class="container-fluid"> <div class="row"> <div class="col"> <div class="card"> <div class="card-body"> <h5 class="card-title">Try Other</h5> <h6 class="card-subtitle mb-2 text-muted">Bootstrap 4.0.0 Snippet by pradeep330</h6> <p class="card-text">You can also try different version of Bootstrap V4 side menu. Click below link to view all Bootstrap Menu versions.</p> <a href="https://bootsnipp.com/pradeep330" class="card-link">link</a> <a href="http://websitedesigntamilnadu.com" class="card-link">Another link</a> </div> </div> </div> <div class="col"> <div class="card"> <div class="card-body"> <h5 class="card-title">Try Other</h5> <h6 class="card-subtitle mb-2 text-muted">Bootstrap 4.0.0 Snippet by pradeep330</h6> <p class="card-text">You can also try different version of Bootstrap V4 side menu. Click below link to view all Bootstrap Menu versions.</p> <a href="https://bootsnipp.com/pradeep330" class="card-link">link</a> <a href="http://websitedesigntamilnadu.com" class="card-link">Another link</a> </div> </div> </div> <div class="col"> <div class="card"> <div class="card-body"> <h5 class="card-title">Try Other</h5> <h6 class="card-subtitle mb-2 text-muted">Bootstrap 4.0.0 Snippet by pradeep330</h6> <p class="card-text">You can also try different version of Bootstrap V4 side menu. Click below link to view all Bootstrap Menu versions.</p> <a href="https://bootsnipp.com/pradeep330" class="card-link">link</a> <a href="http://websitedesigntamilnadu.com" class="card-link">Another link</a> </div> </div> </div> <div class="col"> <div class="card"> <div class="card-body"> <h5 class="card-title">Try Other</h5> <h6 class="card-subtitle mb-2 text-muted">Bootstrap 4.0.0 Snippet by pradeep330</h6> <p class="card-text">You can also try different version of Bootstrap V4 side menu. Click below link to view all Bootstrap Menu versions.</p> <a href="https://bootsnipp.com/pradeep330" class="card-link">link</a> <a href="http://websitedesigntamilnadu.com" class="card-link">Another link</a> </div> </div> </div> <div class="col"> <div class="card"> <div class="card-body"> <h5 class="card-title">Try Other</h5> <h6 class="card-subtitle mb-2 text-muted">Bootstrap 4.0.0 Snippet by pradeep330</h6> <p class="card-text">You can also try different version of Bootstrap V4 side menu. Click below link to view all Bootstrap Menu versions.</p> <a href="https://bootsnipp.com/pradeep330" class="card-link">link</a> <a href="http://websitedesigntamilnadu.com" class="card-link">Another link</a> </div> </div> </div> </div> <div class="row"> <div class="col"> <div class="card"> <div class="card-body"> <h5 class="card-title">Try Other</h5> <h6 class="card-subtitle mb-2 text-muted">Bootstrap 4.0.0 Snippet by pradeep330</h6> <p class="card-text">You can also try different version of Bootstrap V4 side menu. Click below link to view all Bootstrap Menu versions.</p> <a href="https://bootsnipp.com/pradeep330" class="card-link">link</a> <a href="http://websitedesigntamilnadu.com" class="card-link">Another link</a> </div> </div> </div> </div> <div class="row"> <div class="col"> <div class="card"> <div class="card-body"> <h5 class="card-title">Card title</h5> <table class="table"> <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> </div> </div> </div> </div> </div> </div>

body{background:#fff;} #wrapper{padding:90px 15px;} .navbar-expand-lg .navbar-nav.side-nav{flex-direction: column;} @media(min-width:992px) { #wrapper{margin-left: 200px;padding: 70px 15px 15px;} .navbar-nav.side-nav{background: #585f66;position:fixed;top:56px;flex-direction: column;left:0;width:200px;overflow-y:auto;bottom:0;overflow-x:hidden;padding-bottom:40px} }