<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 panel panel-default"> <div class="panel-heading">Admin Menu</div> <div class="list-group"> <a href="#" class="list-group-item"><i class="glyphicon glyphicon-home"></i> Dashboard</a> <a href="#" class="list-group-item active"><i class="glyphicon glyphicon-envelope"></i> Messages <i class="badge badge-info">4</i></a> <a href="#" class="list-group-item"><i class="glyphicon glyphicon-comment"></i> Comments <i class="badge badge-info">10</i></a> <a href="#" class="list-group-item"><i class="glyphicon glyphicon-user"></i> Members</a> <div class="divider"></div> <a href="#" class="list-group-item"><i class="glyphicon glyphicon-comment"></i> Settings</a> <a href="#" class="list-group-item"><i class="glyphicon glyphicon-share"></i> Logout</a> </div> </div> </div>

.sidebar-nav { background: #f5f5f5; border-color: #428bca; width: 300px; margin: 10px; } .sidebar-nav > .panel-heading { background: #428bca; color: #ffffff; border-bottom: 0; } .sidebar-nav a { background: #f5f5f5; color: #428bca; } .sidebar-nav a:hover, .sidebar-nav a:focus { color: #ffffff; background: #428bca; } .sidebar-nav a:hover .badge, .sidebar-nav a:focus .badge { color: #428bca; background: #ffffff; } .sidebar-nav a .badge { background-color: #428bca; } .sidebar-nav > .list-group .list-group-item { border: 0; } .sidebar-nav .divider { background-color: #428bca; height: 1px; margin: 1px 0 0; overflow: hidden; }