In this article I will explain how to maintain or retain the selected (active) tab in Bootstrap Tabs on PostBack in ASP.Net.
Note: In order to learn more about Bootstrap Tabs, please refer my article 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 Hidden Field before PostBack so that the selected tab index is retained across PostBacks.
Maintain Bootstrap Tabs Selected (Active) Tab on PostBack
Inside the jQuery document ready event, first the value of the Hidden Field is fetched. If the Hidden Field value is blank then the default tab is Selected (set as Active tab).
Each HTML Anchor element inside the Tab Header is assigned a click event handler. When any Tab is clicked, the href attribute value is saved in the Hidden Field.
<link rel="stylesheet" href="" />
<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
        <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 ID="Button1" Text="Submit" runat="server" CssClass="btn btn-primary" />
<asp:HiddenField ID="TabName" runat="server" />
<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("#", ""));
On server side, the value of the Hidden Field is fetched from the Request.Form collection. The fetched value is again set into the Hidden Field in order to use it on client side.
Note: You can also use HiddenField Value property, but sometimes values set from client side are not reflected and hence to be on safer side I have used Request.Form collection.
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 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.