diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js
index 00fd56694c..7400bc12ba 100644
--- a/docs/assets/js/application.js
+++ b/docs/assets/js/application.js
@@ -36,7 +36,7 @@ $(document).ready(function(){
   // POSITION STATIC TWIPSIES
   // ========================
 
-  $(window).load(function () {
+  $(window).bind( 'load resize', function () {
     $(".twipsies a").each(function () {
        $(this)
         .twipsy({
diff --git a/docs/index.html b/docs/index.html
index 41bf39b70e..68e60e20dc 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -37,7 +37,7 @@
 
     <!-- Topbar
     ================================================== -->
-    <div class="topbar" data-scrollspy="x" >
+    <div class="topbar" data-scrollspy="scrollspy" >
       <div class="topbar-inner">
         <div class="container">
           <a class="brand" href="#">Bootstrap</a>
@@ -1291,7 +1291,7 @@
   </div>
   <h2>Fixed topbar</h2>
   <div class="topbar-wrapper" style="z-index: 5;">
-    <div class="topbar" data-dropdown="x" >
+    <div class="topbar" data-dropdown="dropdown" >
       <div class="topbar-inner">
         <div class="container">
           <h3><a href="#">Project Name</a></h3>
@@ -1360,7 +1360,7 @@
         <li><a href="#">Messages</a></li>
         <li><a href="#">Settings</a></li>
         <li><a href="#">Contact</a></li>
-        <li class="dropdown" data-dropdown="x">
+        <li class="dropdown" data-dropdown="dropdown">
           <a href="#" class="dropdown-toggle">Dropdown</a>
           <ul class="dropdown-menu">
             <li><a href="#">Secondary link</a></li>
diff --git a/docs/javascript.html b/docs/javascript.html
index 77cb2229f0..e1c4e83dc3 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -39,7 +39,7 @@
 
     <!-- Topbar
     ================================================== -->
-    <div class="topbar" data-scrollspy="x" >
+    <div class="topbar" data-scrollspy="scrollspy" >
       <div class="fill">
         <div class="container">
           <h3><a href="#">Bootstrap JS</a></h3>
@@ -221,7 +221,7 @@ $('#my-modal').bind('hidden', function () {
 <pre class="prettyprint linenums">
 &lt;ul class="tabs"&gt;
   &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
-  &lt;li class="dropdown" data-dropdown="x" &gt;
+  &lt;li class="dropdown" data-dropdown="dropdown" &gt;
     &lt;a href="#" class="dropdown-toggle"&gt;Dropdown&lt;/a&gt;
     &lt;ul class="dropdown-menu"&gt;
       &lt;li&gt;&lt;a href="#"&gt;Secondary link&lt;/a&gt;&lt;/li&gt;
@@ -239,7 +239,7 @@ $('#my-modal').bind('hidden', function () {
           </p>
           <h3>Demo</h3>
           <div class="topbar-wrapper">
-            <div id="topbar-example" class="topbar" data-dropdown="x">
+            <div id="topbar-example" class="topbar" data-dropdown="dropdown">
               <div class="topbar-inner">
                 <div class="container">
                   <h3><a href="#">Project Name</a></h3>
@@ -295,7 +295,7 @@ $('#my-modal').bind('hidden', function () {
           <pre class="prettyprint linenums">$('#topbar').dropdown()</pre>
           <h3>Markup</h3>
           <p>To easily add scrollspy behavior to your nav, just add the <code>data-scrollspy</code> attribute to the <code>.topbar</code>.
-          <pre class="prettyprint linenums">&lt;div class="topbar" data-scrollspy="x" &gt;...&lt;/div&gt;</pre>
+          <pre class="prettyprint linenums">&lt;div class="topbar" data-scrollspy="scrollspy" &gt;...&lt;/div&gt;</pre>
           <h3>Methods</h3>
           <h4>$().scrollspy()</h4>
           <p>
@@ -330,7 +330,7 @@ $('#my-modal').bind('hidden', function () {
           <pre class="prettyprint linenums">$('.tabs').tabs()</pre>
           <h3>Markup</h3>
           <p>You can activate a tab or pill navigation without writing any javascript by simply giving them a <code>data-tabs</code> or <code>data-pills</code> attribute.</p>
-          <pre class="prettyprint linenums"> &lt;ul class="tabs" data-tabs="x" &gt;...&lt;/ul&gt;</pre>
+          <pre class="prettyprint linenums"> &lt;ul class="tabs" data-tabs="tabs" &gt;...&lt;/ul&gt;</pre>
           <h3>Methods</h3>
           <h4>$().tabs or $().pills</h4>
           <p>
@@ -358,7 +358,7 @@ $('#my-modal').bind('hidden', function () {
 &lt;/script&gt;</pre>
           </p>
           <h3>Demo</h3>
-          <ul class="tabs" data-tabs="x" >
+          <ul class="tabs" data-tabs="tabs" >
             <li class="active"><a href="#home">Home</a></li>
             <li><a href="#profile">Profile</a></li>
             <li><a href="#messages">Messages</a></li>
@@ -644,11 +644,11 @@ $('#my-modal').bind('hidden', function () {
           <p>Closes an alert.</p>
           <pre class="prettyprint linenums">$(".alert-message").alert('close')</pre>
           <h3>Demo</h3>
-          <div class="alert-message warning fade in" data-alert="x" >
+          <div class="alert-message warning fade in" data-alert="alert" >
             <a class="close" href="#">&times;</a>
             <p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p>
           </div>
-          <div class="alert-message block-message error fade in" data-alert="x" >
+          <div class="alert-message block-message error fade in" data-alert="alert" >
             <a class="close" href="#">&times;</a>
             <p><strong>Oh snap! You got an error!</strong> Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
             <div class="alert-actions">