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.
<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.
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
<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
$(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
