title: Change title of bootstrap Tab
body: <p>I am using bootstrap creating tabs How can I change the heading of the tabs? Snippet of tabs declaration: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="Tabs" role="tabpanel"&gt;
              &lt;!-- Nav tabs --&gt;
              &lt;ul id="mainTabs"  class="nav nav-tabs" role="tablist"&gt;
                  &lt;li&gt;&lt;a href="#respond" role="tab" data-toggle="tab"&gt;Processing&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#review" role="tab" data-toggle="tab"&gt;Maintenance  &lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#details" role="tab" data-toggle="tab"&gt;Details  &lt;/a&gt;&lt;/li&gt;
                  
             &lt;/ul&gt;
        &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>`
  On the tab maintenance I have a grid of orders. When I click an order # I want to change the heading/title of the details tab to "Order 123 Details" and then I will switch to that tab with the extended details. How can I change the title/heading of a bootstrap tab?</p>