---
title: "Tab using BootStrap in ASP.Net"  
description: "In this blog , I’m explaining how to make tabs using Bootstrap in ASP.Net  Example  :-  In This Example we Create Tab Using BootStrap FileForm Design:"  
author: "Anonymous User"  
published: 2014-01-15  
updated: 2014-09-18  
canonical: https://www.mindstick.com/blog/632/tab-using-bootstrap-in-asp-dot-net  
category: "bootstrap"  
tags: ["bootstrap"]  
reading_time: 2 minutes  

---

# Tab using BootStrap in ASP.Net

In this blog , I’m explaining how to make tabs using [Bootstrap in ASP.Net](https://www.mindstick.com/forum/33429/editable-list-view-system-using-bootstrap-in-asp-dot-net)

\

##### Example :-

\

In This Example we Create Tab Using [BootStrap File](https://www.mindstick.com/forum/156874/how-to-create-bootstrap-file-to-design-web-page-in-bootstrap-5)

##### 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](https://www.mindstick.com/forum/166/webservice-method) on tab1<div> inside the $([document](https://www.mindstick.com/articles/328642/what-to-consider-while-choosing-a-software-documentation-tool)).ready([function](https://www.mindstick.com/articles/13001/multi-statement-table-valued-user-defined-function-in-sql-server) () {} 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](https://www.mindstick.com/articles/188403/website-to-download-photos-from-instagram) and add the above three files into your [projects](https://www.mindstick.com/articles/105927/how-to-excel-at-managing-multiple-projects) because it’s mandatory for using the bootstrap [libraries](https://answers.mindstick.com/qa/49244/which-company-is-ahead-in-classification-of-data-for-libraries-innovations) and methods.

##### Use tabs Method :-

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

##### Output

![Tab using BootStrap in ASP.Net](https://www.mindstick.com/blogs/d9193c10-6eb6-4207-9e07-ad26163684fa/images/a5d94e6b-d228-4fd4-9d66-a5c38863c90e.png)\

in my next post i'll explain about [Record insert and retrieve using sqlite database in nodejs in Windows OS 64](https://www.mindstick.com/blog/635/Record%20insert%20and%20retrieve%20using%20sqlite%20database%20in%20nodejs%20in%20Windows%20OS%2064)

---

Original Source: https://www.mindstick.com/blog/632/tab-using-bootstrap-in-asp-dot-net

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
