<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.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 class="col-sm-3 sidebar"> <div class="bg-white shadow"> <div class="sidebar-menu"> <div class="sidebar-search-text"> <input class="form-control" placeholder="Search Cranes in India" type="text"> </div> <!-- Sidebar navigation --> <ul class="nav sidebar-nav"> <li class="dropdown"> <a class="ripple-effect dropdown-toggle" href="#" data-toggle="dropdown"> <span class="glyphicon glyphicon-user icon"></span> Travel <span class="sidebar-badge"> 12 </span> <b class="caret"> </b> </a> <ul class="dropdown-menu"> <li> <a href="#" tabindex="-1"> Europe <span class="sidebar-badge"> 12 </span> </a> </li> </ul> </li> <li> <a href="#"> <span class="glyphicon glyphicon-user icon"></span> Gifts <span class="sidebar-badge"> 3 </span> </a> </li> <li> <a href="#"> <span class="glyphicon glyphicon-user icon"></span> Products <span class="sidebar-badge"> 456 </span> </a> </li> <li> <a href="#"> <span class="glyphicon glyphicon-user icon"></span> Tickets <span class="sidebar-badge badge-circle"> 12 </span> </a> </li> <li> <a href="#"> <span class="glyphicon glyphicon-user icon"></span> Health <span class="sidebar-badge badge-circle"> 45 </span> </a> </li> <li> <a href="#"> <span class="glyphicon glyphicon-user icon"></span> Things To Do <span class="sidebar-badge badge-circle"> 117 </span> </a> </li> <li> <a href="#"> <span class="glyphicon glyphicon-user icon"></span> Fashion <span class="sidebar-badge badge-circle"> 117 </span> </a> </li> <li> <a href="#"> <span class="glyphicon glyphicon-user icon"></span> Fun Stuff <span class="sidebar-badge badge-circle"> 117 </span> </a> </li> <li> <a href="#"> <span class="glyphicon glyphicon-user icon"></span> Electronics <span class="sidebar-badge badge-circle"> 117 </span> </a> </li> </ul> <!-- Sidebar divider --> </div> <!-- /.widget --> </div> <!-- /col 4 - sidebar --> </div>

.shadow { box-shadow: 0 2px 3px -1px #DCDCDC; } .sidebar-search-text { display: block; padding: 15px 15px 20px; margin: 35px 0 5px; background-color: #fafafa; color: #000; border-bottom: 1px solid #ededed; } .sidebar-search-text input { font-size: 16px; border: none; border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; border-bottom: 2px dotted #E0E0E0; padding-bottom: 9px; box-shadow: none; } .sidebar .sidebar-nav { margin: 0; padding: 0; background: #fff; } .sidebar .sidebar-nav li { position: relative; list-style-type: none; border-bottom: 0; } .sidebar .sidebar-nav li a { position: relative; cursor: pointer; user-select: none; display: block; height: 48px; line-height: 48px; padding: 0 56px 0 16px; text-decoration: none; clear: both; font-weight: 400; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; -webkit-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; color: inherit; border-bottom: 1px solid #ededed; } .ripple-effect { position: relative; overflow: hidden; -webkit-transform: translate3d(0,0,0); } .sidebar .sidebar-nav li i { padding-right: 10px; color: #000; border-right: 1px solid #ededed; margin-right: 20px; } .sidebar-badge { position: absolute; right: 16px; top: 0; } .caret { position: absolute; right: 37px; top: 23px; } .strong, b, strong { color: #000; font-weight: 500; } .sidebar .sidebar-nav li a { position: relative; cursor: pointer; user-select: none; display: block; height: 48px; line-height: 48px; padding: 0 56px 0 16px; text-decoration: none; clear: both; font-weight: 400; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; -webkit-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; color: inherit; border-bottom: 1px solid #ededed; } .sidebar .sidebar-nav .dropdown-menu { position: relative; width: 100%; margin: 0; padding: 0; border: none; border-radius: 0; -webkit-box-shadow: none; box-shadow: none; } .sidebar .sidebar-nav li { position: relative; list-style-type: none; border-bottom: 0; } .icon { font-size :16px; padding: 25px 10 0 0; color:grey; }