In this blog , I’m explaining how to make tabs using Bootstrap in ASP.Net


Example  :-


In This Example we Create Tab Using BootStrap File

Form Design:- 
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Tab.aspx.cs" Inherits="Tab" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 
    <title></title>
    <script src="Js/jquery-1.8.3.min.js"></script>
    <script src="Js/jquery-ui-1.9.2.custom.min.js"></script>
    <link href="Bootstrap/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
 
</head>
<body>
    <form id="form1" runat="server">
        <div id="tab1">
            <ul role="tablist">
                <li><a href="#tabs-a">First</a></li>
                <li><a href="#tabs-b">Second</a></li>
                <li><a href="#tabs-c">Third</a></li>
            </ul>
            <div id="tabs-a">
                <p>Hello How Are You ?</p>
                <p>I Talk About India</p>
                <p>India Is Religon And Agriculture Country</p>
                <p>In India You can Visit Historical Place</p>
                <p>Like that TajMahal,Sangam,Rameshwaram,</p>
            </div>
            <div id="tabs-b">
                <p>Hello How Are You ?</p>
                <p>I Talk About It Sectore</p>
                <p>In It Sectore You can find job </p>
            </div>
            <div id="tabs-c">
                <p>Nam dui erat, auctor a,</p>
                <p>dignissim quis, sollicitudin eu, felis.</p>
                <p>Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</p>
            </div>
        </div>
    </form>
</body>
</html>
 
<script type="text/javascript">
    $(document).ready(function () {
        $('#tab1').tabs();
    });
</script>

 

Firstly create one <div> tag and give the id tab1 then create <ul> tag inside tab1 <div>   then  create three <li> tag inside <ul> tag and create one hyperlink inside every <li> tag .  then after create three div tag and write our code . then call tabs() method on tab1<div> inside the $(document).ready(function () {} function . 

Use this BootStrap File :- 

<script src="Js/jquery-1.8.3.min.js"></script>
<script src="Js/jquery-ui-1.9.2.custom.min.js"></script>
<link href="Bootstrap/jquery-ui-1.10.3.custom.css" rel="stylesheet" />

Download and add the above three files into your projects because it’s mandatory for using the bootstrap libraries and methods.

Use tabs Method :-

<script type="text/javascript">
 
    $(document).ready(function () {
        $('#tab1').tabs();//tab method
    });
 
</script>

Output


  Modified On Sep-18-2014 01:24:20 PM

Leave Comment