What is Bootstrap sliding tabs?
Bootstrap Sliding Tabs are used to display the content into different panels where each panel is viewable one at a time.
In this tutorial, you will learn how to create Bootstrap Sliding Tabs using Jquery, HTML and CSS.
Creating the HTML Code
Create an index.html file in your project. So import this code in the index.html file to create the structure of the Bootstrap Sliding Tabs.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 |
<section class=”testimonial py-2″ style=”border-bottom: 1px solid #e6e1e1;”> <div class=”container”> <div class=”row”> <div class=”col-md-9 py-3 shadow-sm”> <img src=”https://htmlcss3tutorials.com/wp-content/themes/htmlcss/images/logo.png” alt=”HTML CSS3 Tutorials” /> </div> <div class=”col-md-3 py-3 shadow-sm”> <a href=”https://htmlcss3tutorials.com/pretty-photo-gallery-free-download/” class=”btn btn-primary”>Back to Tutorial</a> </div> </div> </div> </section> <section class=”testimonial py-3″ id=”testimonial”> <div class=”container”> <div id=”carouselArea” class=”carousel slide” data-ride=”carousel” data-interval=”3000″> <!– Wrapper for slides –> <div class=”carousel-inner”> <div class=”item active”> <div class=”container”> <div class=”row”> <div class=”col-md-5″><img src=”images/thumbnails/1.jpg” class=”img-responsive”></div> <div class=”col-md-7″> <h2>Slide 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, labore, magni illum nemo ipsum quod voluptates ab natus nulla possimus incidunt aut neque quaerat mollitia perspiciatis assumenda asperiores consequatur soluta.</p> <div><button class=”btn btn-danger”>Read More</button></div> </div> </div> </div> </div> <div class=”item”> <div class=”container-fluid”> <div class=”row”> <div class=”col-md-5″><img src=”images/thumbnails/2.jpg” class=”img-responsive”></div> <div class=”col-md-7″> <h2>Slide 2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, labore, magni illum nemo ipsum quod voluptates ab natus nulla possimus incidunt aut neque quaerat mollitia perspiciatis assumenda asperiores consequatur soluta.</p> <div><button class=”btn btn-danger”>Read More</button></div> </div> </div> </div> </div> <div class=”item”> <div class=”container-fluid”> <div class=”row”> <div class=”col-md-5″><img src=”images/thumbnails/3.jpg” class=”img-responsive”></div> <div class=”col-md-7″> <h2>Slide 3</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, labore, magni illum nemo ipsum quod voluptates ab natus nulla possimus incidunt aut neque quaerat mollitia perspiciatis assumenda asperiores consequatur soluta.</p> <div><button class=”btn btn-danger”>Read More</button></div> </div> </div> </div> </div> <div class=”item”> <div class=”container-fluid”> <div class=”row”> <div class=”col-md-5″><img src=”images/thumbnails/4.jpg” class=”img-responsive”></div> <div class=”col-md-7″> <h2>Slide 4</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, labore, magni illum nemo ipsum quod voluptates ab natus nulla possimus incidunt aut neque quaerat mollitia perspiciatis assumenda asperiores consequatur soluta.</p> <div><button class=”btn btn-danger”>Read More</button></div> </div> </div> </div> </div> <!– End Item –> <div class=”item”> <div class=”container-fluid”> <div class=”row”> <div class=”col-md-5″><img src=”images/thumbnails/5.jpg” class=”img-responsive”></div> <div class=”col-md-7″> <h2>Slide 5</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, labore, magni illum nemo ipsum quod voluptates ab natus nulla possimus incidunt aut neque quaerat mollitia perspiciatis assumenda asperiores consequatur soluta.</p> <div><button class=”btn btn-danger”>Read More</button></div> </div> </div> </div> </div> <!– End Item –> </div> <!– End Carousel Inner –> <div class=”navigation”> <ul class=”nav”> <li data-target=”#carouselArea” data-slide-to=”0″ class=”active”> <a href=”#”><img src=”images/thumbnails/Thumb-1.jpg”></a> </li> <li data-target=”#carouselArea” data-slide-to=”1″> <a href=”#”><img src=”images/thumbnails/Thumb-2.jpg”></a> </li> <li data-target=”#carouselArea” data-slide-to=”2″> <a href=”#”><img src=”images/thumbnails/Thumb-3.jpg”></a> </li> <li data-target=”#carouselArea” data-slide-to=”3″> <a href=”#”><img src=”images/thumbnails/Thumb-4.jpg”></a> </li> <li data-target=”#carouselArea” data-slide-to=”4″> <a href=”#”><img src=”images/thumbnails/Thumb-5.jpg”></a> </li> </ul> </div> </div> </section> <section class=”testimonial py-2″ style=”border-top: 1px solid #e6e1e1;”> <div class=”container”> <div class=”row”> <div class=”col-md-9 py-3 shadow-sm”> </div> <div class=”col-md-3 py-3 shadow-sm”> </div> </div> </div> </section> |
Create a style.css
Using this file we will style our Bootstrap Sliding Tabs. So just import the below CSS code in the style.css file or you can simply add on the header section in the index.html file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
body { font-family: 'Roboto', sans-serif; } #carouselArea .item { border: 1px solid #ccc; color:#000; background-color:#fff; padding:20px 0; } #carouselArea .navigation{ overflow-x: hidden; overflow-y: hidden; padding:0; margin:0; white-space: nowrap; text-align: center; position: relative; background:#fff; border: 1px solid #ccc; border-top: 0px; } #carouselArea .navigation li { display: table-cell; width: 1%; max-width:90px } #carouselArea .navigation li.active { border-top:3px solid #000; border-bottom:3px solid #000; } #carouselArea .navigation a small { overflow:hidden; display:block; font-size:10px; margin-top:5px; font-weight:bold } .img-responsive{ border: 1px solid #ccc; padding: 10px; } .nav>li>a { padding: 0px 0px!important; } .py-3 { margin-top: 20px; } #testimonial { margin-top: 20px; margin-bottom: 20px; } |
Bootstrap Library
|
1 2 3 4 5 |
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"> <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> |
Creating the Javascript for Bootstrap Sliding Tabs Controls
|
1 2 3 4 5 6 |
$(document).ready(function(ev){ $('#carouselArea').on('slide.bs.carousel', function (evt) { $('#carouselArea .navigation li.active').removeClass('active'); $('#carouselArea .navigation li:eq('+$(evt.relatedTarget).index()+')').addClass('active'); }) }); |
Conclusion
We hope Bootstrap Sliding Tabs Using Jquery is quite a simple tutorial. Open the index.html file and see the end result. If in case you have any query then comment us within the comment section.
Bootstrap Sliding Tabs full source code
Share this:
Related Post
