Bootstrap Snippet List of Items using HTML CSS Bootstrap jQuery

"List of Items"
Bootstrap 3.3.0 Snippet by jeevan123456

3.3.0 jQuery

2.7K 0 Fav

Post to Facebook Tweet this

<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>  <div class="container"> <div class="row"> <div class="col-md-12"> <div class="col-md-3"> <ul class="nav nav-pills nav-stacked">  <li class="dropdown active"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Navigation <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="https://bootsnipp.com/user/snippets/BE4xN">Top Section Kupon</a></li> <li><a href="https://bootsnipp.com/user/snippets/xrPbm">Kupon Search box style header</a></li> <li><a href="https://bootsnipp.com/user/snippets/N63X4">Animated Sidebar Nav</a></li> <li><a href="#">Submenu 1-1</a></li> <li><a href="#">Submenu 1-2</a></li> <li><a href="#">Submenu 1-3</a></li> </ul> </li>  <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Sidebar <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="https://bootsnipp.com/user/snippets/yN024">Kupon Sidebar</a></li> <li><a href="#">Submenu 1-1</a></li> <li><a href="#">Submenu 1-2</a></li> <li><a href="#">Submenu 1-3</a></li> <li><a href="#">Submenu 1-3</a></li> <li><a href="#">Submenu 1-1</a></li> <li><a href="#">Submenu 1-2</a></li> <li><a href="#">Submenu 1-3</a></li> </ul> </li>  <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Crousel <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="https://bootsnipp.com/user/snippets/0e8Wy">Slider with 2buttons</a></li> <li><a href="https://bootsnipp.com/user/snippets/4Mpm2">About us Banner</a></li> <li><a href="#">Submenu 1-3</a></li> <li><a href="#">Submenu 1-1</a></li> <li><a href="#">Submenu 1-2</a></li> <li><a href="#">Submenu 1-3</a></li> </ul> </li>  <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> About Us <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="https://bootsnipp.com/user/snippets/1BKky">Aboutus Page</a></li> <li><a href="https://bootsnipp.com/user/snippets/4n5jK">About us page</a></li> <li><a href="https://bootsnipp.com/user/snippets/l11Zj">Aboutus blue section</a></li> <li><a href="https://bootsnipp.com/user/snippets/jv61R">Faq gaa</a></li> <li><a href="https://bootsnipp.com/user/snippets/zDDny">Left image Right Benefits</a></li> <li><a href="https://bootsnipp.com/user/snippets/zDMo9">W3 About us</a></li> <li><a href="https://bootsnipp.com/user/snippets/Alr2B">Section Title</a></li> <li><a href="https://bootsnipp.com/user/snippets/lVPAa">Section Title List</a></li> <li><a href="https://bootsnipp.com/user/snippets/vlmNE">Left Image Right Text with button</a></li> <li><a href="https://bootsnipp.com/user/snippets/92Wap">Left list service right Image</a></li> <li><a href="https://bootsnipp.com/user/snippets/lVPo0">w3 About us</a></li> <li><a href="https://bootsnipp.com/user/snippets/z8y1r">About us Title with text center</a></li> <li><a href="https://bootsnipp.com/user/snippets/6XdQr">Welcome Section</a></li> <li><a href="https://bootsnipp.com/user/snippets/exWm3">Why choose us</a></li> <li><a href="https://bootsnipp.com/user/snippets/xrP8N">About us section right text listing</a></li> <li><a href="https://bootsnipp.com/user/snippets/aMW3o">w3 textin left right Image</a></li> <li><a href="https://bootsnipp.com/user/snippets/5M86M">Half box half text section</a></li> <li><a href="https://bootsnipp.com/user/snippets/Ga5nR">Construction</a></li> <li><a href="https://bootsnipp.com/user/snippets/35oWp">gaadiexper about us</a></li> <li><a href="https://bootsnipp.com/user/snippets/mMZ0O">Description Box - G</a></li> <li><a href="https://bootsnipp.com/user/snippets/M5vml">Aboutus-5050-G</a></li> <li><a href="https://bootsnipp.com/user/snippets/Wab5b">FAQ-G</a></li> <li><a href="https://bootsnipp.com/user/snippets/orZbM">About us Section-G</a></li> <li><a href="#">Submenu 1-3</a></li> <li><a href="#">Submenu 1-3</a></li> <li><a href="#">Submenu 1-3</a></li> </ul> </li>  <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Services <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="https://bootsnipp.com/user/snippets/o1PzB">2+1 Services</a></li> <li><a href="https://bootsnipp.com/user/snippets/AXXbB">Left Icons Services</a></li> <li><a href="https://bootsnipp.com/user/snippets/qrmvM">3 box colorful </a></li> <li><a href="https://bootsnipp.com/user/snippets/O5jgM">3 Boxes Fill Effect hover</a></li> <li><a href="https://bootsnipp.com/user/snippets/GaGzV">3 box Tree </a></li> <li><a href="https://bootsnipp.com/user/snippets/M5O23">Left 6 boxes green with title</a></li> <li><a href="https://bootsnipp.com/user/snippets/j6NDD">4 boxes icon on top</a></li> <li><a href="https://bootsnipp.com/user/snippets/qrmD0">Benefits violet section</a></li> <li><a href="https://bootsnipp.com/user/snippets/6X85r">Construction</a></li> <li><a href="https://bootsnipp.com/user/snippets/ZXWbE">Construction whychoose us</a></li> <li><a href="https://bootsnipp.com/user/snippets/0eKaR">4 Boxes icons with buttons-cardke</a></li> <li><a href="https://bootsnipp.com/user/snippets/5MB9a">Service Box Section</a></li> <li><a href="#">Submenu 1-2</a></li> <li><a href="#">Submenu 1-2</a></li> <li><a href="#">Submenu 1-2</a></li> <li><a href="https://bootsnipp.com/user/snippets/REE2A">all type icons</a></li> </ul> </li>  <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Team <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="https://bootsnipp.com/user/snippets/ZVkdO">3 Boxes Team</a></li> <li><a href="https://bootsnipp.com/user/snippets/2oq0r">3 Boxes with button</a></li> <li><a href="https://bootsnipp.com/user/snippets/klR4g">Team Box Section</a></li> <li><a href="#">Submenu 1-1</a></li> <li><a href="#">Submenu 1-2</a></li> <li><a href="#">Submenu 1-3</a></li> </ul> </li>  <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Call to Action <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="https://bootsnipp.com/user/snippets/Vg5xV">Kupon CTA</a></li> <li><a href="https://bootsnipp.com/user/snippets/rlyZW">Construction CTA</a></li> <li><a href="https://bootsnipp.com/user/snippets/Q04D1">Subscribe</a></li> <li><a href="https://bootsnipp.com/user/snippets/GaNBg">Subscribe Button Section</a></li> <li><a href="#">Submenu 1-2</a></li> <li><a href="https://bootsnipp.com/user/snippets/de509">Old one</a></li> </ul> </li>  <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Products <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="https://bootsnipp.com/user/snippets/oV96d">4 Boxes Store Product</a></li> <li><a href="https://bootsnipp.com/user/snippets/67nZK">3 Products</a></li> <li><a href="https://bootsnipp.com/user/snippets/WR7nX">Material Design Product</a></li> <li><a href="https://bootsnipp.com/user/snippets/REEev">4 Boxes</a></li> <li><a href="#">Submenu 1-2</a></li> <li><a href="#">Submenu 1-3</a></li> </ul> </li>  <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Blog <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="https://bootsnipp.com/user/snippets/z8y1l">4 boxes News</a></li> <li><a href="https://bootsnipp.com/user/snippets/Ga5X2">4 boxes News</a></li> <li><a href="https://bootsnipp.com/user/snippets/rlylj">Latest News 3 boxes like product</a></li> <li><a href="https://bootsnipp.com/user/snippets/358QV">News Raw to edit</a></li> <li><a href="https://bootsnipp.com/user/snippets/j6pG9">3 News Blog box</a></li> <li><a href="#">Submenu 1-3</a></li> </ul> </li>  <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Form <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="https://bootsnipp.com/user/snippets/Wajq6">Add Listing Form</a></li> <li><a href="https://bootsnipp.com/user/snippets/92Z1X">Account Details</a></li> <li><a href="https://bootsnipp.com/user/snippets/P2QWx">Browse File button</a></li> <li><a href="https://bootsnipp.com/user/snippets/lVaEq">Create Account- box highlighter</a></li> <li><a href="https://bootsnipp.com/user/snippets/rlG1d">Book Crane App</a></li> <li><a href="https://bootsnipp.com/user/snippets/Q0jZR">Contact Form</a></li> <li><a href="https://bootsnipp.com/user/snippets/4MpmB">Contact us Page</a></li> <li><a href="https://bootsnipp.com/user/snippets/4M4jQ">Contact Box Section</a></li> <li><a href="https://bootsnipp.com/user/snippets/E1v97">contact box2</a></li> <li><a href="#">Submenu 1-3</a></li> </ul> </li>  <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Listings <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="https://bootsnipp.com/user/snippets/pemXG">Real-Estate</a></li> <li><a href="https://bootsnipp.com/user/snippets/2oxy2">Product Slider</a></li> <li><a href="https://bootsnipp.com/user/snippets/K5rQV">Filter Listing</a></li> <li><a href="https://bootsnipp.com/user/snippets/qryWR">Crane List View</a></li> <li><a href="https://bootsnipp.com/user/snippets/oryKy">Paris Top Tour Listing card</a></li> <li><a href="https://bootsnipp.com/user/snippets/X2KPr">Other Tour List</a></li> <li><a href="https://bootsnipp.com/user/snippets/aMWr3">Crane Search List</a></li> <li><a href="https://bootsnipp.com/user/snippets/E1oxD">List Box one </a></li> <li><a href="https://bootsnipp.com/user/snippets/2e8vg">Crane List without sidebar</a></li> <li><a href="#">Submenu 1-3</a></li> <li><a href="#">Submenu 1-3</a></li> <li><a href="#">Submenu 1-3</a></li> <li><a href="#">Submenu 1-3</a></li> </ul> </li>  <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Footer <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Submenu 1-1</a></li> <li><a href="https://bootsnipp.com/user/snippets/BE4vz">exchange footer</a></li> <li><a href="https://bootsnipp.com/user/snippets/bxWdd">Kupon Footer</a></li> <li><a href="https://bootsnipp.com/user/snippets/BE42D">Footer old magenta</a></li> <li><a href="https://bootsnipp.com/user/snippets/Q0qdE">footer chocolate social missing</a></li> <li><a href="https://bootsnipp.com/user/snippets/92Mzx">Footer Black</a></li> <li><a href="https://bootsnipp.com/user/snippets/qr2pR">New Edu DarkGrey</a></li> <li><a href="https://bootsnipp.com/user/snippets/exX9y">New Edu-slateblue</a></li> <li><a href="https://bootsnipp.com/user/snippets/35oyB">Soil</a></li> <li><a href="https://bootsnipp.com/user/snippets/R5KM5">Green-Blue-Black</a></li> <li><a href="https://bootsnipp.com/user/snippets/aM5KR">Green-blu-black-smarthead</a></li> <li><a href="https://bootsnipp.com/user/snippets/rlPnP">Contactus-Map</a></li> <li><a href="https://bootsnipp.com/user/snippets/P25R1">Edu Blu-Red</a></li> <li><a href="https://bootsnipp.com/user/snippets/8Md7Z">Black-Yellow</a></li> <li><a href="https://bootsnipp.com/user/snippets/nNRnn">Green-Black</a></li> <li><a href="#">Submenu 1-3</a></li> </ul> </li>  <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Site <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="https://bootsnipp.com/user/snippets/jvbvX">Bricks</a></li> <li><a href="https://bootsnipp.com/user/snippets/Ez7X6">Carwash</a></li> <li><a href="https://bootsnipp.com/user/snippets/m1eKz">Assurance</a></li> <li><a href="https://bootsnipp.com/user/snippets/Wa4zr">education Incomp</a></li> <li><a href="https://bootsnipp.com/user/snippets/2e5dz">Edu Red Incomp</a></li> <li><a href="https://bootsnipp.com/user/snippets/35j6p">Apress</a></li> <li><a href="https://bootsnipp.com/user/snippets/6X8A3">Kupon</a></li> <li><a href="https://bootsnipp.com/user/snippets/X2K62">Exchange Architecture</a></li> <li><a href="https://bootsnipp.com/user/snippets/2e8zx">Crane-Kupon</a></li> <li><a href="https://bootsnipp.com/user/snippets/K0qNW">Crane About us</a></li> <li><a href="https://bootsnipp.com/user/snippets/prOvE">Crane App </a></li> <li><a href="https://bootsnipp.com/user/snippets/1eRe3">DIGITAL NAV Starter Site</a></li> <li><a href="https://bootsnipp.com/user/snippets/K0PeK">Corporate</a></li> <li><a href="https://bootsnipp.com/user/snippets/klpod">Travel</a></li> <li><a href="https://bootsnipp.com/user/snippets/nNqEz">Averon</a></li> <li><a href="https://bootsnipp.com/user/snippets/GaPxR">MyPet</a></li> <li><a href="https://bootsnipp.com/user/snippets/GaP9E">Food</a></li> <li><a href="https://bootsnipp.com/user/snippets/N63x6">DirectoryBox</a></li> <li><a href="https://bootsnipp.com/user/snippets/Wakaz">Directory Crane</a></li> <li><a href="https://bootsnipp.com/user/snippets/gN1X1">Directory Crane Card Listing</a></li> <li><a href="https://bootsnipp.com/user/snippets/qr22x">Estate</a></li> <li><a href="https://bootsnipp.com/user/snippets/5MdxB">Findeo</a></li> <li><a href="https://bootsnipp.com/user/snippets/rlP0j">Castle</a></li> <li><a href="https://bootsnipp.com/user/snippets/dl6bj">Urban</a></li> <li><a href="https://bootsnipp.com/user/snippets/qr2ZN">Land</a></li> <li><a href="https://bootsnipp.com/user/snippets/orRjB">gaadiexpe</a></li> <li><a href="https://bootsnipp.com/user/snippets/aMb20">Explore</a></li> <li><a href="#">Submenu 1-3</a></li> <li><a href="#">Submenu 1-3</a></li> <li><a href="#">Submenu 1-1</a></li> <li><a href="#">Submenu 1-2</a></li> <li><a href="#">Submenu 1-3</a></li> <li><a href="#">Submenu 1-3</a></li> <li><a href="#">Submenu 1-1</a></li> <li><a href="#">Submenu 1-2</a></li> <li><a href="#">Submenu 1-3</a></li> </ul> </li>  <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Counter <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="https://bootsnipp.com/user/snippets/ZXj3l">Counter 4 boxes</a></li> <li><a href="#">Submenu 1-3</a></li> <li><a href="#">Submenu 1-1</a></li> <li><a href="#">Submenu 1-2</a></li> <li><a href="#">Submenu 1-3</a></li> </ul> </li>  <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Special Section <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="https://bootsnipp.com/user/snippets/E1o75">Left 4 boxes</a></li> <li><a href="https://bootsnipp.com/user/snippets/5M80M">Left text right 4 boxes</a></li> <li><a href="https://bootsnipp.com/user/snippets/klpPB">RATINGS</a></li> <li><a href="https://bootsnipp.com/user/snippets/vlANB">AdBox-Header</a></li> <li><a href="https://bootsnipp.com/user/snippets/35o9z">Breadcum Bar</a></li> <li><a href="https://bootsnipp.com/user/snippets/exXqD">Pricing Page</a></li> <li><a href="#">Submenu 1-3</a></li> <li><a href="#">Submenu 1-3</a></li> <li><a href="#">Submenu 1-3</a></li> <li><a href="#">Submenu 1-3</a></li> <li><a href="#">Submenu 1-3</a></li> <li><a href="#">Submenu 1-3</a></li> </ul> </li> </ul> </div> </div> </div> </div>

/* Navigation */ .caret-up { width: 0; height: 0; border-left: 4px solid rgba(0, 0, 0, 0); border-right: 4px solid rgba(0, 0, 0, 0); border-bottom: 4px solid; display: inline-block; margin-left: 2px; vertical-align: middle; } .dropdown-menu > li > a:hover { color: #fff; text-decoration: none; background-color: #13477f ; }

$(function(){ $(".dropdown").hover( function() { $('.dropdown-menu', this).stop( true, true ).fadeIn("fast"); $(this).toggleClass('open'); $('b', this).toggleClass("caret caret-up"); }, function() { $('.dropdown-menu', this).stop( true, true ).fadeOut("fast"); $(this).toggleClass('open'); $('b', this).toggleClass("caret caret-up"); }); });

Questions / Comments:

Posting GuidelinesFormatting