"index3 BS4"
Bootstrap 3.3.0 Snippet by jeevan123456

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> <!------ Include the above in your HEAD tag ----------> <div class="container"> <ul class="nav nav-pills nav-stacked col-md-2"> <li class="active "><a href="#tab_a" data-toggle="pill">Navigation</a></li> <li><a href="#tab_b" data-toggle="pill">Sidebar</a></li> <li><a href="#tab_c" data-toggle="pill">Crousel </a></li> <li><a href="#tab_d" data-toggle="pill">About Us </a></li> <li><a href="#tab_e" data-toggle="pill">Services </a></li> <li><a href="#tab_f" data-toggle="pill">Team </a></li> <li><a href="#tab_g" data-toggle="pill">Call of Action </a></li> <li><a href="#tab_h" data-toggle="pill">Products </a></li> <li><a href="#tab_i" data-toggle="pill">Blog </a></li> <li><a href="#tab_j" data-toggle="pill">Form </a></li> <li><a href="#tab_k" data-toggle="pill">Listings </a></li> <li><a href="#tab_l" data-toggle="pill">Footer </a></li> <li><a href="#tab_m" data-toggle="pill">Site </a></li> <li><a href="#tab_n" data-toggle="pill">Ratings </a></li> <li><a href="#tab_o" data-toggle="pill">Testimonial </a></li> <li><a href="#tab_p" data-toggle="pill">Breadcrum </a></li> <li><a href="#tab_q" data-toggle="pill">Icons </a></li> <li><a href="#tab_r" data-toggle="pill">Counter </a></li> <li><a href="#tab_s" data-toggle="pill">Special Section </a></li> </ul> <div class="tab-content col-md-10 line-h"> <!-- NAVIGATION----------------------- --> <div class="tab-pane active" id="tab_a"> <h4>Navigation</h4> <hr> <ul> <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="https://bootsnipp.com/user/snippets/M5vyX">atolye.com</a></li> <li><a href="https://bootsnipp.com/user/snippets/nNEVa">Blue-White</a></li> <li><a href="https://bootsnipp.com/user/snippets/P21ax">white-green with slider</a></li> <li><a href="https://bootsnipp.com/user/snippets/z8qQ8">Gray-White</a></li> <li><a href="https://bootsnipp.com/user/snippets/GaW6l">Red-White</a></li> <li><a href="https://bootsnipp.com/user/snippets/5Mb98">Green-white</a></li> <li><a href="https://bootsnipp.com/user/snippets/qrdWz">Darkgrey Green</a></li> <li><a href="https://bootsnipp.com/user/snippets/kldbR">Green White</a></li> <li><a href="https://bootsnipp.com/user/snippets/z8qQd">Orange-White</a></li> <li><a href="https://bootsnipp.com/user/snippets/GaW60">DarkGray-Red</a></li> <li><a href="https://bootsnipp.com/user/snippets/Q0rWr">Yellow-Black</a></li> <li><a href="https://bootsnipp.com/user/snippets/K0D7V">TopHead-Navigation</a></li> <li><a href="https://bootsnipp.com/user/snippets/xrdxN">Nav with Slider</a></li> <li><a href="#">Submenu 1-3</a></li> <li><a href="#">Submenu 1-3</a></li> </ul> </div> <!-- SIDEBAR----------------------- --> <div class="tab-pane" id="tab_b"> <h4>Sidebar </h4> <hr> <ul> <li><a href="https://bootsnipp.com/user/snippets/yN024">Kupon Sidebar</a></li> <li><a href="https://bootsnipp.com/user/snippets/7n318">Blue Sidebar Design</a></li> <li><a href="https://bootsnipp.com/user/snippets/gNy40">Hover Gray Sidebar -G</a></li> <li><a href="https://bootsnipp.com/user/snippets/O5vD8">Crousel Text Button Slide</a></li> <li><a href="https://bootsnipp.com/user/snippets/35poo">Carousel - Left- Long</a></li> <li><a href="https://bootsnipp.com/user/snippets/92NPj">Carousel -Left-with Image</a></li> <li><a href="https://bootsnipp.com/user/snippets/lVd52">Carousel - Center</a></li> <li><a href="https://bootsnipp.com/user/snippets/N6Wox">Carousel -Right-with Image</a></li> <li><a href="https://bootsnipp.com/user/snippets/Q0Gg1">Sidebar with Product Page</a></li> <li><a href="https://bootsnipp.com/user/snippets/Vg3vB">Sidebar with Aboutus page- G</a></li> <li><a href="#">Submenu 1-3</a></li> <li><a href="#">Submenu 1-3</a></li> </ul> </div> <!-- CROUSEL----------------------- --> <div class="tab-pane" id="tab_c"> <h4>Crousel</h4> <hr> <ul > <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="https://bootsnipp.com/user/snippets/qrZmM">Banner About-Us</a></li> <li><a href="https://bootsnipp.com/user/snippets/N6Wox">Right with Image</a></li> <li><a href="https://bootsnipp.com/user/snippets/lVd52">Center</a></li> <li><a href="https://bootsnipp.com/user/snippets/92NPj">Left with Image</a></li> <li><a href="https://bootsnipp.com/user/snippets/35poo">Left- Longs</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> <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> </div> <!-- ABOUT US----------------------- --> <div class="tab-pane" id="tab_d"> <h4>About Us </h4> <hr> <ul> <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="https://bootsnipp.com/user/snippets/7n3aK">About us Page</a></li> <li><a href="https://bootsnipp.com/user/snippets/E1vZP">Network</a></li> <li><a href="https://bootsnipp.com/user/snippets/0e21A">About us- STARTER- Google</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> <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> </div> <!-- SERVICES----------------------- --> <div class="tab-pane" id="tab_e"> <h4>Services </h4> <hr> <ul> <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="https://bootsnipp.com/user/snippets/prdEg">SERVICES STARTER* RAW</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> </div> <!-- TEAM----------------------- --> <div class="tab-pane" id="tab_f"> <h4>Team </h4> <hr> <ul> <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="https://bootsnipp.com/user/snippets/rld7z">Team-Section 3 boxes</a></li> <li><a href="#">Submenu 1-2</a></li> <li><a href="#">Submenu 1-3</a></li> </ul> </div> <!-- CALL TO ACTION----------------------- --> <div class="tab-pane" id="tab_g"> <h4>Call to Action </h4> <hr> <ul> <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="https://bootsnipp.com/fullscreen/D0nNq">Call to Action</a></li> <li><a href="https://bootsnipp.com/user/snippets/de509">Old one</a></li> </ul> </div> <!-- PRODUCTS----------------------- --> <div class="tab-pane" id="tab_h"> <h4>Products </h4> <hr> <ul> <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> </div> <!-- BLOG----------------------- --> <div class="tab-pane" id="tab_i"> <h4>Blog </h4> <hr> <ul> <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> </div> <!-- FORM----------------------- --> <div class="tab-pane" id="tab_j"> <h4>Form </h4> <hr> <ul > <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> </div> <!-- LISTINGS----------------------- --> <div class="tab-pane" id="tab_k"> <h4>Listings </h4> <hr> <ul> <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> </div> <!-- FOOTER----------------------- --> <div class="tab-pane" id="tab_l"> <h4>Footer </h4> <hr> <ul> <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> </div> <!-- SITE----------------------- --> <div class="tab-pane" id="tab_m"> <h4>Site </h4> <hr> <ul> <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="https://bootsnipp.com/user/snippets/dlbGN">Keeway</a></li> <li><a href="https://bootsnipp.com/user/snippets/1ezAr">Production</a></li> <li><a href="https://bootsnipp.com/user/snippets/dl45N">Inrix.com</a></li> <li><a href="https://bootsnipp.com/user/snippets/4MP92">Travel-G</a></li> <li><a href="https://bootsnipp.com/user/snippets/P21x5">Siksha</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> </div> <!-- RATINGS----------------------- --> <div class="tab-pane" id="tab_n"> <h4>Ratings </h4> <hr> </div> <!-- TESTIMONIALS----------------------- --> <div class="tab-pane" id="tab_o"> <h4>Testimonials </h4> <hr> </div> <!-- BREADCRUM----------------------- --> <div class="tab-pane" id="tab_p"> <h4>Breadcrums </h4> <hr> </div> <!-- ICONS----------------------- --> <div class="tab-pane" id="tab_q"> <h4>Icons </h4> <hr> </div> <!-- COUNTER----------------------- --> <div class="tab-pane" id="tab_r"> <h4>Counter </h4> <hr> <ul> <li><a href="https://bootsnipp.com/user/snippets/ZXj3l">Counter 4 boxes</a></li> <li><a href="https://bootsnipp.com/user/snippets/qrdXM">Right Border Counter</a></li> <li><a href="https://bootsnipp.com/user/snippets/8M2GQ">Raw-Starter-Counter Box -build-</a></li> <li><a href="#">Submenu 1-2</a></li> <li><a href="#">Submenu 1-3</a></li> </ul> </div> <!-- SPECIAL----------------------- --> <div class="tab-pane" id="tab_s"> <h4>Special </h4> <ul > <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="https://bootsnipp.com/user/snippets/O5WoM">Brands Icons</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> <hr> </div> </div><!-- tab content --> </div>

Related: See More

BLK• Design System

Questions / Comments: