Refactor jumbotron example:

* Add hella CSS comments
* Reduce padding on body to height of navbar, then set top margin on jumbotron at +768px
* Wrap marketing copy and footer in an extra div so we can set some padding for ideal responsive views

docs/examples/jumbotron.html

@@ -25,13 +25,36 @@
 
     <!-- Custom styles for this template -->
     <style>
+      /* Move down content because we have a fixed navbar that is 50px tall */
       body {
-        padding-top: 80px;
+        padding-top: 50px;
+        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 {
+        padding-left: 15px;
+        padding-right: 15px;
+      }
+
+      /* Responsive: Portrait tablets and up */
+      @media screen and (min-width: 768px) {
+        /* Let the jumbotron breathe */
+        .jumbotron {
+          margin-top: 20px;
+        }
+        /* Remove padding from wrapping element since we kick in the grid classes here */
+        .body-content {
+          padding: 0;
+        }
+      }
     </style>
   </head>
 
@@ -81,6 +104,8 @@
         <p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p>
       </div>
 
+      <div class="body-content">
+
         <!-- Example row of columns -->
         <div class="row">
           <div class="span4">
@@ -105,6 +130,7 @@
         <footer>
           <p>&copy; Company 2013</p>
         </footer>
+      </div>
 
     </div> <!-- /container -->