From 70e81e6f55ad77f3777e87c4edd646a2f5ac8bee Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 1 Jul 2012 08:42:09 -0700 Subject: [PATCH 1/9] new jumbotron --- docs/assets/css/bootstrap-responsive.css | 5 ++ docs/assets/css/bootstrap.css | 39 ++++++++++------ docs/assets/css/docs.css | 58 ++++++++++++++++++++++++ docs/index.html | 15 +++++- docs/templates/pages/index.mustache | 15 +++++- less/buttons.less | 4 +- less/variables.less | 2 +- 7 files changed, 120 insertions(+), 18 deletions(-) diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css index 10831d904..f05241725 100644 --- a/docs/assets/css/bootstrap-responsive.css +++ b/docs/assets/css/bootstrap-responsive.css @@ -15,6 +15,7 @@ .clearfix:before, .clearfix:after { display: table; + line-height: 0; content: ""; } @@ -94,6 +95,7 @@ .row:before, .row:after { display: table; + line-height: 0; content: ""; } .row:after { @@ -187,6 +189,7 @@ .row-fluid:before, .row-fluid:after { display: table; + line-height: 0; content: ""; } .row-fluid:after { @@ -434,6 +437,7 @@ .row:before, .row:after { display: table; + line-height: 0; content: ""; } .row:after { @@ -527,6 +531,7 @@ .row-fluid:before, .row-fluid:after { display: table; + line-height: 0; content: ""; } .row-fluid:after { diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index f0f7dd77c..e4787ae1c 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -130,6 +130,7 @@ textarea { .clearfix:before, .clearfix:after { display: table; + line-height: 0; content: ""; } @@ -181,6 +182,7 @@ a:hover { .row:before, .row:after { display: table; + line-height: 0; content: ""; } @@ -303,6 +305,7 @@ a:hover { .row-fluid:before, .row-fluid:after { display: table; + line-height: 0; content: ""; } @@ -515,6 +518,7 @@ a:hover { .container:before, .container:after { display: table; + line-height: 0; content: ""; } @@ -531,6 +535,7 @@ a:hover { .container-fluid:before, .container-fluid:after { display: table; + line-height: 0; content: ""; } @@ -1331,6 +1336,7 @@ select:focus:required:invalid:focus { .form-actions:before, .form-actions:after { display: table; + line-height: 0; content: ""; } @@ -1600,6 +1606,7 @@ legend + .control-group { .form-horizontal .control-group:before, .form-horizontal .control-group:after { display: table; + line-height: 0; content: ""; } @@ -2758,9 +2765,9 @@ button.close { filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0); filter: progid:dximagetransform.microsoft.gradient(enabled=false); *zoom: 1; - -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); - -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05); + -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05); } .btn:hover, @@ -2807,9 +2814,9 @@ button.close { background-color: #d9d9d9 \9; background-image: none; outline: 0; - -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); - -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); - box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); + -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05); + -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05); + box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05); } .btn.disabled, @@ -3029,17 +3036,17 @@ button.close { } .btn-inverse { - background-color: #414141; + background-color: #363636; *background-color: #222222; - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#555555), to(#222222)); - background-image: -webkit-linear-gradient(top, #555555, #222222); - background-image: -o-linear-gradient(top, #555555, #222222); - background-image: linear-gradient(top, #555555, #222222); - background-image: -moz-linear-gradient(top, #555555, #222222); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#444444), to(#222222)); + background-image: -webkit-linear-gradient(top, #444444, #222222); + background-image: -o-linear-gradient(top, #444444, #222222); + background-image: linear-gradient(top, #444444, #222222); + background-image: -moz-linear-gradient(top, #444444, #222222); background-repeat: repeat-x; border-color: #222222 #222222 #000000; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff555555', endColorstr='#ff222222', GradientType=0); + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff444444', endColorstr='#ff222222', GradientType=0); filter: progid:dximagetransform.microsoft.gradient(enabled=false); } @@ -3468,6 +3475,7 @@ input[type="submit"].btn.btn-mini { .nav-tabs:after, .nav-pills:after { display: table; + line-height: 0; content: ""; } @@ -3641,6 +3649,7 @@ input[type="submit"].btn.btn-mini { .tabbable:before, .tabbable:after { display: table; + line-height: 0; content: ""; } @@ -3845,6 +3854,7 @@ input[type="submit"].btn.btn-mini { .navbar-form:before, .navbar-form:after { display: table; + line-height: 0; content: ""; } @@ -4373,6 +4383,7 @@ input[type="submit"].btn.btn-mini { .pager:before, .pager:after { display: table; + line-height: 0; content: ""; } @@ -4522,6 +4533,7 @@ input[type="submit"].btn.btn-mini { .modal-footer:before, .modal-footer:after { display: table; + line-height: 0; content: ""; } @@ -4814,6 +4826,7 @@ input[type="submit"].btn.btn-mini { .thumbnails:before, .thumbnails:after { display: table; + line-height: 0; content: ""; } diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 772fee2c3..1328177a4 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -775,3 +775,61 @@ form.bs-docs-example { float: none; } } + + + + +.navbar { +} +.jumbo { + padding: 100px 0; + margin-top: -60px; + background-color: #222; + color: #fff; + text-align: center; + text-shadow: 0 1px 0 rgba(0,0,0,.1), 0 0 30px rgba(0,0,0,.075); + + background: #c9cabc; /* Old browsers */ +background: -moz-linear-gradient(-45deg, #c9cabc 0%, #68686d 100%); /* FF3.6+ */ +background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#c9cabc), color-stop(100%,#68686d)); /* Chrome,Safari4+ */ +background: -webkit-linear-gradient(-45deg, #c9cabc 0%,#68686d 100%); /* Chrome10+,Safari5.1+ */ +background: -o-linear-gradient(-45deg, #c9cabc 0%,#68686d 100%); /* Opera 11.10+ */ +background: -ms-linear-gradient(-45deg, #c9cabc 0%,#68686d 100%); /* IE10+ */ +background: linear-gradient(135deg, #c9cabc 0%,#68686d 100%); /* W3C */ +filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9cabc', endColorstr='#68686d',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ + + xborder-bottom: 1px solid #68686d; + + -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15); + -moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15); + box-shadow: inset 0 -1px 0 rgba(0,0,0,.15); +} +.jumbo h1 { + font-size: 120px; + font-weight: 200; + line-height: 1; + margin: 0 0 5px; + letter-spacing: -2px; +} +.jumbo p { + margin-bottom: 30px; + font-size: 40px; + font-weight: 200; + line-height: 1.25; +} +.jumbo .btn { + font-size: 20px; + padding: 14px 24px; + margin: 0 10px 30px 0; + -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 3px rgba(0,0,0,.2); + -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 3px rgba(0,0,0,.2); + box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 3px rgba(0,0,0,.2); +} +.jumbo .btn:active { + -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.25); + -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.25); + box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.25); +} + + + diff --git a/docs/index.html b/docs/index.html index 4e028a13f..f2b6c35d7 100644 --- a/docs/index.html +++ b/docs/index.html @@ -75,9 +75,22 @@
+
+ +
+
+

Bootstrap

+

Sleek, intuitive, and powerful front-end framework for faster and easier web development.

+ Download Bootstrap (v2.1.0) +
+
+ +
+ + -
+ -
-
-

Designed for everyone, everywhere.

+ +

Introducing Bootstrap.

Need reasons to love Bootstrap? Look no further.

-
-
- -

Built for and by nerds

-

We love building awesome products on the web just like you, so we made Bootstrap. No matter your skill level, use it as a complete kit or use to start something more complex.

- -

Cross-everything

-

Originally built with only modern browsers in mind, Bootstrap has evolved to include support for all major browsers (even IE7!) and, with Bootstrap 2, tablets and smartphones, too.

- - -

12-column grid

-

Grid systems aren't everything, but having a durable and flexible one at the core of your work can make development much simpler. Use our built-in grid classes or roll your own.

- - -

Responsive design

-

Beginning with Bootstrap 2, components are scaled according to a range of resolutions and devices to provide a consistent experience, no matter what.

+
+
+ +

Built by nerds, for nerds.

+

Built at Twitter by @mdo and @fat, Bootstrap utilizes LESS CSS, is compiled via Node, and is managed through GitHub to help nerds do awesome stuff on the web.

-
- +
+ +

Designed for everyone.

+

Bootstrap was made to not only look and behave great in the latest desktop browsers (as well as IE7!), but in tablet and smartphone browsers via responsive CSS as well.

+
+
+ +

Packed with features.

+

Utilize the 12-column responsive grid, dozens of components, javascript plugins, typography, form controls, and even a web-based Customizer to make Bootstrap your own.

+
+
+ + +
+-->

Built with Bootstrap.

For even more sites built with Bootstrap, visit the unofficial Tumblr or browse the examples.

- +
+ +
diff --git a/docs/templates/pages/index.mustache b/docs/templates/pages/index.mustache index e2a35003d..b6c4b0112 100644 --- a/docs/templates/pages/index.mustache +++ b/docs/templates/pages/index.mustache @@ -4,7 +4,12 @@

Bootstrap

Sleek, intuitive, and powerful front-end framework for faster and easier web development.

- {{_i}}Download Bootstrap (v2.1.0){{/i}} +

{{_i}}Download Bootstrap{{/i}}

+
@@ -48,31 +53,30 @@
-
-
-

{{_i}}Designed for everyone, everywhere.{{/i}}

+ +

{{_i}}Introducing Bootstrap.{{/i}}

{{_i}}Need reasons to love Bootstrap? Look no further.{{/i}}

-
-
- -

{{_i}}Built for and by nerds{{/i}}

-

{{_i}}We love building awesome products on the web just like you, so we made Bootstrap. No matter your skill level, use it as a complete kit or use to start something more complex.{{/i}}

- -

{{_i}}Cross-everything{{/i}}

-

{{_i}}Originally built with only modern browsers in mind, Bootstrap has evolved to include support for all major browsers (even IE7!) and, with Bootstrap 2, tablets and smartphones, too.{{/i}}

- - -

{{_i}}12-column grid{{/i}}

-

{{_i}}Grid systems aren't everything, but having a durable and flexible one at the core of your work can make development much simpler. Use our built-in grid classes or roll your own.{{/i}}

- - -

{{_i}}Responsive design{{/i}}

-

{{_i}}Beginning with Bootstrap 2, components are scaled according to a range of resolutions and devices to provide a consistent experience, no matter what.{{/i}}

+
+
+ +

{{_i}}Built by nerds, for nerds.{{/i}}

+

{{_i}}Built at Twitter by @mdo and @fat, Bootstrap utilizes LESS CSS, is compiled via Node, and is managed through GitHub to help nerds do awesome stuff on the web.{{/i}}

-
- +
+ +

{{_i}}Designed for everyone.{{/i}}

+

{{_i}}Bootstrap was made to not only look and behave great in the latest desktop browsers (as well as IE7!), but in tablet and smartphone browsers via responsive CSS as well.{{/i}}

+
+
+ +

{{_i}}Packed with features.{{/i}}

+

{{_i}}Utilize the 12-column responsive grid, dozens of components, javascript plugins, typography, form controls, and even a web-based Customizer to make Bootstrap your own.{{/i}}

+
+
+ + +
+-->

{{_i}}Built with Bootstrap.{{/i}}

{{_i}}For even more sites built with Bootstrap, visit the unofficial Tumblr or browse the examples.{{/i}}

- +
+ +
diff --git a/less/buttons.less b/less/buttons.less index 389c48448..c46b7cf3e 100644 --- a/less/buttons.less +++ b/less/buttons.less @@ -26,7 +26,7 @@ border-bottom-color: darken(@btnBorder, 10%); .border-radius(4px); .ie7-restore-left-whitespace(); // Give IE7 some love - .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 2px rgba(0,0,0,.05)"); + .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.15), 0 1px 2px rgba(0,0,0,.05)"); } // Hover state diff --git a/less/navbar.less b/less/navbar.less index 38edac288..a5d1e7e65 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -383,11 +383,18 @@ } .navbar-subnav .navbar-inner { padding: 0; - #gradient > .vertical(#f9f9f9, #f1f1f1); + #gradient > .vertical(#ffffff, #f1f1f1); .box-shadow(none); border: 1px solid #e5e5e5; } +// Lighten vertical dividers +.navbar-subnav .divider-vertical { + background-color: #f1f1f1; + border-right-color: #ffffff; +} + + // Change link colors back .navbar-subnav .nav > li > a { color: @linkColor; @@ -401,7 +408,10 @@ .navbar-subnav .nav > .active > a, .navbar-subnav .nav > .active > a:hover { color: #777; - background-color: #e5e5e5; + background-color: #eee; + -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.5), 1px 0 0 rgba(255,255,255,.5); + -moz-box-shadow: -1px 0 0 rgba(255,255,255,.5), 1px 0 0 rgba(255,255,255,.5); + box-shadow: -1px 0 0 rgba(255,255,255,.5), 1px 0 0 rgba(255,255,255,.5); } // Dropdown carets diff --git a/less/variables.less b/less/variables.less index dcd2d5558..5d900164c 100644 --- a/less/variables.less +++ b/less/variables.less @@ -73,7 +73,7 @@ @btnBorder: #ccc; @btnPrimaryBackground: @linkColor; -@btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 15%); +@btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 20%); @btnInfoBackground: #5bc0de; @btnInfoBackgroundHighlight: #2f96b4; @@ -155,8 +155,8 @@ // Navbar // ------------------------- @navbarHeight: 40px; -@navbarBackground: @grayDarker; -@navbarBackgroundHighlight: @grayDark; +@navbarBackground: #111; +@navbarBackgroundHighlight: #222; @navbarText: @grayLight; @navbarLinkColor: @grayLight; From a645664e503475af2b8ed6f81f6860aad188f327 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 5 Jul 2012 10:12:15 -0700 Subject: [PATCH 4/9] update thumbnails to fix display issues and refine aesthetics --- docs/assets/css/bootstrap.css | 9 +- docs/assets/css/docs.css | 4 +- docs/components.html | 115 +++++++++++++---------- docs/templates/pages/components.mustache | 115 +++++++++++++---------- less/thumbnails.less | 5 +- 5 files changed, 144 insertions(+), 104 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 7520a3b04..74f7094d3 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -4855,14 +4855,14 @@ input[type="submit"].btn.btn-mini { .thumbnail { display: block; padding: 4px; - line-height: 1; + line-height: 20px; border: 1px solid #ddd; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; - -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); - -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); + -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055); + -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055); } a.thumbnail:hover { @@ -4881,6 +4881,7 @@ a.thumbnail:hover { .thumbnail .caption { padding: 9px; + color: #555555; } .label, diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index b003b89d5..7b12bb5da 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -33,10 +33,10 @@ body { p { margin-bottom: 15px; } -li { +/*li { line-height: 25px; } - +*/ /* Code in headings */ h3 code { font-size: 14px; diff --git a/docs/components.html b/docs/components.html index 0c81aefa5..ed1ba953a 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1679,53 +1679,67 @@

Default thumbnails

By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.

- +
+ +

Highly customizable

With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.

-
    -
  • -
    - -
    -
    Thumbnail label
    -

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    -

    Action Action

    +
    +
      +
    • +
      + +
      +

      Thumbnail label

      +

      Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

      +

      Action Action

      +
      -
    -
    • -
  • -
    - -
    -
    Thumbnail label
    -

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    -

    Action Action

    +
    • +
  • +
    + +
    +

    Thumbnail label

    +

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    +

    Action Action

    +
    -
- - + +
  • +
    + +
    +

    Thumbnail label

    +

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    +

    Action Action

    +
    +
    +
    • + +

    Why use thumbnails

    Thumbnails (previously .media-grid up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.

    @@ -1740,9 +1754,9 @@

    As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup for linked images:

     <ul class="thumbnails">
-  <li class="span3">
+  <li class="span4">
     <a href="#" class="thumbnail">
-      <img src="http://placehold.it/260x180" alt="">
+      <img src="http://placehold.it/300x200" alt="">
     </a>
   </li>
   ...
@@ -1751,11 +1765,11 @@
   
    For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <a> for a <div> like so:
    
 
     <ul class="thumbnails">
-  <li class="span3">
+  <li class="span4">
     <div class="thumbnail">
-      <img src="http://placehold.it/260x180" alt="">
-      <h5>Thumbnail label</h5>
-      <p>Thumbnail caption right here...</p>
+      <img src="http://placehold.it/300x200" alt="">
+      <h3>Thumbnail label</h3>
+      <p>Thumbnail caption...</p>
     </div>
   </li>
   ...
@@ -1795,6 +1809,11 @@
         
       
     
+    
  • 
+      
+        
+      
+    
    • 
   
 
 
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 4fc982e5b..ea6cc4516 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -1602,53 +1602,67 @@
 
   
    {{_i}}Default thumbnails{{/i}}
    
   
    {{_i}}By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.{{/i}}
    
-  
+  
    
+    
+  
    
 
   
    {{_i}}Highly customizable{{/i}}
    
   
    {{_i}}With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.{{/i}}
    
-  
      
-    
    • 
-      
      
-        
-        
      
-          
      {{_i}}Thumbnail label{{/i}}
      
-          
      Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
      
-          
      {{_i}}Action{{/i}} {{_i}}Action{{/i}}
      
+  
      
+    
        
+      
      • 
+        
        
+          
+          
        
+            
        {{_i}}Thumbnail label{{/i}}
        
+            
        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
        
+            
        {{_i}}Action{{/i}} {{_i}}Action{{/i}}
        
+          
        
         
        
-      
      
-    
      • 
-    
    • 
-      
      
-        
-        
      
-          
      {{_i}}Thumbnail label{{/i}}
      
-          
      Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
      
-          
      {{_i}}Action{{/i}} {{_i}}Action{{/i}}
      
+      
      • 
+      
    • 
+        
      
+          
+          
      
+            
      {{_i}}Thumbnail label{{/i}}
      
+            
      Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
      
+            
      {{_i}}Action{{/i}} {{_i}}Action{{/i}}
      
+          
      
         
      
-
    - - + +
  • +
    + +
    +

    {{_i}}Thumbnail label{{/i}}

    +

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    +

    {{_i}}Action{{/i}} {{_i}}Action{{/i}}

    +
    +
    +
    • + +

    {{_i}}Why use thumbnails{{/i}}

    {{_i}}Thumbnails (previously .media-grid up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.{{/i}}

    @@ -1663,9 +1677,9 @@

    {{_i}}As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup for linked images:{{/i}}

     <ul class="thumbnails">
-  <li class="span3">
+  <li class="span4">
     <a href="#" class="thumbnail">
-      <img src="http://placehold.it/260x180" alt="">
+      <img src="http://placehold.it/300x200" alt="">
     </a>
   </li>
   ...
@@ -1674,11 +1688,11 @@
   
    {{_i}}For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <a> for a <div> like so:{{/i}}
    
 
     <ul class="thumbnails">
-  <li class="span3">
+  <li class="span4">
     <div class="thumbnail">
-      <img src="http://placehold.it/260x180" alt="">
-      <h5>{{_i}}Thumbnail label{{/i}}</h5>
-      <p>{{_i}}Thumbnail caption right here...{{/i}}</p>
+      <img src="http://placehold.it/300x200" alt="">
+      <h3>{{_i}}Thumbnail label{{/i}}</h3>
+      <p>{{_i}}Thumbnail caption...{{/i}}</p>
     </div>
   </li>
   ...
@@ -1718,6 +1732,11 @@
         
       
     
+    
  • 
+      
+        
+      
+    
    • 
   
 
 
diff --git a/less/thumbnails.less b/less/thumbnails.less
index d609c7df3..f229a2dad 100644
--- a/less/thumbnails.less
+++ b/less/thumbnails.less
@@ -27,10 +27,10 @@
 .thumbnail {
   display: block;
   padding: 4px;
-  line-height: 1;
+  line-height: 20px;
   border: 1px solid #ddd;
   .border-radius(4px);
-  .box-shadow(0 1px 1px rgba(0,0,0,.075));
+  .box-shadow(0 1px 3px rgba(0,0,0,.055));
 }
 // Add a hover state for linked versions only
 a.thumbnail:hover {
@@ -47,4 +47,5 @@ a.thumbnail:hover {
 }
 .thumbnail .caption {
   padding: 9px;
+  color: @gray;
 }

From c6ee96c02587aeea0da52018325c100bfd45127a Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Thu, 5 Jul 2012 10:37:23 -0700
Subject: [PATCH 5/9] fix up subnav styles, add subnav search form styles, add
 some basic docs for subnav

---
 docs/assets/css/bootstrap.css            | 20 ++++++++-
 docs/assets/js/application.js            |  4 +-
 docs/components.html                     | 57 ++++++++++++++++++++++++
 docs/templates/pages/components.mustache | 57 ++++++++++++++++++++++++
 less/navbar.less                         | 18 ++++++--
 5 files changed, 149 insertions(+), 7 deletions(-)

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 74f7094d3..28a4b8467 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -4185,13 +4185,12 @@ input[type="submit"].btn.btn-mini {
 -------------------------------------------------- */
 
 .navbar-subnav .navbar-inner {
-  padding: 0;
   background-color: #f9f9f9;
-  background-image: -moz-linear-gradient(top, #ffffff, #f1f1f1);
   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f1f1f1));
   background-image: -webkit-linear-gradient(top, #ffffff, #f1f1f1);
   background-image: -o-linear-gradient(top, #ffffff, #f1f1f1);
   background-image: linear-gradient(top, #ffffff, #f1f1f1);
+  background-image: -moz-linear-gradient(top, #ffffff, #f1f1f1);
   background-repeat: repeat-x;
   border: 1px solid #e5e5e5;
   filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff1f1f1', GradientType=0);
@@ -4229,6 +4228,23 @@ input[type="submit"].btn.btn-mini {
   border-bottom-color: #0088cc;
 }
 
+.navbar-subnav .search-query {
+  background-color: #fff;
+  border-color: #ccc;
+  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.25);
+     -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.25);
+          box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.25);
+}
+
+.navbar-subnav .search-query:focus,
+.navbar-subnav .search-query.focused {
+  padding: 4px 9px;
+  border: 1px solid rgba(82, 168, 236, 0.8);
+  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
+     -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
+          box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
+}
+
 .navbar-subnav .nav .open > a {
   color: #005580;
 }
diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js
index b2499b6b0..a447c46b7 100644
--- a/docs/assets/js/application.js
+++ b/docs/assets/js/application.js
@@ -45,8 +45,8 @@
 
     // fix sub nav on scroll
     var $win = $(window)
-      , $nav = $('.navbar-subnav')
-      , navTop = $('.navbar-subnav').length && $('.navbar-subnav').offset().top - 40
+      , $nav = $('.subhead .navbar-subnav')
+      , navTop = $('.subhead .navbar-subnav').length && $('.subhead .navbar-subnav').offset().top - 40
       , isFixed = 0
 
     processScroll()
diff --git a/docs/components.html b/docs/components.html
index ed1ba953a..4a658c760 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -1254,6 +1254,63 @@
     Heads up! The responsive navbar requires the collapse plugin and responsive Bootstrap CSS file.
   
 
+
+  
    
+
+
+  
    Responsive navbar
    
+  
    To implement a collapsing responsive navbar, wrap your navbar content in a containing div, .nav-collapse.collapse, and add the navbar toggle button, .btn-navbar.
    
+  
    
+    
    
+      
    
+        
    
+          
+            
+            
+            
+          
+          Title
+          
    
+            
+            
    
+              
+            
    
+            
+          
    
+        
    
+      
    
+    
    
+  
    
+
 
 
 
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index ea6cc4516..5fb11ccf2 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -1177,6 +1177,63 @@
     {{_i}}Heads up!{{/i}} The responsive navbar requires the collapse plugin and responsive Bootstrap CSS file.
   
 
+
+  
    
+
+
+  
    {{_i}}Responsive navbar{{/i}}
    
+  
    {{_i}}To implement a collapsing responsive navbar, wrap your navbar content in a containing div, .nav-collapse.collapse, and add the navbar toggle button, .btn-navbar.{{/i}}
    
+  
    
+    
    
+      
    
+        
    
+          
+            
+            
+            
+          
+          {{_i}}Title{{/i}}
+          
    
+            
+            
    
+              
+            
    
+            
+          
    
+        
    
+      
    
+    
    
+  
    {{! /example }}
+
 
 
 
diff --git a/less/navbar.less b/less/navbar.less
index a5d1e7e65..a9582e0a4 100644
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -379,10 +379,7 @@
 
 
 // Override the default .navbar
-.navbar-subnav {
-}
 .navbar-subnav .navbar-inner {
-  padding: 0;
   #gradient > .vertical(#ffffff, #f1f1f1);
   .box-shadow(none);
   border: 1px solid #e5e5e5;
@@ -421,6 +418,21 @@
   border-bottom-color: @linkColor;
 }
 
+// Reset search input form
+.navbar-subnav .search-query {
+  background-color: #fff;
+  border-color: #ccc;
+  .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.25)");
+
+  // On :focus, keep the same padding and border
+  &:focus,
+  &.focused {
+    padding: 4px 9px;
+    border: 1px solid rgba(82,168,236,.8);
+    .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6)");
+  }
+}
+
 // Open dropdown dropdown-toggle
 .navbar-subnav .nav .open > a {
   color: @linkColorHover;

From 3c07eaa251b73e6c5eff4b56e074c54708a4b4ba Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Thu, 5 Jul 2012 15:11:54 -0700
Subject: [PATCH 6/9] updates to type scale

---
 docs/assets/css/bootstrap-responsive.css |  12 +-
 docs/assets/css/bootstrap.css            | 233 +++++++++++------------
 docs/assets/css/docs.css                 |  15 +-
 docs/assets/img/grid-baseline-20px.png   | Bin 0 -> 120 bytes
 docs/base-css.html                       |   7 -
 docs/components.html                     |   7 -
 docs/download.html                       |   7 -
 docs/examples.html                       |   7 -
 docs/extend.html                         |   7 -
 docs/index.html                          |   7 -
 docs/javascript.html                     |   7 -
 docs/scaffolding.html                    |   7 -
 docs/templates/layout.mustache           |   7 -
 docs/upgrading.html                      |   7 -
 less/navbar.less                         |   2 +-
 less/tests/css-tests.css                 |  17 +-
 less/tests/css-tests.html                |  39 ++++
 less/type.less                           |  74 +++----
 less/variables.less                      |   4 +-
 19 files changed, 201 insertions(+), 265 deletions(-)
 create mode 100644 docs/assets/img/grid-baseline-20px.png

diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css
index 4102e4d2c..ac3d33457 100644
--- a/docs/assets/css/bootstrap-responsive.css
+++ b/docs/assets/css/bootstrap-responsive.css
@@ -830,7 +830,7 @@
   }
   .page-header h1 small {
     display: block;
-    line-height: 18px;
+    line-height: 20px;
   }
   input[type="checkbox"],
   input[type="radio"] {
@@ -882,10 +882,10 @@
     position: static;
   }
   .navbar-fixed-top {
-    margin-bottom: 18px;
+    margin-bottom: 20px;
   }
   .navbar-fixed-bottom {
-    margin-top: 18px;
+    margin-top: 20px;
   }
   .navbar-fixed-top .navbar-inner,
   .navbar-fixed-bottom .navbar-inner {
@@ -905,7 +905,7 @@
   }
   .nav-collapse .nav {
     float: none;
-    margin: 0 0 9px;
+    margin: 0 0 10px;
   }
   .nav-collapse .nav > li {
     float: none;
@@ -975,8 +975,8 @@
   .nav-collapse .navbar-form,
   .nav-collapse .navbar-search {
     float: none;
-    padding: 9px 15px;
-    margin: 9px 0;
+    padding: 10px 15px;
+    margin: 10px 0;
     border-top: 1px solid #111111;
     border-bottom: 1px solid #111111;
     -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 28a4b8467..4ec240ba5 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -158,8 +158,8 @@ textarea {
 body {
   margin: 0;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-size: 13px;
-  line-height: 18px;
+  font-size: 14px;
+  line-height: 20px;
   color: #333333;
   background-color: #ffffff;
 }
@@ -544,19 +544,19 @@ a:hover {
 }
 
 p {
-  margin: 0 0 9px;
+  margin: 0 0 10px;
 }
 
 p small {
-  font-size: 11px;
+  font-size: 12px;
   color: #999999;
 }
 
 .lead {
-  margin-bottom: 18px;
+  margin-bottom: 20px;
   font-size: 20px;
   font-weight: 200;
-  line-height: 27px;
+  line-height: 30px;
 }
 
 h1,
@@ -565,9 +565,10 @@ h3,
 h4,
 h5,
 h6 {
-  margin: 0;
+  margin: 10px 0;
   font-family: inherit;
   font-weight: bold;
+  line-height: 1;
   color: inherit;
   text-rendering: optimizelegibility;
 }
@@ -583,70 +584,60 @@ h6 small {
 }
 
 h1 {
-  font-size: 30px;
-  line-height: 36px;
-}
-
-h1 small {
-  font-size: 18px;
+  font-size: 36px;
+  line-height: 40px;
 }
 
 h2 {
+  font-size: 30px;
+  line-height: 40px;
+}
+
+h3 {
+  font-size: 24px;
+  line-height: 40px;
+}
+
+h4 {
+  font-size: 18px;
+  line-height: 20px;
+}
+
+h5 {
+  font-size: 14px;
+  line-height: 20px;
+}
+
+h6 {
+  font-size: 12px;
+  line-height: 20px;
+}
+
+h1 small {
   font-size: 24px;
-  line-height: 36px;
 }
 
 h2 small {
   font-size: 18px;
 }
 
-h3 {
-  font-size: 18px;
-  line-height: 27px;
-}
-
 h3 small {
   font-size: 14px;
 }
 
-h4,
-h5,
-h6 {
-  line-height: 18px;
-}
-
-h4 {
+h4 small {
   font-size: 14px;
 }
 
-h4 small {
-  font-size: 12px;
-}
-
-h5 {
-  font-size: 12px;
-}
-
-h6 {
-  font-size: 11px;
-  color: #999999;
-  text-transform: uppercase;
-}
-
 .page-header {
-  padding-bottom: 17px;
-  margin: 18px 0;
+  margin: 20px 0 19px;
   border-bottom: 1px solid #eeeeee;
 }
 
-.page-header h1 {
-  line-height: 1;
-}
-
 ul,
 ol {
   padding: 0;
-  margin: 0 0 9px 25px;
+  margin: 0 0 10px 25px;
 }
 
 ul ul,
@@ -665,7 +656,7 @@ ol {
 }
 
 li {
-  line-height: 18px;
+  line-height: 20px;
 }
 
 ul.unstyled,
@@ -675,12 +666,12 @@ ol.unstyled {
 }
 
 dl {
-  margin-bottom: 18px;
+  margin-bottom: 20px;
 }
 
 dt,
 dd {
-  line-height: 18px;
+  line-height: 20px;
 }
 
 dt {
@@ -688,7 +679,7 @@ dt {
 }
 
 dd {
-  margin-left: 9px;
+  margin-left: 10px;
 }
 
 .dl-horizontal dt {
@@ -706,7 +697,7 @@ dd {
 }
 
 hr {
-  margin: 18px 0;
+  margin: 20px 0;
   border: 0;
   border-top: 1px solid #eeeeee;
   border-bottom: 1px solid #ffffff;
@@ -736,7 +727,7 @@ abbr.initialism {
 
 blockquote {
   padding: 0 0 0 15px;
-  margin: 0 0 18px;
+  margin: 0 0 20px;
   border-left: 5px solid #eeeeee;
 }
 
@@ -744,12 +735,12 @@ blockquote p {
   margin-bottom: 0;
   font-size: 16px;
   font-weight: 300;
-  line-height: 22.5px;
+  line-height: 25px;
 }
 
 blockquote small {
   display: block;
-  line-height: 18px;
+  line-height: 20px;
   color: #999999;
 }
 
@@ -779,9 +770,9 @@ blockquote:after {
 
 address {
   display: block;
-  margin-bottom: 18px;
+  margin-bottom: 20px;
   font-style: normal;
-  line-height: 18px;
+  line-height: 20px;
 }
 
 small {
@@ -796,7 +787,7 @@ code,
 pre {
   padding: 0 3px 2px;
   font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
-  font-size: 12px;
+  font-size: 13px;
   color: #333333;
   -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
@@ -812,10 +803,10 @@ code {
 
 pre {
   display: block;
-  padding: 8.5px;
-  margin: 0 0 9px;
-  font-size: 12.025px;
-  line-height: 18px;
+  padding: 9.5px;
+  margin: 0 0 10px;
+  font-size: 12.950000000000001px;
+  line-height: 20px;
   word-break: break-all;
   word-wrap: break-word;
   white-space: pre;
@@ -829,7 +820,7 @@ pre {
 }
 
 pre.prettyprint {
-  margin-bottom: 18px;
+  margin-bottom: 20px;
 }
 
 pre code {
@@ -845,7 +836,7 @@ pre code {
 }
 
 form {
-  margin: 0 0 18px;
+  margin: 0 0 20px;
 }
 
 fieldset {
@@ -858,16 +849,16 @@ legend {
   display: block;
   width: 100%;
   padding: 0;
-  margin-bottom: 27px;
-  font-size: 19.5px;
-  line-height: 36px;
+  margin-bottom: 30px;
+  font-size: 21px;
+  line-height: 40px;
   color: #333333;
   border: 0;
   border-bottom: 1px solid #e5e5e5;
 }
 
 legend small {
-  font-size: 13.5px;
+  font-size: 15px;
   color: #999999;
 }
 
@@ -876,9 +867,9 @@ input,
 button,
 select,
 textarea {
-  font-size: 13px;
+  font-size: 14px;
   font-weight: normal;
-  line-height: 18px;
+  line-height: 20px;
 }
 
 input,
@@ -911,11 +902,11 @@ input[type="tel"],
 input[type="color"],
 .uneditable-input {
   display: inline-block;
-  height: 18px;
+  height: 20px;
   padding: 4px;
   margin-bottom: 9px;
-  font-size: 13px;
-  line-height: 18px;
+  font-size: 14px;
+  line-height: 20px;
   color: #555555;
   -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
@@ -1325,9 +1316,9 @@ select:focus:required:invalid:focus {
 }
 
 .form-actions {
-  padding: 17px 20px 18px;
-  margin-top: 18px;
-  margin-bottom: 18px;
+  padding: 19px 20px 20px;
+  margin-top: 20px;
+  margin-bottom: 20px;
   background-color: #f5f5f5;
   border-top: 1px solid #e5e5e5;
   *zoom: 1;
@@ -1377,7 +1368,7 @@ textarea::-webkit-input-placeholder {
 
 .help-block {
   display: block;
-  margin-bottom: 9px;
+  margin-bottom: 10px;
 }
 
 .help-inline {
@@ -1403,7 +1394,7 @@ textarea::-webkit-input-placeholder {
   position: relative;
   margin-bottom: 0;
   *margin-left: 0;
-  font-size: 13px;
+  font-size: 14px;
   vertical-align: middle;
   -webkit-border-radius: 0 3px 3px 0;
      -moz-border-radius: 0 3px 3px 0;
@@ -1428,12 +1419,12 @@ textarea::-webkit-input-placeholder {
 .input-append .add-on {
   display: inline-block;
   width: auto;
-  height: 18px;
+  height: 20px;
   min-width: 16px;
   padding: 4px 5px;
-  font-size: 13px;
+  font-size: 14px;
   font-weight: normal;
-  line-height: 18px;
+  line-height: 20px;
   text-align: center;
   text-shadow: 0 1px 0 #ffffff;
   vertical-align: middle;
@@ -1590,16 +1581,16 @@ input.search-query {
 }
 
 .control-group {
-  margin-bottom: 9px;
+  margin-bottom: 10px;
 }
 
 legend + .control-group {
-  margin-top: 18px;
+  margin-top: 20px;
   -webkit-margin-top-collapse: separate;
 }
 
 .form-horizontal .control-group {
-  margin-bottom: 18px;
+  margin-bottom: 20px;
   *zoom: 1;
 }
 
@@ -1633,7 +1624,7 @@ legend + .control-group {
 }
 
 .form-horizontal .help-block {
-  margin-top: 9px;
+  margin-top: 10px;
   margin-bottom: 0;
 }
 
@@ -1650,13 +1641,13 @@ table {
 
 .table {
   width: 100%;
-  margin-bottom: 18px;
+  margin-bottom: 20px;
 }
 
 .table th,
 .table td {
   padding: 8px;
-  line-height: 18px;
+  line-height: 20px;
   text-align: left;
   vertical-align: top;
   border-top: 1px solid #dddddd;
@@ -2569,7 +2560,7 @@ table .span24 {
 .dropdown-menu .divider {
   *width: 100%;
   height: 1px;
-  margin: 8px 1px;
+  margin: 9px 1px;
   *margin: -5px 0 5px;
   overflow: hidden;
   background-color: #e5e5e5;
@@ -2581,7 +2572,7 @@ table .span24 {
   padding: 3px 15px;
   clear: both;
   font-weight: normal;
-  line-height: 18px;
+  line-height: 20px;
   color: #333333;
   white-space: nowrap;
 }
@@ -2709,7 +2700,7 @@ table .span24 {
   float: right;
   font-size: 20px;
   font-weight: bold;
-  line-height: 18px;
+  line-height: 20px;
   color: #000000;
   text-shadow: 0 1px 0 #ffffff;
   opacity: 0.2;
@@ -2738,8 +2729,8 @@ button.close {
   padding: 4px 10px 4px;
   margin-bottom: 0;
   *margin-left: .3em;
-  font-size: 13px;
-  line-height: 18px;
+  font-size: 14px;
+  line-height: 20px;
   *line-height: 20px;
   color: #333333;
   text-align: center;
@@ -2833,7 +2824,7 @@ button.close {
 
 .btn-large {
   padding: 9px 14px;
-  font-size: 15px;
+  font-size: 16px;
   line-height: normal;
   -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
@@ -2846,8 +2837,8 @@ button.close {
 
 .btn-small {
   padding: 5px 9px;
-  font-size: 11px;
-  line-height: 16px;
+  font-size: 12px;
+  line-height: 18px;
 }
 
 .btn-small [class^="icon-"] {
@@ -2856,8 +2847,8 @@ button.close {
 
 .btn-mini {
   padding: 2px 6px;
-  font-size: 11px;
-  line-height: 14px;
+  font-size: 12px;
+  line-height: 16px;
 }
 
 .btn-primary,
@@ -3110,8 +3101,8 @@ input[type="submit"].btn.btn-mini {
 }
 
 .btn-toolbar {
-  margin-top: 9px;
-  margin-bottom: 9px;
+  margin-top: 10px;
+  margin-bottom: 10px;
 }
 
 .btn-toolbar .btn-group {
@@ -3132,16 +3123,16 @@ input[type="submit"].btn.btn-mini {
 
 .btn-group > .btn,
 .btn-group > .dropdown-menu {
-  font-size: 13px;
+  font-size: 14px;
 }
 
 .btn-group > .btn-mini,
 .btn-group > .btn-small {
-  font-size: 11px;
+  font-size: 12px;
 }
 
 .btn-group > .btn-large {
-  font-size: 15px;
+  font-size: 16px;
 }
 
 .btn-group > .btn:first-child {
@@ -3343,7 +3334,7 @@ input[type="submit"].btn.btn-mini {
 
 .alert {
   padding: 8px 35px 8px 14px;
-  margin-bottom: 18px;
+  margin-bottom: 20px;
   color: #c09853;
   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
   background-color: #fcf8e3;
@@ -3357,7 +3348,7 @@ input[type="submit"].btn.btn-mini {
   position: relative;
   top: -2px;
   right: -21px;
-  line-height: 18px;
+  line-height: 20px;
 }
 
 .alert-success {
@@ -3394,7 +3385,7 @@ input[type="submit"].btn.btn-mini {
 }
 
 .nav {
-  margin-bottom: 18px;
+  margin-bottom: 20px;
   margin-left: 0;
   list-style: none;
 }
@@ -3417,7 +3408,7 @@ input[type="submit"].btn.btn-mini {
   padding: 3px 15px;
   font-size: 11px;
   font-weight: bold;
-  line-height: 18px;
+  line-height: 20px;
   color: #999999;
   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
   text-transform: uppercase;
@@ -3458,7 +3449,7 @@ input[type="submit"].btn.btn-mini {
 .nav-list .divider {
   *width: 100%;
   height: 1px;
-  margin: 8px 1px;
+  margin: 9px 1px;
   *margin: -5px 0 5px;
   overflow: hidden;
   background-color: #e5e5e5;
@@ -3508,7 +3499,7 @@ input[type="submit"].btn.btn-mini {
 .nav-tabs > li > a {
   padding-top: 8px;
   padding-bottom: 8px;
-  line-height: 18px;
+  line-height: 20px;
   border: 1px solid transparent;
   -webkit-border-radius: 4px 4px 0 0;
      -moz-border-radius: 4px 4px 0 0;
@@ -3773,7 +3764,7 @@ input[type="submit"].btn.btn-mini {
 .navbar {
   *position: relative;
   *z-index: 2;
-  margin-bottom: 18px;
+  margin-bottom: 20px;
   overflow: visible;
 }
 
@@ -3997,7 +3988,7 @@ input[type="submit"].btn.btn-mini {
 
 .navbar .nav > li > a {
   float: none;
-  padding: 10px 12px 11px;
+  padding: 10px 15px 11px;
   line-height: 19px;
   color: #999999;
   text-decoration: none;
@@ -4012,7 +4003,7 @@ input[type="submit"].btn.btn-mini {
   display: inline-block;
   padding: 4px 10px 4px;
   margin: 5px 5px 6px;
-  line-height: 18px;
+  line-height: 20px;
 }
 
 .navbar .btn-group {
@@ -4285,7 +4276,7 @@ input[type="submit"].btn.btn-mini {
 
 .breadcrumb {
   padding: 7px 14px;
-  margin: 0 0 18px;
+  margin: 0 0 20px;
   list-style: none;
   background-color: #fbfbfb;
   background-image: -moz-linear-gradient(top, #ffffff, #f5f5f5);
@@ -4321,8 +4312,8 @@ input[type="submit"].btn.btn-mini {
 }
 
 .pagination {
-  height: 36px;
-  margin: 18px 0;
+  height: 40px;
+  margin: 20px 0;
 }
 
 .pagination ul {
@@ -4347,7 +4338,7 @@ input[type="submit"].btn.btn-mini {
 .pagination span {
   float: left;
   padding: 0 14px;
-  line-height: 34px;
+  line-height: 38px;
   text-decoration: none;
   border: 1px solid #ddd;
   border-left-width: 0;
@@ -4397,7 +4388,7 @@ input[type="submit"].btn.btn-mini {
 }
 
 .pager {
-  margin-bottom: 18px;
+  margin-bottom: 20px;
   margin-left: 0;
   text-align: center;
   list-style: none;
@@ -4864,7 +4855,7 @@ input[type="submit"].btn.btn-mini {
 
 .thumbnails > li {
   float: left;
-  margin-bottom: 18px;
+  margin-bottom: 20px;
   margin-left: 20px;
 }
 
@@ -4902,7 +4893,7 @@ a.thumbnail:hover {
 
 .label,
 .badge {
-  font-size: 10.998px;
+  font-size: 11.844px;
   font-weight: bold;
   line-height: 14px;
   color: #ffffff;
@@ -5177,7 +5168,7 @@ a.badge:hover {
 }
 
 .accordion {
-  margin-bottom: 18px;
+  margin-bottom: 20px;
 }
 
 .accordion-group {
@@ -5208,7 +5199,7 @@ a.badge:hover {
 
 .carousel {
   position: relative;
-  margin-bottom: 18px;
+  margin-bottom: 20px;
   line-height: 1;
 }
 
@@ -5338,7 +5329,7 @@ a.badge:hover {
 .hero-unit p {
   font-size: 18px;
   font-weight: 200;
-  line-height: 27px;
+  line-height: 30px;
   color: inherit;
 }
 
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 7b12bb5da..6d64028f8 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -26,17 +26,6 @@ body {
   margin: 0 auto;
 }
 
-/* Increase docs base type size and line-heights */
-body {
-  line-height: 20px;
-}
-p {
-  margin-bottom: 15px;
-}
-/*li {
-  line-height: 25px;
-}
-*/
 /* Code in headings */
 h3 code {
   font-size: 14px;
@@ -49,7 +38,6 @@ h3 code {
 -------------------------------------------------- */
 
 .navbar {
-  font-size: 13px;
 }
 
 /* Change the docs' brand */
@@ -197,8 +185,7 @@ hr.soften {
 }
 .marketing h2 {
   font-weight: 400;
-  letter-spacing: -1px;
-}
+`}
 .marketing p {
   color: #555;
 }
diff --git a/docs/assets/img/grid-baseline-20px.png b/docs/assets/img/grid-baseline-20px.png
new file mode 100644
index 0000000000000000000000000000000000000000..1ff044468e1ec5ca0fbd00e523e784302f5abf7d
GIT binary patch
literal 120
zcmeAS@N?(olHy`uVBq!ia0vp^j6f{H!3HFK_`(+gDajJoh?3y^w370~qErUQl>DSr
z1<%~X^wgl##FWaylc_d9MN*zFjv*Ddl4hJdpm6lV|Nr%DYHSJ%I2i>J7!toSUoDGy
Rs}5Af;OXk;vd$@?2>{_+BEJ9t

literal 0
HcmV?d00001

diff --git a/docs/base-css.html b/docs/base-css.html
index 2b7c1ec71..4655da12f 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -57,13 +57,6 @@
               
  • 
                 Javascript
               
    • 
-              
  • 
-              
  • 
-                Customize
-              
    • 
-              
  • 
-                Examples
-              
    • 
               
  • 
                 Extend
               
    • 
diff --git a/docs/components.html b/docs/components.html
index 4a658c760..2c07efbf6 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -57,13 +57,6 @@
               
  • 
                 Javascript
               
    • 
-              
  • 
-              
  • 
-                Customize
-              
    • 
-              
  • 
-                Examples
-              
    • 
               
  • 
                 Extend
               
    • 
diff --git a/docs/download.html b/docs/download.html
index 34fdc741e..3463cbb03 100644
--- a/docs/download.html
+++ b/docs/download.html
@@ -57,13 +57,6 @@
               
  • 
                 Javascript
               
    • 
-              
  • 
-              
  • 
-                Customize
-              
    • 
-              
  • 
-                Examples
-              
    • 
               
  • 
                 Extend
               
    • 
diff --git a/docs/examples.html b/docs/examples.html
index 3b541df3b..767b024cb 100644
--- a/docs/examples.html
+++ b/docs/examples.html
@@ -57,13 +57,6 @@
               
  • 
                 Javascript
               
    • 
-              
  • 
-              
  • 
-                Customize
-              
    • 
-              
  • 
-                Examples
-              
    • 
               
  • 
                 Extend
               
    • 
diff --git a/docs/extend.html b/docs/extend.html
index 7169908a6..77c93af3b 100644
--- a/docs/extend.html
+++ b/docs/extend.html
@@ -57,13 +57,6 @@
               
  • 
                 Javascript
               
    • 
-              
  • 
-              
  • 
-                Customize
-              
    • 
-              
  • 
-                Examples
-              
    • 
               
  • 
                 Extend
               
    • 
diff --git a/docs/index.html b/docs/index.html
index 1789a507c..683c94086 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -57,13 +57,6 @@
               
  • 
                 Javascript
               
    • 
-              
  • 
-              
  • 
-                Customize
-              
    • 
-              
  • 
-                Examples
-              
    • 
               
  • 
                 Extend
               
    • 
diff --git a/docs/javascript.html b/docs/javascript.html
index 7fb1448ec..d2a2a961e 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -57,13 +57,6 @@
               
  • 
                 Javascript
               
    • 
-              
  • 
-              
  • 
-                Customize
-              
    • 
-              
  • 
-                Examples
-              
    • 
               
  • 
                 Extend
               
    • 
diff --git a/docs/scaffolding.html b/docs/scaffolding.html
index 3fe6affab..bb9308ec9 100644
--- a/docs/scaffolding.html
+++ b/docs/scaffolding.html
@@ -57,13 +57,6 @@
               
  • 
                 Javascript
               
    • 
-              
  • 
-              
  • 
-                Customize
-              
    • 
-              
  • 
-                Examples
-              
    • 
               
  • 
                 Extend
               
    • 
diff --git a/docs/templates/layout.mustache b/docs/templates/layout.mustache
index 1cda87954..763669b1c 100644
--- a/docs/templates/layout.mustache
+++ b/docs/templates/layout.mustache
@@ -69,13 +69,6 @@
               
  • 
                 {{_i}}Javascript{{/i}}
               
    • 
-              
  • 
-              
  • 
-                {{_i}}Customize{{/i}}
-              
    • 
-              
  • 
-                {{_i}}Examples{{/i}}
-              
    • 
               
  • 
                 {{_i}}Extend{{/i}}
               
    • 
diff --git a/docs/upgrading.html b/docs/upgrading.html
index f001f1772..b12ac2e50 100644
--- a/docs/upgrading.html
+++ b/docs/upgrading.html
@@ -57,13 +57,6 @@
               
  • 
                 Javascript
               
    • 
-              
  • 
-              
  • 
-                Customize
-              
    • 
-              
  • 
-                Examples
-              
    • 
               
  • 
                 Extend
               
    • 
diff --git a/less/navbar.less b/less/navbar.less
index a9582e0a4..660838eb8 100644
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -206,7 +206,7 @@
   float: none;
   // Vertically center the text given @navbarHeight
   @elementHeight: 20px;
-  padding: ((@navbarHeight - @elementHeight) / 2) 12px ((@navbarHeight - @elementHeight) / 2 + 1);
+  padding: ((@navbarHeight - @elementHeight) / 2) 15px ((@navbarHeight - @elementHeight) / 2 + 1);
   line-height: 19px;
   color: @navbarLinkColor;
   text-decoration: none;
diff --git a/less/tests/css-tests.css b/less/tests/css-tests.css
index e0870be44..628dbba6f 100644
--- a/less/tests/css-tests.css
+++ b/less/tests/css-tests.css
@@ -12,9 +12,24 @@ body {
 .subhead {
   margin-bottom: 36px;
 }
-h4 {
+/*h4 {
   margin-bottom: 5px;
 }
+*/
+
+.type-test {
+  margin-bottom: 20px;
+  padding: 0 20px 20px;
+  background: url(../../docs/assets/img/grid-baseline-20px.png);
+}
+.type-test h1,
+.type-test h2,
+.type-test h3,
+.type-test h4,
+.type-test h5,
+.type-test h6 {
+  xbackground-color: rgba(255,0,0,.2);
+}
 
 
 /* colgroup tests */
diff --git a/less/tests/css-tests.html b/less/tests/css-tests.html
index 2396e348c..4b8b1a277 100644
--- a/less/tests/css-tests.html
+++ b/less/tests/css-tests.html
@@ -55,6 +55,45 @@
 
 
 
+
+
+
    
+  
    Typography
    
+
    
+
+
    
+  
    
+    
    
+      
    h1. Heading 1
    
+      
    h2. Heading 2
    
+      
    h3. Heading 3
    
+      
    h4. Heading 4
    
+      
    h5. Heading 5
    
+      
    h6. Heading 6
    
+      
    Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
    
+    
    
+  
    
+  
    
+    
    
+      
    h1. Heading 1
    
+      
    Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
    
+      
    h2. Heading 2
    
+      
    Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
    
+      
    h3. Heading 3
    
+      
    Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
    
+      
    h4. Heading 4
    
+      
    Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
    
+      
    h5. Heading 5
    
+      
    Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
    
+      
    h6. Heading 6
    
+      
    Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
    
+    
    
+  
    
+
    
+
+
+
 
 
diff --git a/less/type.less b/less/type.less
index 61a7db493..8ff42476a 100644
--- a/less/type.less
+++ b/less/type.less
@@ -3,8 +3,8 @@
 // --------------------------------------------------
 
 
-// BODY TEXT
-// ---------
+// Body text
+// -------------------------
 
 p {
   margin: 0 0 @baseLineHeight / 2;
@@ -20,13 +20,15 @@ p {
   line-height: @baseLineHeight * 1.5;
 }
 
-// HEADINGS
-// --------
+
+// Headings
+// -------------------------
 
 h1, h2, h3, h4, h5, h6 {
-  margin: 0;
+  margin: (@baseLineHeight / 2) 0;
   font-family: @headingsFontFamily;
   font-weight: @headingsFontWeight;
+  line-height: 1;
   color: @headingsColor;
   text-rendering: optimizelegibility; // Fix the character spacing for headings
   small {
@@ -34,59 +36,31 @@ h1, h2, h3, h4, h5, h6 {
     color: @grayLight;
   }
 }
-h1 {
-  font-size: 30px;
-  line-height: @baseLineHeight * 2;
-  small {
-    font-size: 18px;
-  }
-}
-h2 {
-  font-size: 24px;
-  line-height: @baseLineHeight * 2;
-  small {
-    font-size: 18px;
-  }
-}
-h3 {
-  font-size: 18px;
-  line-height: @baseLineHeight * 1.5;
-  small {
-    font-size: 14px;
-  }
-}
-h4, h5, h6 {
-  line-height: @baseLineHeight;
-}
-h4 {
-  font-size: 14px;
-  small {
-    font-size: 12px;
-  }
-}
-h5 {
-  font-size: 12px;
-}
-h6 {
-  font-size: 11px;
-  color: @grayLight;
-  text-transform: uppercase;
-}
+h1 { font-size: 36px; line-height: 40px; }
+h2 { font-size: 30px; line-height: 40px; }
+h3 { font-size: 24px; line-height: 40px; }
+h4 { font-size: 18px; line-height: 20px; }
+h5 { font-size: 14px; line-height: 20px; }
+h6 { font-size: 12px; line-height: 20px; }
+
+h1 small { font-size: 24px; }
+h2 small { font-size: 18px; }
+h3 small { font-size: 14px; }
+h4 small { font-size: 14px; }
+
 
 // Page header
+// -------------------------
+
 .page-header {
-  padding-bottom: @baseLineHeight - 1;
-  margin: @baseLineHeight 0;
+  margin: @baseLineHeight 0 (@baseLineHeight - 1);
   border-bottom: 1px solid @grayLighter;
 }
-.page-header h1 {
-  line-height: 1;
-}
 
 
 
-// LISTS
-// -----
+// Lists
+// --------------------------------------------------
 
 // Unordered and Ordered lists
 ul, ol {
diff --git a/less/variables.less b/less/variables.less
index 5d900164c..9a3e0ed4e 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -48,9 +48,9 @@
 @serifFontFamily:       Georgia, "Times New Roman", Times, serif;
 @monoFontFamily:        Menlo, Monaco, Consolas, "Courier New", monospace;
 
-@baseFontSize:          13px;
+@baseFontSize:          14px;
 @baseFontFamily:        @sansFontFamily;
-@baseLineHeight:        18px;
+@baseLineHeight:        20px;
 @altFontFamily:         @serifFontFamily;
 
 @headingsFontFamily:    inherit; // empty to use BS default, @baseFontFamily

From 68146db00454b46493545aff34d06cf2c11e0f6d Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Thu, 5 Jul 2012 15:15:57 -0700
Subject: [PATCH 7/9] buttons and pre updates for font-size

---
 docs/assets/css/bootstrap.css | 4 ++--
 docs/assets/css/docs.css      | 3 +++
 less/buttons.less             | 2 +-
 less/variables.less           | 2 +-
 4 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 4ec240ba5..329618b05 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -786,7 +786,7 @@ cite {
 code,
 pre {
   padding: 0 3px 2px;
-  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+  font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
   font-size: 13px;
   color: #333333;
   -webkit-border-radius: 3px;
@@ -2726,7 +2726,7 @@ button.close {
 .btn {
   display: inline-block;
   *display: inline;
-  padding: 4px 10px 4px;
+  padding: 4px 14px 4px;
   margin-bottom: 0;
   *margin-left: .3em;
   font-size: 14px;
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 6d64028f8..bee42dc36 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -428,6 +428,9 @@ h2 + .row {
   margin-left: 0;
   list-style: none;
 }
+.the-icons li {
+  line-height: 25px;
+}
 .the-icons i:hover {
   background-color: rgba(255,0,0,.25);
 }
diff --git a/less/buttons.less b/less/buttons.less
index c46b7cf3e..b48b0555b 100644
--- a/less/buttons.less
+++ b/less/buttons.less
@@ -10,7 +10,7 @@
 .btn {
   display: inline-block;
   .ie7-inline-block();
-  padding: 4px 10px 4px;
+  padding: 4px 14px 4px;
   margin-bottom: 0; // For input.btn
   font-size: @baseFontSize;
   line-height: @baseLineHeight;
diff --git a/less/variables.less b/less/variables.less
index 9a3e0ed4e..bc8ff4bed 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -46,7 +46,7 @@
 // -------------------------
 @sansFontFamily:        "Helvetica Neue", Helvetica, Arial, sans-serif;
 @serifFontFamily:       Georgia, "Times New Roman", Times, serif;
-@monoFontFamily:        Menlo, Monaco, Consolas, "Courier New", monospace;
+@monoFontFamily:        Monaco, Menlo, Consolas, "Courier New", monospace;
 
 @baseFontSize:          14px;
 @baseFontFamily:        @sansFontFamily;

From cd6915cdb4f53f6c8e89599bfacbbb298412ec33 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Thu, 5 Jul 2012 19:45:32 -0700
Subject: [PATCH 8/9] tests cleanup on type, homepage content tweaks

---
 docs/index.html                     | 4 ++--
 docs/templates/pages/index.mustache | 4 ++--
 less/tests/css-tests.css            | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index 683c94086..8ceee8933 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -131,12 +131,12 @@
   
    
     
    
       
-      
    Built by nerds, for nerds.
    
+      
    By nerds, for nerds.
    
       
    Built at Twitter by @mdo and @fat, Bootstrap utilizes LESS CSS, is compiled via Node, and is managed through GitHub to help nerds do awesome stuff on the web.
    
     
    
     
    
       
-      
    Designed for everyone.
    
+      
    Made for everyone.
    
       
    Bootstrap was made to not only look and behave great in the latest desktop browsers (as well as IE7!), but in tablet and smartphone browsers via responsive CSS as well.
    
     
    
     
    
diff --git a/docs/templates/pages/index.mustache b/docs/templates/pages/index.mustache
index b6c4b0112..a40659c5e 100644
--- a/docs/templates/pages/index.mustache
+++ b/docs/templates/pages/index.mustache
@@ -61,12 +61,12 @@
   
    
     
    
       
-      
    {{_i}}Built by nerds, for nerds.{{/i}}
    
+      
    {{_i}}By nerds, for nerds.{{/i}}
    
       
    {{_i}}Built at Twitter by @mdo and @fat, Bootstrap utilizes LESS CSS, is compiled via Node, and is managed through GitHub to help nerds do awesome stuff on the web.{{/i}}
    
     
    
     
    
       
-      
    {{_i}}Designed for everyone.{{/i}}
    
+      
    {{_i}}Made for everyone.{{/i}}
    
       
    {{_i}}Bootstrap was made to not only look and behave great in the latest desktop browsers (as well as IE7!), but in tablet and smartphone browsers via responsive CSS as well.{{/i}}
    
     
    
     
    
diff --git a/less/tests/css-tests.css b/less/tests/css-tests.css
index 628dbba6f..6001f53aa 100644
--- a/less/tests/css-tests.css
+++ b/less/tests/css-tests.css
@@ -28,7 +28,7 @@ body {
 .type-test h4,
 .type-test h5,
 .type-test h6 {
-  xbackground-color: rgba(255,0,0,.2);
+  background-color: rgba(255,0,0,.2);
 }
 
 

From 095e052606a8e1afb496ec4a1e95567a7f123827 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Fri, 6 Jul 2012 10:10:56 -0700
Subject: [PATCH 9/9] adding homepage social buttons

---
 docs/assets/css/docs.css            | 22 +++++++++++++---------
 docs/index.html                     | 19 +++++++++++++++++++
 docs/templates/pages/index.mustache | 19 +++++++++++++++++++
 3 files changed, 51 insertions(+), 9 deletions(-)

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index bee42dc36..6ad151181 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -147,7 +147,7 @@ hr.soften {
   font-size: 12px;
 }
 .quick-links {
-  min-height: 30px;
+  height: 20px;
   margin: 0;
   padding: 0;
   list-style: none;
@@ -157,15 +157,10 @@ hr.soften {
   min-height: 0;
 }
 .quick-links li {
-  display: inline;
+  display: inline-block;
   margin: 0 8px;
   color: #999;
-}
-.quick-links .github-btn,
-.quick-links .tweet-btn,
-.quick-links .follow-btn {
-  position: relative;
-  top: 5px;
+  line-height: 1;
 }
 
 
@@ -774,7 +769,7 @@ form.bs-docs-example {
           border-radius: 6px;
 }
 .jumbo {
-  padding: 100px 0;
+  padding: 80px 0;
   margin: -60px 0 60px;
   background-color: #222;
   color: #fff;
@@ -859,6 +854,15 @@ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9cabc', end
 }
 
 
+.jumbo-buttons {
+  padding: 20px 0;
+  margin-top: -60px;
+  text-align: center;
+  background-color: #f5f5f5;
+  border-top: 1px solid #fff;
+  border-bottom: 1px solid #ddd;
+}
+
 
 @media (max-width: 480px) {
   body {
diff --git a/docs/index.html b/docs/index.html
index 8ceee8933..88d2f6b6a 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -83,6 +83,25 @@
   
    
 
    
 
+
    
+  
    
+    
+  
    
+
    
+
   
    
 
 
diff --git a/docs/templates/pages/index.mustache b/docs/templates/pages/index.mustache
index a40659c5e..2ca3ed887 100644
--- a/docs/templates/pages/index.mustache
+++ b/docs/templates/pages/index.mustache
@@ -13,6 +13,25 @@
   
    
 
    
 
+
    
+  
    
+    
+  
    
+
    
+