<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 class="sidebar-nav"> <ul class="nav nav-list"> <li class="nav-header">Navigation</li> <li class="active"><a href="index"><i class="glyphicon glyphicon-home"></i> Dashboard</a></li> <li><a href="#"><i class="glyphicon glyphicon-edit"></i> Add Blog Post</a></li> <li><a href="#"><i class="glyphicon glyphicon-calendar"></i> Calendar</a></li> <li><a href="#"><i class="glyphicon glyphicon-user"></i> Members</a></li> <li><a href="#"><i class="glyphicon glyphicon-comment"></i> Comments</a></li> <li><a href="#"><i class="glyphicon glyphicon-picture"></i> Gallery</a></li> </ul> </div>

.sidebar-nav { padding: 10px; } .nav.nav-list a { padding: 5px 10px; } .nav-list > .active > a, .nav-list > .active > a:hover, .nav-list > .active > a:focus { background-color: #428BCA; color: #FFFFFF; } .nav-header { color: darkgrey; font-weight: bold; }