Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

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 comment:

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


If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.