"3. Sidebar "
Bootstrap 3.3.0 Snippet by jeevan123456

<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="sidebar-area"> <div class="container"> <div class="row"> <div class="col-md-3"> <h4>All Industries Solutions</h4> <div class="sidebar-box"> <ul class="list-links"> <a href="#"><li>Agriculture</li></a> <a href="#"><li>Astrology</li></a> <a href="#"><li>Animals & Pets</li></a> <a href="#"><li>ARCHITECTURE</li></a> <a href="#"><li>ART & PHOTOGRAPHY</li></a> <a href="#"><li>AUCTION TEMPLATES</li></a> <a href="#"><li>BEAUTY</li></a> <a href="#"><li>BOOKS</li></a> <a href="#"><li>BUSINESS</li></a> <a href="#"><li>CAFE AND RESTAURANT</li></a> <a href="#"><li>CARS</li></a> <a href="#"><li>CHARITY</li></a> <a href="#"><li>CHRISTMAS TEMPLATES</li></a> <a href="#"><li>COMMUNICATIONS</li></a> <a href="#"><li>COMPUTERS</li></a> <a href="#"><li>DATING</li></a> <a href="#"><li>EDUCATION</li></a> <a href="#"><li>ELECTRONICS</li></a> <a href="#"><li>ENTERTAINMENT</li></a> <a href="#"><li>EXTERIOR DESIGN</li></a> <a href="#"><li>FAMILY</li></a> <a href="#"><li>FASHION</li></a> <a href="#"><li>FOOD & DRINK</li></a> <a href="#"><li>GAMES</li></a> <a href="#"><li>GIFTS</li></a> <a href="#"><li>HOBBIES & CRAFTS</li></a> <a href="#"><li>HOSTING</li></a> <a href="#"><li>HOTELS</li></a> <a href="#"><li>INDUSTRIAL</li></a> <a href="#"><li>INTERIOR & FURNITURE</li></a> <a href="#"><li>INTERNET</li></a> <a href="#"><li>JEWELRY</li></a> <a href="#"><li>LAST ADDED</li></a> <a href="#"><li>LAW</li></a> <a href="#"><li>MAINTENANCE SERVICES</li></a> <a href="#"><li>MEDIA</li></a> <a href="#"><li>MEDICAL</li></a> <a href="#"><li>MILITARY</li></a> <a href="#"><li>MOST POPULAR</li></a> <a href="#"><li>MUSIC</li></a> <a href="#"><li>NIGHT CLUB</li></a> <a href="#"><li>ONLINE CASINO</li></a> <a href="#"><li>PERSONAL PAGES</li></a> <a href="#"><li>POLITICS</li></a> <a href="#"><li>REAL ESTATE</li></a> <a href="#"><li>RELIGIOUS</li></a> <a href="#"><li>SCIENCE</li></a> <a href="#"><li>SECURITY</li></a> <a href="#"><li>SOCIETY & CULTURE</li></a> <a href="#"><li>SOFTWARE</li></a> <a href="#"><li>SPORT</li></a> <a href="#"><li>TRANSPORTATION</li></a> <a href="#"><li>TRAVEL</li></a> <a href="#"><li>WEB DESIGN</li></a> <a href="#"><li>WEDDING</li></a> </ul> </div> </div> </div> </div> </div>
.list-links li { border-top: 1px dotted #d4d4d4; padding: 4px 10px 4px; border-bottom: 1px dotted #d4d4d4; list-style:none; margin: 0px; } .sidebar-box {background:#fff; box-shadow: 0px 0px .5px 0px rgba(50, 50, 50, 0.95);} .sidebar-box ul {margin:0px; padding:0px;} .sidebar-box ul a {text-transform:lowercase;font-size:14px; letter-spacing:0px; color:#000;} .sidebar-box li:hover {color:#fff;background:#dd0000; box-shadow: 0px 0px .5px 0px rgba(50, 50, 50, 0.95); } .sidebar-box ul a:hover {list-style:none;text-decoration: none;}

Related: See More


Questions / Comments: