Support us .Net Basics C# SQL ASP.NET Aarvi MVC Slides C# Programs Subscribe Download

Bootstrap tabs plugin

Suggested Video Tutorials
Part 39 - Bootstrap accordion with arrows
Part 40 - Bootstrap modal popup
Part 41 - Bootstrap modal methods and events

In this video we will discuss the Bootstrap tabs plugin.

The following example creates 3 tabs (Home, Contact & Locations). Locations dropdown contain 2 more tabs (India and USA)
bootstrap tabs example

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap tutorial for begineers</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <br />
    <div class="container">
        <div class="row">
            <div class="col-xs-6">

                <ul class="nav nav-tabs">
                    <li class="active">
                        <a href="#homeTab" data-toggle="tab">Home</a>
                        <a href="#contactTab" data-toggle="tab">Contact</a>
                    <li class="dropdown">
                        <a href="#" data-toggle="dropdown" class="dropdown-toggle">
                            Locations <b class="caret"></b>
                        <ul class="dropdown-menu">
                            <li><a href="#indiaTab" data-toggle="tab">India</a></li>
                            <li><a href="#usaTab" data-toggle="tab">USA</a></li>
                <div class="tab-content">
                    <div id="homeTab" class="tab-pane active">
                        <p>Home page content</p>
                    <div id="contactTab" class="tab-pane">
                        <p>Contact page content</p>
                    <div id="indiaTab" class="tab-pane">
                        <p>India Location Details</p>
                    <div id="usaTab" class="tab-pane">
                        <p>USA Location Details</p>


    <script src="">
    <script src="bootstrap/js/bootstrap.min.js"></script>

Classes that are useful for customizing the behaviour of the tabs plugin
Class Description
fade Animates the tabs to fade in. The first tab pane must also have in class to make the initial content visible
nav-justified To make the tabs plugin span the entire width of the parent container

bootstrap tutorial for beginners


  1. i want to raise c# event "call method" when i click on specific tab

  2. This is not Web forms . you need jquery to call C# method.

  3. hi Sir, for me the bootstrap nav-tabs is not working. Its just showing as hyperlink. please help.

  4. hi
    could u please show how the jquery/java script loooks for this? since it needs linking i believe!!


It would be great if you can help share these free resources