diff --git a/misc/demo/assets/app.js b/misc/demo/assets/app.js
index c62d9cd478..bb47105830 100644
--- a/misc/demo/assets/app.js
+++ b/misc/demo/assets/app.js
@@ -1,4 +1,5 @@
 angular.module('bootstrapDemoApp', ['ui.bootstrap', 'plunker'], function($httpProvider){
+  FastClick.attach(document.body);
   delete $httpProvider.defaults.headers.common['X-Requested-With'];
 });
 
@@ -52,4 +53,4 @@ var SelectModulesCtrl = function($scope, $modalInstance, modules) {
   $scope.cancel = function () {
     $modalInstance.dismiss();
   };
-};
\ No newline at end of file
+};
diff --git a/misc/demo/assets/demo.css b/misc/demo/assets/demo.css
index a67e22e713..d1cadcddd3 100644
--- a/misc/demo/assets/demo.css
+++ b/misc/demo/assets/demo.css
@@ -32,53 +32,259 @@ section {
     background-color: #f5f5f5;
 }
 
-.jumbotron {
-    position: relative;
-    padding: 40px 0;
-    color: #fff;
+.bs-social {
+    margin-top: 20px;
+    margin-bottom: 20px;
     text-align: center;
-    text-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 30px rgba(0,0,0,.075);
-    background: #020031;
-    background: -moz-linear-gradient(45deg, #020031 0%, #6d3353 100%);
-    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#020031), color-stop(100%,#6d3353));
-    background: -webkit-linear-gradient(45deg, #020031 0%,#6d3353 100%);
-    background: -o-linear-gradient(45deg, #020031 0%,#6d3353 100%);
-    background: -ms-linear-gradient(45deg, #020031 0%,#6d3353 100%);
-    background: linear-gradient(45deg, #020031 0%,#6d3353 100%);
-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#020031', endColorstr='#6d3353',GradientType=1 );
-    -webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
-    -moz-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
-    box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
-    border-radius: 0;
-    -moz-border-radius: 0;
-    -webkit-border-radius: 0;
-    -o-border-radius: 0;
-}
-.bs-docs-social {
-    margin-top: 1em;
-    padding: 15px 0;
-    text-align: center;
-    background-color: rgba(245,245,245,0.3);
-    border-top: 1px solid rgba(255,255,255,0.3);
-    border-bottom: 1px solid rgba(221,221,221,0.3);
+}
+
+@media (min-width: 768px) {
+
+    .bs-social {
+        text-align: left;
+    }
+
 }
 
 .nav, .pagination, .carousel, .panel-title a {
     cursor: pointer;
 }
 
-.bs-docs-social-buttons {
-    margin-left: 0;
+.bs-social-buttons {
+    display: inline-block;
     margin-bottom: 0;
     padding-left: 0;
     list-style: none;
 }
-.bs-docs-social-buttons li {
+.bs-social-buttons li {
     display: inline-block;
     padding: 5px 8px;
     line-height: 1;
 }
 
+@media (max-width: 767px) {
+
+    .visible-xs.collapse.in {
+        display: block!important;
+    }
+    .visible-xs.collapse {
+        display: none!important;
+    }
+
+}
+
+.navbar .collapse {
+    border-top: 1px solid #e7e7e7;
+    margin-left: -15px;
+    margin-right: -15px;
+    padding-right: 15px;
+    padding-left: 15px;
+}
+
+.show-grid {
+  margin-bottom: 15px;
+}
+
+/*
+ * Container
+ *
+ * Tweak to width of container.
+ */
+
+/*@media (min-width: 1200px) {
+    .container{
+        max-width: 970px;
+    }
+}*/
+
+/*
+ * Tabs
+ *
+ * Tweaks to the Tabs.
+ */
+
+.code .nav-tabs {
+border-bottom: 1px solid #ccc;
+}
+
+.code pre, .code code {
+    border-top: none;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+}
+
+.code .nav-tabs>li.active>a, .code .nav-tabs>li.active>a:hover, .code .nav-tabs>li.active>a:focus {
+background-color: #f8f8f8;
+border: 1px solid #ccc;
+border-bottom-color: transparent;
+}
+
+/*
+ * Button Inverse
+ *
+ * Buttons in the masthead.
+ */
+
+.btn-outline-inverse {
+color: #fff;
+background-color: transparent;
+border-color: #cdbfe3;
+margin: 10px;
+}
+
+@media (min-width: 768px) {
+
+    .btn-outline-inverse {
+        width: auto;
+        margin: 20px 5px 20px 0;
+        padding: 18px 24px;
+        font-size: 21px;
+    }
+
+}
+
+.btn-outline-inverse:hover, .btn-outline-inverse:focus, .btn-outline-inverse:active {
+color: #563d7c;
+text-shadow: none;
+background-color: #fff;
+border-color: #fff;
+}
+
+
+/* Page headers */
+.bs-header {
+  padding: 30px 15px 40px; /* side padding builds on .container 15px, so 30px */
+  font-size: 16px;
+  text-align: center;
+  text-shadow: 0 1px 0 rgba(0,0,0,.15);
+  color: #cdbfe3;
+  background-color: #563d7c;
+  background-image: url(header.png);
+}
+.bs-header a {
+  color: #fff;
+  font-weight: normal;
+}
+.bs-header h1 {
+  color: #fff;
+}
+.bs-header p {
+  font-weight: 200;
+  line-height: 1.4;
+}
+.bs-header .container {
+  position: relative;
+}
+
+@media (min-width: 768px) {
+  .bs-header {
+    font-size: 30px;
+    text-align: left;
+  }
+  .bs-header h1 {
+    font-size: 100px;
+    line-height: 1;
+  }
+}
+
+@media (min-width: 992px) {
+  .bs-header p {
+    margin-right: 25%;
+  }
+}
+
+.navbar-inner {
+    -webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.175);
+    box-shadow: 0 3px 3px rgba(0,0,0,0.175);
+}
+
+/*
+ * Side navigation
+ *
+ * Scrollspy and affixed enhanced navigation to highlight sections and secondary
+ * sections of docs content.
+ */
+
+/* By default it's not affixed in mobile views, so undo that */
+.bs-sidebar.affix {
+  position: static;
+}
+
+/* First level of nav */
+.bs-sidenav {
+  margin-top: 30px;
+  margin-bottom: 30px;
+  padding-top:    10px;
+  padding-bottom: 10px;
+  text-shadow: 0 1px 0 #fff;
+  background-color: #f7f5fa;
+  border-radius: 5px;
+}
+
+/* All levels of nav */
+.bs-sidebar .nav > li > a {
+  display: block;
+  color: #716b7a;
+  padding: 5px 20px;
+}
+.bs-sidebar .nav > li > a:hover,
+.bs-sidebar .nav > li > a:focus {
+  text-decoration: none;
+  background-color: #e5e3e9;
+  border-right: 1px solid #dbd8e0;
+}
+.bs-sidebar .nav > .active > a,
+.bs-sidebar .nav > .active:hover > a,
+.bs-sidebar .nav > .active:focus > a {
+  font-weight: bold;
+  color: #563d7c;
+  background-color: transparent;
+  border-right: 1px solid #563d7c;
+}
+
+/* Nav: second level (shown on .active) */
+.bs-sidebar .nav .nav {
+  display: none; /* Hide by default, but at >768px, show it */
+  margin-bottom: 8px;
+}
+.bs-sidebar .nav .nav > li > a {
+  padding-top:    3px;
+  padding-bottom: 3px;
+  padding-left: 30px;
+  font-size: 90%;
+}
+
+/* Show and affix the side nav when space allows it */
+@media (min-width: 992px) {
+  .bs-sidebar .nav > .active > ul {
+    display: block;
+  }
+  /* Widen the fixed sidebar */
+  .bs-sidebar.affix,
+  .bs-sidebar.affix-bottom {
+    width: 213px;
+  }
+  .bs-sidebar.affix {
+    position: fixed; /* Undo the static from mobile first approach */
+    top: 80px;
+  }
+  .bs-sidebar.affix-bottom {
+    position: absolute; /* Undo the static from mobile first approach */
+  }
+  .bs-sidebar.affix-bottom .bs-sidenav,
+  .bs-sidebar.affix .bs-sidenav {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+}
+@media (min-width: 1200px) {
+  /* Widen the fixed sidebar again */
+  .bs-sidebar.affix-bottom,
+  .bs-sidebar.affix {
+    width: 263px;
+  }
+}
+
 
 /* Not enough room on mobile for markup tab, js tab, and plunk btn.
   And no one cares about plunk button on a phone anyway */
@@ -95,7 +301,7 @@ section {
 }
 
 .header-placeholder {
-    height: 175px;
+    height: 50px;
 }
 
 @media screen and (min-width: 768px) {
@@ -114,4 +320,4 @@ section {
         margin-left: 10px;
     }
 
-}
\ No newline at end of file
+}
diff --git a/misc/demo/assets/header.png b/misc/demo/assets/header.png
new file mode 100644
index 0000000000..785dd104d3
Binary files /dev/null and b/misc/demo/assets/header.png differ
diff --git a/misc/demo/assets/smoothscroll-angular-custom.js b/misc/demo/assets/smoothscroll-angular-custom.js
new file mode 100644
index 0000000000..80a0c1ff55
--- /dev/null
+++ b/misc/demo/assets/smoothscroll-angular-custom.js
@@ -0,0 +1,94 @@
+/*
+ * https://github.com/alicelieutier/smoothScroll/
+ * A teeny tiny, standard compliant, smooth scroll script with ease-in-out effect and no jQuery (or any other dependancy, FWIW).
+ * MIT License
+ */
+window.smoothScroll = (function(){
+// We do not want this script to be applied in browsers that do not support those
+// That means no smoothscroll on IE9 and below.
+if(document.querySelectorAll === void 0 || window.pageYOffset === void 0 || history.pushState === void 0) { return; }
+
+// Get the top position of an element in the document
+var getTop = function(element) {
+    // return value of html.getBoundingClientRect().top ... IE : 0, other browsers : -pageYOffset
+    if(element.nodeName === 'HTML') return -window.pageYOffset
+    return element.getBoundingClientRect().top + window.pageYOffset;
+}
+// ease in out function thanks to:
+// http://blog.greweb.fr/2012/02/bezier-curve-based-easing-functions-from-concept-to-implementation/
+var easeInOutCubic = function (t) { return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1 }
+
+// calculate the scroll position we should be in
+// given the start and end point of the scroll
+// the time elapsed from the beginning of the scroll
+// and the total duration of the scroll (default 500ms)
+var position = function(start, end, elapsed, duration) {
+    if (elapsed > duration) return end;
+    return start + (end - start) * easeInOutCubic(elapsed / duration); // <-- you can change the easing funtion there
+    // return start + (end - start) * (elapsed / duration); // <-- this would give a linear scroll
+}
+
+// we use requestAnimationFrame to be called by the browser before every repaint
+// if the first argument is an element then scroll to the top of this element
+// if the first argument is numeric then scroll to this location
+// if the callback exist, it is called when the scrolling is finished
+var smoothScroll = function(el, duration, callback){
+    duration = duration || 500;
+    var start = window.pageYOffset;
+
+    if (typeof el === 'number') {
+      var end = parseInt(el);
+    } else {
+      var end = getTop(el);
+    }
+
+    var clock = Date.now();
+    var requestAnimationFrame = window.requestAnimationFrame ||
+        window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame ||
+        function(fn){window.setTimeout(fn, 15);};
+
+    var step = function(){
+        var elapsed = Date.now() - clock;
+        window.scroll(0, position(start, end, elapsed, duration));
+        if (elapsed > duration) {
+            if (typeof callback === 'function') {
+                callback(el);
+            }
+        } else {
+            requestAnimationFrame(step);
+        }
+    }
+    step();
+}
+
+var linkHandler = function(ev) {
+    ev.preventDefault();
+
+    if (location.hash !== this.hash) {
+      //NOTE(@ajoslin): Changed this line to stop $digest errors
+      //window.history.pushState(null, null, this.hash)
+      angular.element(document).injector().get('$location').hash(this.hash);
+    }
+    // using the history api to solve issue #1 - back doesn't work
+    // most browser don't update :target when the history api is used:
+    // THIS IS A BUG FROM THE BROWSERS.
+    // change the scrolling duration in this call
+    smoothScroll(document.getElementById(this.hash.substring(1)), 500, function(el) {
+        location.replace('#' + el.id)
+        // this will cause the :target to be activated.
+    });
+}
+
+// We look for all the internal links in the documents and attach the smoothscroll function
+document.addEventListener("DOMContentLoaded", function () {
+    var internal = document.querySelectorAll('a[href^="#"]'), a;
+    for(var i=internal.length; a=internal[--i];){
+        a.addEventListener("click", linkHandler, false);
+    }
+});
+
+// return smoothscroll API
+return smoothScroll;
+
+})();
+
diff --git a/misc/demo/index.html b/misc/demo/index.html
index 14e0e70068..feb7b87a79 100644
--- a/misc/demo/index.html
+++ b/misc/demo/index.html
@@ -1,17 +1,19 @@
-<!DOCTYPE html>
 <html lang="en" ng-app="bootstrapDemoApp" id="top">
 <head>
     <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
     <title>Angular directives for Twitter's Bootstrap</title>
     <meta name="description" content="AngularJS (Angular) native directives for Twitter Bootstrap. Small footprint (5kB gzipped!), no 3rd party JS dependencies (jQuery, bootstrap JS) required! Widgets: <% demoModules.forEach(function(module) { %><%= module.displayName %>, <% }); %>">
     <meta name="google-site-verification" content="7lc5HyceLDqpV_6oNHteYFfxDJH7-S3DwnJKtNUKcRg" />
 
-    <script src="//ajax.googleapis.com/ajax/libs/angularjs/<%= ngversion %>/angular.min.js"></script>
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/fastclick/0.6.7/fastclick.min.js"></script>
+    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/<%= ngversion %>/angular.min.js"></script>
     <script src="ui-bootstrap-tpls-<%= pkg.version%>.js"></script>
     <script src="assets/plunker.js"></script>
     <script src="assets/app.js"></script>
 
-    <link href="//netdna.bootstrapcdn.com/bootstrap/<%= bsversion %>/css/bootstrap.min.css" rel="stylesheet"/>
+    <link href="http://netdna.bootstrapcdn.com/bootstrap/<%= bsversion %>/css/bootstrap.min.css" rel="stylesheet"/>
     <link rel="stylesheet" href="assets/rainbow.css"/>
     <link rel="stylesheet" href="assets/demo.css"/>
     <link rel="author" href="https://github.com/angular-ui/bootstrap/graphs/contributors">
@@ -19,107 +21,120 @@
 <body class="ng-cloak" ng-controller="MainCtrl">
 <header class="navbar navbar-default navbar-fixed-top">
     <div class="navbar-inner">
-    <div class="container">
-        <ul class="nav navbar-nav">
-            <li class="dropdown">
-                <a href="#" class="navbar-brand dropdown-toggle">
-                    UI Bootstrap <b class="caret"></b>
-                </a>
-                <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
-                    <li><a href="https://github.com/angular-ui/"><strong>Related Projects:</strong></a></li>
-                    <li class="divider"></li>
-                    <li><a href="http://angular-ui.github.io/">AngularUI</a></li>
-                    <li><a href="http://angular-ui.github.io/ng-grid/">Grid</a></li>
-                    <li><a href="https://github.com/angular-ui/AngularJs.tmbundle">AngularJS.tmbundle</a></li>
-                    <li><a href="https://github.com/angular-ui/ui-router">Router <span class="label label-success">New!</span></a></li>
+        <div class="container">
+            <div class="navbar-header">
+                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-3" ng-click="isCollapsed = !isCollapsed">
+                    <span class="sr-only">Toggle navigation</span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                </button>
+                <a class="navbar-brand visible-xs" href="#">UI Bootstrap</a>
+            </div>
+            <nav class="hidden-xs">
+                <ul class="nav navbar-nav">
+                    <a href="#" role="button" class="navbar-brand">
+                        UI Bootstrap
+                    </a>
+                    <li class="dropdown">
+                        <a href="#" role="button" class="dropdown-toggle">
+                            Directives <b class="caret"></b>
+                        </a>
+                        <ul class="dropdown-menu">
+                            <% demoModules.forEach(function(module) {  %>
+                                <li><a href="#<%= module.name %>"><%= module.displayName %></a></li>
+                            <% }); %>
+                        </ul>
+                    </li>
+                    <li><a href="#getting_started">Getting started</a></li>
                 </ul>
-            </li>
-
-            <li class="dropdown">
-                <a href="#" role="button" class="dropdown-toggle">
-                    Directives <b class="caret"></b>
-                </a>
-                <ul class="dropdown-menu">
-                    <% demoModules.forEach(function(module) {  %>
-                        <li><a href="#<%= module.name %>"><%= module.displayName %></a></li>
-                    <% }); %>
+            </nav>
+            <nav class="visible-xs" collapse="!isCollapsed">
+                <ul class="nav navbar-nav">
+                    <li><a href="#getting_started" ng-click="isCollapsed = !isCollapsed">Getting started</a></li>
+                    <li><a href="#directives_small" ng-click="isCollapsed = !isCollapsed">Directives</a></li>
                 </ul>
-            </li>
-            <li><a href="#getting_started">Getting started</a></li>
-        </ul>
+            </nav>
+        </div>
     </div>
-  </div>
 </header>
 <div class="header-placeholder"></div>
 <div role="main">
-    <header class="jumbotron text-center" id="overview">
+    <header class="bs-header text-center" id="overview">
         <div class="container">
             <h1>
                 UI Bootstrap
             </h1>
 
-            <p>Bootstrap components written in pure <strong><a href="http://angularjs.org">AngularJS</a></strong> by the <strong><a
-                    href="http://angular-ui.github.io">AngularUI Team</a></strong></p>
+            <p>Bootstrap components written in pure <a href="http://angularjs.org">AngularJS</a> by the <a
+                    href="http://angular-ui.github.io">AngularUI Team</a></p>
 
-            <p class="btn-group">
-                <a class="btn btn-default" href="https://github.com/angular-ui/bootstrap">Code on Github</a>
-                <a class="btn btn-primary" href="https://github.com/angular-ui/bootstrap/tree/gh-pages">
+            <p>
+                <a class="btn btn-outline-inverse btn-lg" href="https://github.com/angular-ui/bootstrap"><i class="icon-github"></i>Code on Github</a>
+                <a class="btn btn-outline-inverse btn-lg" href="https://github.com/angular-ui/bootstrap/tree/gh-pages">
                     <i class="glyphicon glyphicon-download-alt"></i> Download <small>(<%= pkg.version%>)</small>
                 </a>
-                <a class="btn btn-default" ng-click="showBuildModal()"><i class="glyphicon glyphicon-wrench"></i> Create a Build</a>
+                <a class="btn btn-outline-inverse btn-lg" ng-click="showBuildModal()"><i class="glyphicon glyphicon-wrench"></i> Create a Build</a>
             </p>
         </div>
-        <div class="bs-docs-social">
-            <div class="container">
-                <ul class="bs-docs-social-buttons">
-                    <li>
-                        <iframe src="http://ghbtns.com/github-btn.html?user=angular-ui&repo=bootstrap&type=watch&count=true"
-                                allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
-                    </li>
-                    <li>
-                        <iframe src="http://ghbtns.com/github-btn.html?user=angular-ui&repo=bootstrap&type=fork&count=true"
-                                allowtransparency="true" frameborder="0" scrolling="0" width="95" height="20"></iframe>
-                    </li>
-                    <li>
-                        <a href="https://twitter.com/share" class="twitter-share-button"
-                           data-hashtags="angularjs">Tweet</a>
-                        <script>!function (d, s, id) {
-                            var js, fjs = d.getElementsByTagName(s)[0];
-                            if (!d.getElementById(id)) {
-                                js = d.createElement(s);
-                                js.id = id;
-                                js.src = "//platform.twitter.com/widgets.js";
-                                fjs.parentNode.insertBefore(js, fjs);
-                            }
-                        }(document, "script", "twitter-wjs");</script>
-                    </li>
-                    <li>
-                        <!-- Place this tag where you want the +1 button to render. -->
-                        <div class="g-plusone" data-size="medium"></div>
+        <div class="bs-social container">
+            <ul class="bs-social-buttons">
+                <li>
+                    <iframe src="http://ghbtns.com/github-btn.html?user=angular-ui&repo=bootstrap&type=watch&count=true"
+                            allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
+                </li>
+                <li>
+                    <iframe src="http://ghbtns.com/github-btn.html?user=angular-ui&repo=bootstrap&type=fork&count=true"
+                            allowtransparency="true" frameborder="0" scrolling="0" width="95" height="20"></iframe>
+                </li>
+                <li>
+                    <a href="https://twitter.com/share" class="twitter-share-button"
+                       data-hashtags="angularjs">Tweet</a>
+                    <script>!function (d, s, id) {
+                        var js, fjs = d.getElementsByTagName(s)[0];
+                        if (!d.getElementById(id)) {
+                            js = d.createElement(s);
+                            js.id = id;
+                            js.src = "//platform.twitter.com/widgets.js";
+                            fjs.parentNode.insertBefore(js, fjs);
+                        }
+                    }(document, "script", "twitter-wjs");</script>
+                </li>
+                <li>
+                    <!-- Place this tag where you want the +1 button to render. -->
+                    <div class="g-plusone" data-size="medium"></div>
 
-                        <!-- Place this tag after the last +1 button tag. -->
-                        <script type="text/javascript">
-                            (function () {
-                                var po = document.createElement('script');
-                                po.type = 'text/javascript';
-                                po.async = true;
-                                po.src = 'https://apis.google.com/js/plusone.js';
-                                var s = document.getElementsByTagName('script')[0];
-                                s.parentNode.insertBefore(po, s);
-                            })();
-                        </script>
-                    </li>
-                </ul>
-            </div>
+                    <!-- Place this tag after the last +1 button tag. -->
+                    <script type="text/javascript">
+                        (function () {
+                            var po = document.createElement('script');
+                            po.type = 'text/javascript';
+                            po.async = true;
+                            po.src = 'https://apis.google.com/js/plusone.js';
+                            var s = document.getElementsByTagName('script')[0];
+                            s.parentNode.insertBefore(po, s);
+                        })();
+                    </script>
+                </li>
+            </ul>
         </div>
     </header>
     <div class="container">
-        <section id="getting_started" class="row">
+        <div class="row">
             <div class="col-md-12">
-                <div class="page-header">
-                    <h1>Getting started</h1>
-                </div>
-                <div>
+                <section class="bs-sidebar visible-xs" id="directives_small">
+                    <ul class="nav bs-sidenav">
+                        <li><a href="#"><strong>Directives</strong></a></li>
+                        <% demoModules.forEach(function(module) {  %>
+                            <li><a href="#<%= module.name %>"><%= module.displayName %></a></li>
+                        <% }); %>
+                    </ul>
+                </section>
+
+                <section id="getting_started">
+                    <div class="page-header">
+                        <h1>Getting started</h1>
+                    </div>
                     <h3>Dependencies</h3>
                     <p>
                         This repository contains a set of <strong>native AngularJS directives</strong> based on
@@ -127,8 +142,8 @@ <h3>Dependencies</h3>
                         JavaScript is required. The <strong>only required dependencies</strong> are:
                     </p>
                     <ul>
-                        <li><a href="http://angularjs.org" target="_blank">AngularJS</a> (minimal version 1.0.8 or 1.1.5)</li>
-                        <li><a href="http://getbootstrap.com" target="_blank">Bootstrap CSS</a> (version 3.0)</li>
+                        <li><a href="http://angularjs.org" target="_blank">AngularJS</a> (minimal version 1.0.8)</li>
+                        <li><a href="http://getbootstrap.com" target="_blank">Bootstrap CSS</a> (tested with version <%= bsversion %>)</li>
                     </ul>
                     <h3>Files to download</h3>
                     <p>
@@ -144,63 +159,54 @@ <h3>Files to download</h3>
                     <h3>Installation</h3>
                     <p>As soon as you've got all the files downloaded and included in your page you just need to declare
                        a dependency on the <code>ui.bootstrap</code> <a href="http://docs.angularjs.org/guide/module">module</a>:<br>
-                       <code>angular.module('myModule', ['ui.bootstrap']);</code>
+                       <pre><code>angular.module('myModule', ['ui.bootstrap']);</code></pre>
                     </p>
                     <p>You can fork one of the plunkers from this page to see a working example of what is described here.</p>
                     <h3>CSS</h3>
                     <p>Original Bootstrap's CSS depends on empty <code>href</code> attributes to style cursors for several components (pagination, tabs etc.).
-                       But in AngularJS adding empty <code>href</code> attributes to link tags will cause unwanted route changes.
-                       This is why we need to remove empty <code>href</code> attributes from directive templates and as a result
-                       styling is not applied correctly. The remedy is simple, just add the following styling to your application:
-                       <code>
-                           .nav, .pagination, .carousel, .panel-title a {
-                                cursor: pointer;
-                           }
-                       </code>
+                    But in AngularJS adding empty <code>href</code> attributes to link tags will cause unwanted route changes. This is why we need to remove empty <code>href</code> attributes from directive templates and as a result styling is not applied correctly. The remedy is simple, just add the following styling to your application: <pre><code>.nav, .pagination, .carousel, .panel-title a { cursor: pointer; }</code></pre>
                     </p>
-                </div>
-            </div>
-        </section>
-        <% demoModules.forEach(function(module) { %>
-            <section id="<%= module.name %>" class="row">
-                <div class="col-md-12">
-                    <div class="page-header">
-                      <h1><%= module.displayName %><small>
-                          (<a target="_blank" href="https://github.com/angular-ui/bootstrap/tree/master/src/<%= module.name %>">ui.bootstrap.<%= module.name %></a>)
-                      </small></h1>
-                    </div>
-                    <div class="row">
-                        <div class="col-md-6">
-                            <%= module.docs.html %>
-                        </div>
-                        <div class="col-md-6">
-                            <%= module.docs.md %>
+                </section>
+                <% demoModules.forEach(function(module) { %>
+                    <section id="<%= module.name %>">
+                        <div class="page-header">
+                          <h1><%= module.displayName %><small>
+                              (<a target="_blank" href="https://github.com/angular-ui/bootstrap/tree/master/src/<%= module.name %>">ui.bootstrap.<%= module.name %></a>)
+                          </small></h1>
+                          </div>
+                          <div class="row">
+                            <div class="col-md-6 show-grid">
+                                <%= module.docs.html %>
+                            </div>
+                            <div class="col-md-6">
+                                <%= module.docs.md %>
+                            </div>
                         </div>
-                    </div>
-                    <hr>
-                    <div class="row">
-                        <div class="col-md-12" ng-controller="PlunkerCtrl">
-                            <div class="pull-right">
-                                <button class="btn btn-info" id="plunk-btn" ng-click="edit('<%= ngversion%>', '<%= bsversion %>', '<%= pkg.version%>', '<%= module.name %>')"><i class="glyphicon glyphicon-edit"></i> Edit in plunker</button>
+                        <hr>
+                        <div class="row code">
+                            <div class="col-md-12" ng-controller="PlunkerCtrl">
+                                <div class="pull-right">
+                                    <button class="btn btn-info" id="plunk-btn" ng-click="edit('<%= ngversion%>', '<%= bsversion %>', '<%= pkg.version%>', '<%= module.name %>')"><i class="glyphicon glyphicon-edit"></i> Edit in plunker</button>
+                                </div>
+                                <tabset>
+                                    <tab heading="Markup">
+                                        <div plunker-content="markup">
+                                            <pre ng-non-bindable><code data-language="html"><%- module.docs.html %></code></pre>
+                                        </div>
+                                    </tab>
+                                    <tab heading="JavaScript">
+                                        <div plunker-content="javascript">
+                                            <pre ng-non-bindable><code data-language="javascript"><%- module.docs.js %></code></pre>
+                                        </div>
+                                    </tab>
+                                </tabset>
                             </div>
-                            <tabset>
-                                <tab heading="Markup">
-                                    <div plunker-content="markup">
-                                        <pre ng-non-bindable><code data-language="html"><%- module.docs.html %></code></pre>
-                                    </div>
-                                </tab>
-                                <tab heading="JavaScript">
-                                    <div plunker-content="javascript">
-                                        <pre ng-non-bindable><code data-language="javascript"><%- module.docs.js %></code></pre>
-                                    </div>
-                                </tab>
-                            </tabset>
                         </div>
-                    </div>
-                </div>
-            </section>
-            <script><%= module.docs.js %></script>
-        <% }); %>
+                    </section>
+                    <script><%= module.docs.js %></script>
+                <% }); %>
+            </div>
+        </div> 
     </div><!-- /.container -->
 </div><!-- /.main -->
 <footer class="footer">
@@ -215,20 +221,40 @@ <h1><%= module.displayName %><small>
 <script src="assets/rainbow-javascript.js"></script>
 <script src="assets/rainbow-html.js"></script>
 <script type="text/ng-template" id="buildModal.html">
-    <div class="modal-header"><h2>Create a Custom Build</h2></div>
+    <div class="modal-header">
+      <h4>
+      Create a Custom Build
+      <br>
+      <small>Select the modules you wish to download</small>
+      </h4>
+    </div>
     <div class="modal-body">
         <div ng-show="buildErrorText">
-            <h3 style="text-align: center;">{{buildErrorText}}</h3>
+            <h4 style="text-align: center;">{{buildErrorText}}</h4>
         </div>
         <div ng-hide="buildErrorText">
-            <label>Select the modules you wish to download:</label>
-            <% modules.forEach(function(module) { %>
-            <button type="button" class="btn" ng-class="{'btn-primary': module.<%= module.name %>}" style="width: 170px; margin-bottom: 3px;" ng-model="module.<%= module.name %>" btn-checkbox ng-change="selectedChanged('<%= module.name %>', module.<%= module.name %>)"><%= module.displayName %></button>
+            <% modules.forEach(function(module,i) { %>
+              <% if (i % 3 === 0) {%>
+                <div class="btn-group" style="width: 100%;">
+              <% } %>
+              <button type="button" class="btn btn-default" 
+               style="width: 33%; border-radius: 0;"
+               ng-class="{'btn-primary': module.<%= module.name %>}" 
+               ng-model="module.<%= module.name %>" 
+               btn-checkbox 
+               ng-change="selectedChanged('<%= module.name %>', module.<%= module.name %>)">
+                  <%= module.displayName %>
+              </button>
+              <% if ((i+1) % 3 === 0) { //end button group%>
+                </div>
+              <% } %>
             <% }); %>
         </div>
     </div>
     <div class="modal-footer">
-        <a class="btn btn-primary" ng-disabled="!selectedModules.length" ng-click="selectedModules.length && downloadBuild()"><i class="glyphicon glyphicon-download-alt"></i> Download {{selectedModules.length}} Modules</a>
+        <a class="btn btn-primary" ng-disabled="!selectedModules.length" ng-click="selectedModules.length && downloadBuild()">
+            <i class="glyphicon glyphicon-download-alt"></i> Download {{selectedModules.length}} Modules
+        </a>
         <a class="btn" ng-click="cancel()">Cancel</a>
     </div>
 </script>
@@ -246,5 +272,6 @@ <h3 style="text-align: center;">{{buildErrorText}}</h3>
     })();
 
 </script>
+<script src="assets/smoothscroll-angular-custom.js"></script>
 </body>
 </html>
diff --git a/src/popover/docs/demo.html b/src/popover/docs/demo.html
index 3b878483fe..8955b1918e 100644
--- a/src/popover/docs/demo.html
+++ b/src/popover/docs/demo.html
@@ -1,9 +1,5 @@
 <div ng-controller="PopoverDemoCtrl">
     <h4>Dynamic</h4>
-    <div class="form-group">
-      <label>Popup Title:</label>
-      <input type="text" ng-model="dynamicPopoverText" class="form-control">
-    </div>
     <div class="form-group">
       <label>Popup Text:</label>
       <input type="text" ng-model="dynamicPopover" class="form-control">
@@ -12,7 +8,7 @@ <h4>Dynamic</h4>
       <label>Popup Title:</label>
       <input type="text" ng-model="dynamicPopoverTitle" class="form-control">
     </div>
-    <button popover="{{dynamicPopover}}" popover-title="{{dynamicPopoverTitle}}" class="btn btn-default">{{dynamicPopoverText}}</button>
+    <button popover="{{dynamicPopover}}" popover-title="{{dynamicPopoverTitle}}" class="btn btn-default">Dynamic Popover</button>
     
     <hr />
     <h4>Positional</h4>
diff --git a/src/popover/docs/demo.js b/src/popover/docs/demo.js
index 687cce0c3c..9fca7a0f5c 100644
--- a/src/popover/docs/demo.js
+++ b/src/popover/docs/demo.js
@@ -1,5 +1,4 @@
 var PopoverDemoCtrl = function ($scope) {
   $scope.dynamicPopover = "Hello, World!";
-  $scope.dynamicPopoverText = "dynamic";
   $scope.dynamicPopoverTitle = "Title";
 };
diff --git a/src/tabs/docs/demo.html b/src/tabs/docs/demo.html
index 818e316140..d882441739 100644
--- a/src/tabs/docs/demo.html
+++ b/src/tabs/docs/demo.html
@@ -1,9 +1,12 @@
 <div ng-controller="TabsDemoCtrl">
-  Select a tab by setting active binding to true:
-  <br />
-  <button class="btn btn-default btn-sm" ng-click="tabs[0].active = true">Select second tab</button>
-  <button class="btn btn-default btn-sm" ng-click="tabs[1].active = true">Select third tab</button>
-  <button class="btn btn-default btn-sm" ng-click="tabs[1].disabled = ! tabs[1].disabled">Enable / Disable third tab</button>
+  <p>Select a tab by setting active binding to true:</p>
+  <p>
+    <button class="btn btn-default btn-sm" ng-click="tabs[0].active = true">Select second tab</button>
+    <button class="btn btn-default btn-sm" ng-click="tabs[1].active = true">Select third tab</button>
+  </p>
+  <p>
+    <button class="btn btn-default btn-sm" ng-click="tabs[1].disabled = ! tabs[1].disabled">Enable / Disable third tab</button>
+  </p>
   <hr />
 
   <tabset>
@@ -13,7 +16,7 @@
     </tab>
     <tab select="alertMe()">
       <tab-heading>
-        <i class="glyphicon glyphicon-bell"></i> Select me for alert!
+        <i class="glyphicon glyphicon-bell"></i> Alert!
       </tab-heading>
       I've got an HTML heading, and a select callback. Pretty cool!
     </tab>