In this article I will explain with an example, how to maintain or retain the selected (active) tab in Bootstrap Tabs on PostBack in ASP.Net using C# and VB.Net.
This article makes use of Bootstrap version 3.
Note: For more details on how to use Bootstrap Tabs, please refer my article Bootstrap 3: Simple Bootstrap Tabs example.
Bootstrap Tabs are a set of plain HTML elements and are not part of ASP.Net ViewState. Hence its Tab selection is lost whenever PostBack happens in ASP.Net.
Since the state of Bootstrap Tabs is not automatically maintained, we will need to maintain its state through programming.
The selected tab index has to be stored in HiddenField before PostBack, so that the selected tab index is retained across PostBack.
HTML Markup
The HTML Markup consists of:
DIV – For displaying Bootstrap Tab and panels.
The HTML DIV consists of a Bootstrap Tab consisting of two tabs and two panels to which the Bootstrap Tab plugin has been applied.
Applying Bootstrap Tab Plugin
Inside the HTML, the following Bootstrap 3 CSS file is inherited.
1. bootstrap.min.css
And then, the following Bootstrap 3 and jQuery JS files are inherited.
1. jquery.min.js
2. bootstrap.min.js
<link rel="stylesheet" href=''media="screen" />
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=''></script>
<div class="panel panel-default" style="width: 500px; padding: 10px; margin: 10px">
    <div id="Tabs" role="tabpanel">
        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
            <li><a href="#personal" aria-controls="personal" role="tab" data-toggle="tab">Personal</a></li>
            <li><a href="#employment" aria-controls="employment" role="tab" data-toggle="tab">Employment</a></li>
        <!-- Tab panes -->
        <div class="tab-content" style="padding-top: 20px">
            <div role="tabpanel" class="tab-pane active"id="personal">
                This is Personal Information Tab
            <div role="tabpanel" class="tab-pane" id="employment">
                This is Employment Information Tab
    <asp:Button Text="Submit" runat="server" CssClass="btn btn-primary" />
    <asp:HiddenField ID="TabName" runat="server" />
Maintaining Bootstrap Tabs Selected (Active) Tab on PostBack
Inside the jQuery document ready event, first the value of the HiddenField is fetched.
If the HiddenField value is blank, then the default tab is Selected (set as Active tab).
Then, each HTML Anchor element inside the Tab Header is assigned a jQuery click event handler.
Finally, when any Tab is clicked, the href attribute value is saved in the HiddenField.
<script type="text/javascript">
    $(function () {
        var tabName = $("[id*=TabName]").val() != "" ? $("[id*=TabName]").val() : "personal";
        $('#Tabs a[href="#' + tabName + '"]').tab('show');
        $("#Tabs a").click(function () {
            $("[id*=TabName]").val($(this).attr("href").replace("#", ""));
Setting the HiddenField value after PostBack
Inside the Page Load event handler, the value of the HiddenField is fetched from the Request.Form collection inside the IsPostBack condition.
Finally, the fetched value is again set to the HiddenField.
Note: You can also use HiddenField Value property, but sometimes values set from client side are not reflected and hence Request.Form collection is used.
protected void Page_Load(object sender, EventArgs e)
    if (this.IsPostBack)
        TabName.Value = Request.Form[TabName.UniqueID];
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Me.IsPostBack Then
        TabName.Value = Request.Form(TabName.UniqueID)
    End If
End Sub
Bootstrap 3: Bootstrap Tabs Maintain Selected (Active) Tab on PostBack in ASP.Net
Browser Compatibility
The above code has been tested in the following browsers.
Internet Explorer  FireFox  Chrome  Safari  Opera
* All browser logos displayed above are property of their respective owners.

Other available versions