Create Bootstrap sliding tabs

Bootstrap sliding tabs

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

  1. jquery-1.11.1.min.js
  2. bootstrap.min.js
  3. bootstrap.min.css
  4. Google Fonts
<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