title: Bootstrap 2.2.1 Tabbable tabs not working
body: <p>i'm using bootstrap 2.2.1 and the "tabbable tabs" option doesn't seem to work. Even if i use their own template (for example, the simple "starter template" with the fixed-top navbar) and paste their own tabbable code into my html, they don't respond. The tabs render fine in the page, they're just unresponsive. The code worked for me in an older version of bootstrap--in fact the code for the new website is nearly identical. Any help is greatly appreciated, thanks!</p>
  
  <p>here's the code:</p>
  
  <pre><code> &lt;!DOCTYPE html&gt;
      &lt;html lang="en"&gt;
      &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;N.C&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;meta name="description" content=""&gt;
      &lt;meta name="author" content=""&gt;
  
      &lt;!-- Le styles --&gt;
      &lt;link href="bootstrap.css" rel="stylesheet"&gt;
      &lt;style&gt;
        body {
          padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
        }
  
        .container {
          width: auto;
          max-width: 800px;
        }
  
        .nhc {
          font-family: lucida sans;
          font-color: white;
        }
  
  
        #footer {
          text-align: right;
  
          border-top-width: 1px;
          border-top-color: #990000;
        }
  
      &lt;/style&gt;
  
      &lt;style type="text/css"&gt;
  
      #footer {
        color: #c4c1ba;
      }
  
      &lt;/style&gt;
  
  
      &lt;link href="bootstrap-responsive.css" rel="stylesheet"&gt;
  
      &lt;!-- HTML5 shim, for IE6-8 support of HTML5 elements --&gt;
      &lt;!--[if lt IE 9]&gt;
        &lt;script src="http://html5shim.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
  
      &lt;!-- Fav and touch icons --&gt;
      &lt;link rel="shortcut icon" href="../assets/ico/favicon.ico"&gt;
      &lt;link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png"&gt;
      &lt;link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png"&gt;
      &lt;link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png"&gt;
      &lt;link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png"&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
  
      &lt;div class="container"&gt;
          &lt;div class="page-header"&gt;
            &lt;div class="nhc"&gt;
            &lt;h1&gt;N.C&lt;/h1&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;p class="lead"&gt;Pin a fixed-height footer to the bottom of the viewport in                    desktop browsers with this custom HTML and CSS.&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
  
      &lt;div class="navbar navbar-inverse navbar-fixed-top"&gt;
        &lt;div class="navbar-inner"&gt;
          &lt;div class="container"&gt;
  
            &lt;a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;/a&gt;
  
            &lt;div class="nav-collapse collapse"&gt;
              &lt;ul class="nav"&gt;
                &lt;li&gt;&lt;a href="#Home"&gt;Home&lt;/a&gt;&lt;/li&gt;
                &lt;li class="active"&gt;&lt;a href="#About"&gt;About&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;&lt;!--/.nav-collapse --&gt;
  
            &lt;div class="container" id="footer"&gt;
              &lt;h4&gt;NC&lt;/h4&gt;
              &lt;div id="footer"&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="container"&gt;
        &lt;img src="mirror.jpg"&gt;
      &lt;/div&gt;
  
      &lt;div class="container"&gt;
        &lt;div class="tabbable"&gt; &lt;!-- Only required for left/right tabs --&gt;
          &lt;ul class="nav nav-tabs"&gt;
            &lt;li class="active"&gt;&lt;a href="#tab1" data-toggle="tab"&gt;Section 1&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#tab2" data-toggle="tab"&gt;Section 2&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;div class="tab-content"&gt;
            &lt;div class="tab-pane active" id="tab1"&gt;
              &lt;p&gt;I'm in Section 1.&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="tab-pane" id="tab2"&gt;
              &lt;p&gt;Howdy, I'm in Section 2.&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
  
  
  
  
      &lt;!-- Le javascript
      ================================================== --&gt;
      &lt;!-- Placed at the end of the document so the pages load faster --&gt;
      &lt;script src="jquery-1.8.3.min.js"&gt;&lt;/script&gt;
      &lt;script src="bootstrap-transition.js"&gt;&lt;/script&gt;
      &lt;script src="bootstrap-alert.js"&gt;&lt;/script&gt;
      &lt;script src="bootstrap-modal.js"&gt;&lt;/script&gt;
      &lt;script src="bootstrap-dropdown.js"&gt;&lt;/script&gt;
      &lt;script src="bootstrap-scrollspy.js"&gt;&lt;/script&gt;
      &lt;script src="bootstrap-tab.js"&gt;&lt;/script&gt;
      &lt;script src="bootstrap-tooltip.js"&gt;&lt;/script&gt;
      &lt;script src="bootstrap-popover.js"&gt;&lt;/script&gt;
      &lt;script src="bootstrap-button.js"&gt;&lt;/script&gt;
      &lt;script src="bootstrap-collapse.js"&gt;&lt;/script&gt;
      &lt;script src="bootstrap-carousel.js"&gt;&lt;/script&gt;
      &lt;script src="bootstrap-typeahead.js"&gt;&lt;/script&gt;
      &lt;script src="bootstrap.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>