Merge branch '3.0.0-wip' into bs3_homepage

Conflicts:
	dist/css/bootstrap.min.css
	getting-started.html

22 files changed, 187 insertions, 118 deletions

diff --git a/examples/carousel/carousel.css b/examples/carousel/carousel.css
index dd7dfc424..452fdfeed 100644
--- a/examples/carousel/carousel.css
+++ b/examples/carousel/carousel.css
@@ -78,25 +78,9 @@ body {
 .featurette-divider {
   margin: 80px 0; /* Space out the Bootstrap <hr> more */
 }
-.featurette {
-  padding-top: 120px; /* Vertically center images part 1: add padding above and below text. */
-  overflow: hidden; /* Vertically center images part 2: clear their floats. */
-}
-.featurette-image {
-  margin-top: -120px; /* Vertically center images part 3: negative margin up the image the same amount of the padding to center it. */
-}
-
-/* Give some space on the sides of the floated elements so text doesn't run right into it. */
-.featurette-image.pull-left {
-  margin-right: 40px;
-}
-.featurette-image.pull-right {
-  margin-left: 40px;
-}
 
 /* Thin out the marketing headings */
 .featurette-heading {
-  font-size: 50px;
   font-weight: 300;
   line-height: 1;
   letter-spacing: -1px;
@@ -131,4 +115,14 @@ body {
     line-height: 1.4;
   }
 
+  .featurette-heading {
+    font-size: 50px;
+  }
+
+}
+
+@media (min-width: 992px) {
+  .featurette-heading {
+    margin-top: 120px;
+  }
 }
diff --git a/examples/carousel/index.html b/examples/carousel/index.html
index 8f3ac988a..da7cf41a5 100644
--- a/examples/carousel/index.html
+++ b/examples/carousel/index.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="">
     <meta name="author" content="">
+    <link rel="shortcut icon" href="../../assets/ico/favicon.png">
 
     <title>Carousel Template for Bootstrap</title>
 
@@ -68,7 +69,7 @@
       </ol>
       <div class="carousel-inner">
         <div class="item active">
-          <img data-src="holder.js/1500x500/auto/#777:#7a7a7a/text:First slide" alt="">
+          <img src="data:image/png;base64," data-src="holder.js/100%x500/auto/#777:#7a7a7a/text:First slide" alt="First slide">
           <div class="container">
             <div class="carousel-caption">
               <h1>Example headline.</h1>
@@ -78,7 +79,7 @@
           </div>
         </div>
         <div class="item">
-          <img data-src="holder.js/1500x500/auto/#777:#7a7a7a/text:Second slide" alt="">
+          <img src="data:image/png;base64," data-src="holder.js/100%x500/auto/#777:#7a7a7a/text:Second slide" alt="Second slide">
           <div class="container">
             <div class="carousel-caption">
               <h1>Another example headline.</h1>
@@ -88,7 +89,7 @@
           </div>
         </div>
         <div class="item">
-          <img data-src="holder.js/1500x500/auto/#777:#7a7a7a/text:Third slide" alt="">
+          <img src="data:image/png;base64," data-src="holder.js/100%x500/auto/#777:#7a7a7a/text:Third slide" alt="Third slide">
           <div class="container">
             <div class="carousel-caption">
               <h1>One more for good measure.</h1>
@@ -113,19 +114,19 @@
       <!-- Three columns of text below the carousel -->
       <div class="row">
         <div class="col-lg-4">
-          <img class="img-circle" data-src="holder.js/140x140">
+          <img class="img-circle" src="data:image/png;base64," data-src="holder.js/140x140" alt="Generic placeholder image">
           <h2>Heading</h2>
           <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
           <p><a class="btn btn-default" href="#">View details &raquo;</a></p>
         </div><!-- /.col-lg-4 -->
         <div class="col-lg-4">
-          <img class="img-circle" data-src="holder.js/140x140">
+          <img class="img-circle" src="data:image/png;base64," data-src="holder.js/140x140" alt="Generic placeholder image">
           <h2>Heading</h2>
           <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
           <p><a class="btn btn-default" href="#">View details &raquo;</a></p>
         </div><!-- /.col-lg-4 -->
         <div class="col-lg-4">
-          <img class="img-circle" data-src="holder.js/140x140">
+          <img class="img-circle" src="data:image/png;base64," data-src="holder.js/140x140" alt="Generic placeholder image">
           <h2>Heading</h2>
           <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
           <p><a class="btn btn-default" href="#">View details &raquo;</a></p>
@@ -137,26 +138,38 @@
 
       <hr class="featurette-divider">
 
-      <div class="featurette">
-        <img class="featurette-image img-circle pull-right" data-src="holder.js/512x512">
-        <h2 class="featurette-heading">First featurette heading. <span class="text-muted">It'll blow your mind.</span></h2>
-        <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
+      <div class="row featurette">
+        <div class="col-md-7">
+          <h2 class="featurette-heading">First featurette heading. <span class="text-muted">It'll blow your mind.</span></h2>
+          <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
+        </div>
+        <div class="col-md-5">
+          <img class="featurette-image img-responsive" src="data:image/png;base64," data-src="holder.js/500x500/auto" alt="Generic placeholder image">
+        </div>
       </div>
 
       <hr class="featurette-divider">
 
-      <div class="featurette">
-        <img class="featurette-image img-circle pull-left" data-src="holder.js/512x512">
-        <h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2>
-        <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
+      <div class="row featurette">
+        <div class="col-md-5">
+          <img class="featurette-image img-responsive" src="data:image/png;base64," data-src="holder.js/500x500/auto" alt="Generic placeholder image">
+        </div>
+        <div class="col-md-7">
+          <h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2>
+          <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
+        </div>
       </div>
 
       <hr class="featurette-divider">
 
-      <div class="featurette">
-        <img class="featurette-image img-circle pull-right" data-src="holder.js/512x512">
-        <h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2>
-        <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
+      <div class="row featurette">
+        <div class="col-md-7">
+          <h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2>
+          <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
+        </div>
+        <div class="col-md-5">
+          <img class="featurette-image img-responsive" src="data:image/png;base64," data-src="holder.js/500x500/auto" alt="Generic placeholder image">
+        </div>
       </div>
 
       <hr class="featurette-divider">
@@ -173,11 +186,11 @@
     </div><!-- /.container -->
 
 
-
     <!-- Bootstrap core JavaScript
     ================================================== -->
     <!-- Placed at the end of the document so the pages load faster -->
     <script src="../../assets/js/jquery.js"></script>
+    <script src="../../assets/js/respond.min.js"></script>
     <script src="../../dist/js/bootstrap.min.js"></script>
     <script src="../../assets/js/holder.js"></script>
   </body>
diff --git a/examples/grid/index.html b/examples/grid/index.html
index 4525f7e49..3cef51e8d 100644
--- a/examples/grid/index.html
+++ b/examples/grid/index.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="">
     <meta name="author" content="">
+    <link rel="shortcut icon" href="../../assets/ico/favicon.png">
 
     <title>Grid Template for Bootstrap</title>
 
@@ -104,5 +105,10 @@
 
     </div> <!-- /container -->
 
+
+    <!-- Bootstrap core JavaScript
+    ================================================== -->
+    <!-- Placed at the end of the document so the pages load faster -->
+    <script src="../../assets/js/respond.min.js"></script>
   </body>
 </html>
diff --git a/examples/jumbotron-narrow/index.html b/examples/jumbotron-narrow/index.html
index 1d09fa852..c8b0fe920 100644
--- a/examples/jumbotron-narrow/index.html
+++ b/examples/jumbotron-narrow/index.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="">
     <meta name="author" content="">
+    <link rel="shortcut icon" href="../../assets/ico/favicon.png">
 
     <title>Narrow Jumbotron Template for Bootstrap</title>
 
@@ -63,5 +64,10 @@
 
     </div> <!-- /container -->
 
+
+    <!-- Bootstrap core JavaScript
+    ================================================== -->
+    <!-- Placed at the end of the document so the pages load faster -->
+    <script src="../../assets/js/respond.min.js"></script>
   </body>
 </html>
diff --git a/examples/jumbotron/index.html b/examples/jumbotron/index.html
index b5a5a11ec..1f8129128 100644
--- a/examples/jumbotron/index.html
+++ b/examples/jumbotron/index.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="">
     <meta name="author" content="">
+    <link rel="shortcut icon" href="../../assets/ico/favicon.png">
 
     <title>Jumbotron Template for Bootstrap</title>
 
@@ -46,8 +47,12 @@
             </li>
           </ul>
           <form class="navbar-form navbar-right">
-            <input type="text" placeholder="Email" class="form-control">
-            <input type="password" placeholder="Password" class="form-control">
+            <div class="form-group">
+              <input type="text" placeholder="Email" class="form-control">
+            </div>
+            <div class="form-group">
+              <input type="password" placeholder="Password" class="form-control">
+            </div>
             <button type="submit" class="btn">Sign in</button>
           </form>
         </div><!--/.navbar-collapse -->
@@ -93,7 +98,12 @@
 
     </div> <!-- /container -->
 
+
+    <!-- Bootstrap core JavaScript
+    ================================================== -->
+    <!-- Placed at the end of the document so the pages load faster -->
     <script src="../../assets/js/jquery.js"></script>
+    <script src="../../assets/js/respond.min.js"></script>
     <script src="../../dist/js/bootstrap.min.js"></script>
   </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/examples/jumbotron/jumbotron.css b/examples/jumbotron/jumbotron.css
index 17d253be4..594e2c794 100644
--- a/examples/jumbotron/jumbotron.css
+++ b/examples/jumbotron/jumbotron.css
@@ -4,12 +4,6 @@ body {
   padding-bottom: 20px;
 }
 
-/* Set widths on the navbar form inputs since otherwise they're 100% wide */
-.navbar-form input[type="text"],
-.navbar-form input[type="password"] {
-  width: 180px;
-}
-
 /* Wrapping element */
 /* Set some basic padding to keep content from hitting the edges */
 .body-content {
diff --git a/examples/justified-nav/index.html b/examples/justified-nav/index.html
index de9ce387e..431b2780d 100644
--- a/examples/justified-nav/index.html
+++ b/examples/justified-nav/index.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="">
     <meta name="author" content="">
+    <link rel="shortcut icon" href="../../assets/ico/favicon.png">
 
     <title>Justified Nav Template for Bootstrap</title>
 
@@ -21,7 +22,7 @@
 
       <div class="masthead">
         <h3 class="text-muted">Project name</h3>
-        <ul class="nav navbar-nav nav-justified">
+        <ul class="nav nav-justified">
           <li class="active"><a href="#">Home</a></li>
           <li><a href="#">Projects</a></li>
           <li><a href="#">Services</a></li>
@@ -46,17 +47,17 @@
           <div class="col-lg-4">
             <h2>Heading</h2>
             <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
-            <p><a class="btn btn-default" href="#">View details &raquo;</a></p>
+            <p><a class="btn btn-primary" href="#">View details &raquo;</a></p>
           </div>
           <div class="col-lg-4">
             <h2>Heading</h2>
             <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
-            <p><a class="btn btn-default" href="#">View details &raquo;</a></p>
+            <p><a class="btn btn-primary" href="#">View details &raquo;</a></p>
          </div>
           <div class="col-lg-4">
             <h2>Heading</h2>
             <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>
-            <p><a class="btn btn-default" href="#">View details &raquo;</a></p>
+            <p><a class="btn btn-primary" href="#">View details &raquo;</a></p>
           </div>
         </div>
 
@@ -69,5 +70,10 @@
 
     </div> <!-- /container -->
 
+
+    <!-- Bootstrap core JavaScript
+    ================================================== -->
+    <!-- Placed at the end of the document so the pages load faster -->
+    <script src="../../assets/js/respond.min.js"></script>
   </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/examples/justified-nav/justified-nav.css b/examples/justified-nav/justified-nav.css
index 89822eca2..be983ba6b 100644
--- a/examples/justified-nav/justified-nav.css
+++ b/examples/justified-nav/justified-nav.css
@@ -4,17 +4,16 @@ body {
 
 /* Everything but the jumbotron gets side spacing for mobile-first views */
 .masthead,
-.body-content,
 .footer {
   padding-left: 15px;
   padding-right: 15px;
 }
 
 .footer {
-  border-top: 1px solid #ddd;
-  margin-top: 30px;
-  padding-top: 29px;
-  padding-bottom: 30px;
+  border-top: 1px solid #eee;
+  margin-top: 40px;
+  padding-top: 40px;
+  padding-bottom: 40px;
 }
 
 /* Main marketing message and sign up button */
@@ -28,8 +27,8 @@ body {
 }
 
 /* Customize the nav-justified links to be fill the entire space of the .navbar */
+
 .nav-justified {
-  max-height: 50px;
   background-color: #eee;
   border-radius: 5px;
   border: 1px solid #ccc;
@@ -40,8 +39,7 @@ body {
   color: #777;
   font-weight: bold;
   text-align: center;
-  border-left: 1px solid rgba(255,255,255,.75);
-  border-right: 1px solid rgba(0,0,0,.1);
+  border-bottom: 1px solid #d5d5d5;
   background-color: #e5e5e5; /* Old browsers */
   background-repeat: repeat-x; /* Repeat the gradient */
   background-image: -moz-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%); /* FF3.6+ */
@@ -52,23 +50,41 @@ body {
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
   background-image: linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* W3C */
 }
-.nav-justified > .active > a {
+.nav-justified > .active > a,
+.nav-justified > .active > a:hover,
+.nav-justified > .active > a:focus {
   background-color: #ddd;
   background-image: none;
   box-shadow: inset 0 3px 7px rgba(0,0,0,.15);
 }
 .nav-justified > li:first-child > a {
-  border-left: 0;
-  border-top-left-radius: 5px;
-  border-bottom-left-radius: 5px;
+  border-radius: 5px 5px 0 0;
 }
 .nav-justified > li:last-child > a {
-  border-right: 0;
-  border-top-right-radius: 5px;
-  border-bottom-right-radius: 5px;
+  border-bottom: 0;
+  border-radius: 0 0 5px 5px;
+}
+
+@media (min-width: 768px) {
+  .nav-justified {
+    max-height: 52px;
+  }
+  .nav-justified > li > a {
+    border-left: 1px solid #fff;
+    border-right: 1px solid #d5d5d5;
+  }
+  .nav-justified > li:first-child > a {
+    border-left: 0;
+    border-radius: 5px 0 0 5px;
+  }
+  .nav-justified > li:last-child > a {
+    border-radius: 0 5px 5px 0;
+    border-right: 0;
+  }
 }
 
 
+
 /* Responsive: Portrait tablets and up */
 @media screen and (min-width: 768px) {
   /* Remove the padding we set earlier */
diff --git a/examples/navbar-fixed-top/index.html b/examples/navbar-fixed-top/index.html
index 9bc75b5f2..2340bcfae 100644
--- a/examples/navbar-fixed-top/index.html
+++ b/examples/navbar-fixed-top/index.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="">
     <meta name="author" content="">
+    <link rel="shortcut icon" href="../../assets/ico/favicon.png">
 
     <title>Fixed Top Navbar Example for Bootstrap</title>
 
@@ -47,9 +48,9 @@
             </li>
           </ul>
           <ul class="nav navbar-nav navbar-right">
-            <li><a href="http://examples.getbootstrap.com/navbar/index.html">Default</a></li>
-            <li><a href="http://examples.getbootstrap.com/navbar-static-top/index.html">Static top</a></li>
-            <li class="active"><a href="http://examples.getbootstrap.com/navbar-fixed-top/index.html">Fixed top</a></li>
+            <li><a href="../navbar/">Default</a></li>
+            <li><a href="../navbar-static-top/">Static top</a></li>
+            <li class="active"><a href="./">Fixed top</a></li>
           </ul>
         </div><!--/.nav-collapse -->
       </div>
@@ -60,18 +61,21 @@
       <!-- Main component for a primary marketing message or call to action -->
       <div class="jumbotron">
         <h1>Navbar example</h1>
-        <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
+        <p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
+        <p>To see the difference between static and fixed top navbars, just scroll.</p>
         <p>
-          <a class="btn btn-large btn-primary" href="http://getbootstrap.com/components/#navbar">View navbar docs &raquo;</a>
+          <a class="btn btn-large btn-primary" href="../../components/#navbar">View navbar docs &raquo;</a>
         </p>
       </div>
 
     </div> <!-- /container -->
 
+
     <!-- Bootstrap core JavaScript
     ================================================== -->
     <!-- Placed at the end of the document so the pages load faster -->
     <script src="../../assets/js/jquery.js"></script>
+    <script src="../../assets/js/respond.min.js"></script>
     <script src="../../dist/js/bootstrap.min.js"></script>
   </body>
 </html>
diff --git a/examples/navbar-fixed-top/navbar-fixed-top.css b/examples/navbar-fixed-top/navbar-fixed-top.css
index 1e23e9e5f..b0c883742 100644
--- a/examples/navbar-fixed-top/navbar-fixed-top.css
+++ b/examples/navbar-fixed-top/navbar-fixed-top.css
@@ -1,7 +1,4 @@
 body {
-padding-top: 60px;
+  min-height: 2000px;
+  padding-top: 70px;
 }
-
-.jumbotron {
-margin-top: 20px;
-}
\ No newline at end of file
diff --git a/examples/navbar-static-top/index.html b/examples/navbar-static-top/index.html
index 1a49c8229..7bf1deccb 100644
--- a/examples/navbar-static-top/index.html
+++ b/examples/navbar-static-top/index.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="">
     <meta name="author" content="">
+    <link rel="shortcut icon" href="../../assets/ico/favicon.png">
 
     <title>Static Top Navbar Example for Bootstrap</title>
 
@@ -47,9 +48,9 @@
             </li>
           </ul>
           <ul class="nav navbar-nav navbar-right">
-            <li><a href="http://examples.getbootstrap.com/navbar/index.html">Default</a></li>
-            <li class="active"><a href="http://examples.getbootstrap.com/navbar-static-top/index.html">Static top</a></li>
-            <li><a href="http://examples.getbootstrap.com/navbar-fixed-top/index.html">Fixed top</a></li>
+            <li><a href="../navbar/">Default</a></li>
+            <li class="active"><a href="./">Static top</a></li>
+            <li><a href="../navbar-fixed-top/">Fixed top</a></li>
           </ul>
         </div><!--/.nav-collapse -->
       </div>
@@ -61,18 +62,21 @@
       <!-- Main component for a primary marketing message or call to action -->
       <div class="jumbotron">
         <h1>Navbar example</h1>
-        <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
+        <p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
+        <p>To see the difference between static and fixed top navbars, just scroll.</p>
         <p>
-          <a class="btn btn-large btn-primary" href="http://getbootstrap.com/components/#navbar">View navbar docs &raquo;</a>
+          <a class="btn btn-large btn-primary" href="../../components/#navbar">View navbar docs &raquo;</a>
         </p>
       </div>
 
     </div> <!-- /container -->
 
+
     <!-- Bootstrap core JavaScript
     ================================================== -->
     <!-- Placed at the end of the document so the pages load faster -->
     <script src="../../assets/js/jquery.js"></script>
+    <script src="../../assets/js/respond.min.js"></script>
     <script src="../../dist/js/bootstrap.min.js"></script>
   </body>
 </html>
diff --git a/examples/navbar-static-top/navbar-static-top.css b/examples/navbar-static-top/navbar-static-top.css
index 0e34ecc69..59a37e75a 100644
--- a/examples/navbar-static-top/navbar-static-top.css
+++ b/examples/navbar-static-top/navbar-static-top.css
@@ -1,3 +1,7 @@
-.jumbotron {
-margin-top: 30px;
+body {
+  min-height: 2000px;
+}
+
+.navbar-static-top {
+  margin-bottom: 19px;
 }
\ No newline at end of file
diff --git a/examples/navbar/index.html b/examples/navbar/index.html
index e89c83113..ee2ba19b6 100644
--- a/examples/navbar/index.html
+++ b/examples/navbar/index.html
@@ -49,9 +49,9 @@
               </li>
             </ul>
             <ul class="nav navbar-nav navbar-right">
-              <li class="active"><a href="http://examples.getbootstrap.com/navbar/index.html">Default</a></li>
-              <li><a href="http://examples.getbootstrap.com/navbar-static-top/index.html">Static top</a></li>
-              <li><a href="http://examples.getbootstrap.com/navbar-fixed-top/index.html">Fixed top</a></li>
+              <li class="active"><a href="./">Default</a></li>
+              <li><a href="../navbar-static-top/">Static top</a></li>
+              <li><a href="../navbar-fixed-top/">Fixed top</a></li>
             </ul>
           </div><!--/.nav-collapse -->
         </div>
@@ -62,16 +62,18 @@
         <h1>Navbar example</h1>
         <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
         <p>
-          <a class="btn btn-large btn-primary" href="http://getbootstrap.com/components/#navbar">View navbar docs &raquo;</a>
+          <a class="btn btn-large btn-primary" href="../../components/#navbar">View navbar docs &raquo;</a>
         </p>
       </div>
 
     </div> <!-- /container -->
 
+
     <!-- Bootstrap core JavaScript
     ================================================== -->
     <!-- Placed at the end of the document so the pages load faster -->
     <script src="../../assets/js/jquery.js"></script>
+    <script src="../../assets/js/respond.min.js"></script>
     <script src="../../dist/js/bootstrap.min.js"></script>
   </body>
 </html>
diff --git a/examples/offcanvas/index.html b/examples/offcanvas/index.html
index e6c186462..e9c905bd2 100644
--- a/examples/offcanvas/index.html
+++ b/examples/offcanvas/index.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="">
     <meta name="author" content="">
+    <link rel="shortcut icon" href="../../assets/ico/favicon.png">
 
     <title>Off Canvas Template for Bootstrap</title>
 
@@ -81,7 +82,7 @@
           </div><!--/row-->
         </div><!--/span-->
 
-        <div class="col-xs-12 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
+        <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
           <div class="well sidebar-nav">
             <ul class="nav">
               <li>Sidebar</li>
@@ -108,9 +109,14 @@
 
     </div><!--/.container-->
 
-    <!-- jQuery and plugin -->
+
+
+    <!-- Bootstrap core JavaScript
+    ================================================== -->
+    <!-- Placed at the end of the document so the pages load faster -->
     <script src="../../assets/js/jquery.js"></script>
+    <script src="../../assets/js/respond.min.js"></script>
     <script src="../../dist/js/bootstrap.min.js"></script>
     <script src="offcanvas.js"></script>
   </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/examples/offcanvas/offcanvas.css b/examples/offcanvas/offcanvas.css
index e83e71824..df60d6af6 100644
--- a/examples/offcanvas/offcanvas.css
+++ b/examples/offcanvas/offcanvas.css
@@ -17,7 +17,6 @@ footer {
 @media screen and (max-width: 768px) {
   .row-offcanvas {
     position: relative;
-    overflow: hidden; /* Needed for Internet Explorer */
     -webkit-transition: all 0.25s ease-out;
     -moz-transition: all 0.25s ease-out;
     transition: all 0.25s ease-out;
@@ -25,24 +24,25 @@ footer {
 
   .row-offcanvas-right
   .sidebar-offcanvas {
-    right: -58.333333333333336%; /* 6 columns */
+    right: -50%; /* 6 columns */
   }
 
   .row-offcanvas-left
   .sidebar-offcanvas {
-    left: -58.333333333333336%; /* 6 columns */
+    left: -50%; /* 6 columns */
   }
 
   .row-offcanvas-right.active {
-    right: 58.333333333333336%; /* 6 columns */
+    right: 50%; /* 6 columns */
   }
 
   .row-offcanvas-left.active {
-    left: 58.333333333333336%; /* 6 columns */
+    left: 50%; /* 6 columns */
   }
 
   .sidebar-offcanvas {
     position: absolute;
-    width: 58.333333333333336%; /* 6 columns */
+    top: 0;
+    width: 50%; /* 6 columns */
   }
 }
\ No newline at end of file
diff --git a/examples/screenshots/justified-nav.jpg b/examples/screenshots/justified-nav.jpg
new file mode 100644
index 000000000..01689c3ca
--- /dev/null
+++ b/examples/screenshots/justified-nav.jpg
diff --git a/examples/signin/index.html b/examples/signin/index.html
index 9521fb437..fefb73386 100644
--- a/examples/signin/index.html
+++ b/examples/signin/index.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="">
     <meta name="author" content="">
+    <link rel="shortcut icon" href="../../assets/ico/favicon.png">
 
     <title>Signin Template for Bootstrap</title>
 
@@ -31,5 +32,10 @@
 
     </div> <!-- /container -->
 
+
+    <!-- Bootstrap core JavaScript
+    ================================================== -->
+    <!-- Placed at the end of the document so the pages load faster -->
+    <script src="../../assets/js/respond.min.js"></script>
   </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/examples/starter-template/index.html b/examples/starter-template/index.html
index 008125d14..65693edff 100644
--- a/examples/starter-template/index.html
+++ b/examples/starter-template/index.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="">
     <meta name="author" content="">
+    <link rel="shortcut icon" href="../../assets/ico/favicon.png">
 
     <title>Starter Template for Bootstrap</title>
 
@@ -46,7 +47,12 @@
 
     </div><!-- /.container -->
 
+
+    <!-- Bootstrap core JavaScript
+    ================================================== -->
+    <!-- Placed at the end of the document so the pages load faster -->
     <script src="../../assets/js/jquery.js"></script>
+    <script src="../../assets/js/respond.min.js"></script>
     <script src="../../dist/js/bootstrap.min.js"></script>
   </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/examples/sticky-footer-navbar/index.html b/examples/sticky-footer-navbar/index.html
index a5182eeaf..0be6de516 100644
--- a/examples/sticky-footer-navbar/index.html
+++ b/examples/sticky-footer-navbar/index.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="">
     <meta name="author" content="">
+    <link rel="shortcut icon" href="../../assets/ico/favicon.png">
 
     <title>Sticky Footer Navbar Template for Bootstrap</title>
 
@@ -69,9 +70,12 @@
       </div>
     </div>
 
+
     <!-- Bootstrap core JavaScript
     ================================================== -->
+    <!-- Placed at the end of the document so the pages load faster -->
     <script src="../../assets/js/jquery.js"></script>
+    <script src="../../assets/js/respond.min.js"></script>
     <script src="../../dist/js/bootstrap.min.js"></script>
   </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/examples/sticky-footer-navbar/sticky-footer-navbar.css b/examples/sticky-footer-navbar/sticky-footer-navbar.css
index f12d7f386..6978a9997 100644
--- a/examples/sticky-footer-navbar/sticky-footer-navbar.css
+++ b/examples/sticky-footer-navbar/sticky-footer-navbar.css
@@ -24,17 +24,6 @@ body {
   background-color: #f5f5f5;
 }
 
-/* Lastly, apply responsive CSS fixes as necessary */
-@media (max-width: 767px) {
-  #footer {
-    margin-left: -20px;
-    margin-right: -20px;
-    padding-left: 20px;
-    padding-right: 20px;
-  }
-}
-
-
 
 /* Custom page CSS
 -------------------------------------------------- */
@@ -47,6 +36,11 @@ body {
   margin: 20px 0;
 }
 
+#footer > .container {
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
 code {
   font-size: 80%;
 }
\ No newline at end of file
diff --git a/examples/sticky-footer/index.html b/examples/sticky-footer/index.html
index 8505d7637..20e902ddd 100644
--- a/examples/sticky-footer/index.html
+++ b/examples/sticky-footer/index.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="">
     <meta name="author" content="">
+    <link rel="shortcut icon" href="../../assets/ico/favicon.png">
 
     <title>Sticky Footer Template for Bootstrap</title>
 
@@ -36,5 +37,10 @@
       </div>
     </div>
 
+
+    <!-- Bootstrap core JavaScript
+    ================================================== -->
+    <!-- Placed at the end of the document so the pages load faster -->
+    <script src="../../assets/js/respond.min.js"></script>
   </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/examples/sticky-footer/sticky-footer.css b/examples/sticky-footer/sticky-footer.css
index 3da136e7c..45be6ccbc 100644
--- a/examples/sticky-footer/sticky-footer.css
+++ b/examples/sticky-footer/sticky-footer.css
@@ -24,15 +24,6 @@ body {
   background-color: #f5f5f5;
 }
 
-/* Lastly, apply responsive CSS fixes as necessary */
-@media (max-width: 767px) {
-  #footer {
-    margin-left: -20px;
-    margin-right: -20px;
-    padding-left: 20px;
-    padding-right: 20px;
-  }
-}
 
 /* Custom page CSS
 -------------------------------------------------- */