Adding a 'horizontal' option to description lists, similar to .form-horizontal

docs/assets/css/bootstrap-responsive.css

@@ -10,7 +10,8 @@
 .clearfix {
   *zoom: 1;
 }
-.clearfix:before, .clearfix:after {
+.clearfix:before,
+.clearfix:after {
   display: table;
   content: "";
 }
@@ -99,10 +100,12 @@
     /* CSS3 spec*/
   
   }
-  .input-prepend input[class*="span"], .input-append input[class*="span"] {
+  .input-prepend input[class*="span"],
+  .input-append input[class*="span"] {
     width: auto;
   }
-  input[type="checkbox"], input[type="radio"] {
+  input[type="checkbox"],
+  input[type="radio"] {
     border: 1px solid #ccc;
   }
   .form-horizontal .control-group > label {
@@ -151,7 +154,8 @@
   .row {
     margin-left: 0;
   }
-  .row > [class*="span"], .row-fluid > [class*="span"] {
+  .row > [class*="span"],
+  .row-fluid > [class*="span"] {
     float: none;
     display: block;
     width: auto;
@@ -163,7 +167,8 @@
     margin-left: -20px;
     *zoom: 1;
   }
-  .row:before, .row:after {
+  .row:before,
+  .row:after {
     display: table;
     content: "";
   }
@@ -174,7 +179,9 @@
     float: left;
     margin-left: 20px;
   }
-  .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
+  .container,
+  .navbar-fixed-top .container,
+  .navbar-fixed-bottom .container {
     width: 724px;
   }
   .span1 {
@@ -253,7 +260,8 @@
     width: 100%;
     *zoom: 1;
   }
-  .row-fluid:before, .row-fluid:after {
+  .row-fluid:before,
+  .row-fluid:after {
     display: table;
     content: "";
   }
@@ -303,43 +311,69 @@
   .row-fluid > .span12 {
     width: 99.999999993%;
   }
-  input, textarea, .uneditable-input {
+  input,
+  textarea,
+  .uneditable-input {
     margin-left: 0;
   }
-  input > .span1, textarea > .span1, .uneditable-input > .span1 {
+  input > .span1,
+  textarea > .span1,
+  .uneditable-input > .span1 {
     width: 32px;
   }
-  input > .span2, textarea > .span2, .uneditable-input > .span2 {
+  input > .span2,
+  textarea > .span2,
+  .uneditable-input > .span2 {
     width: 94px;
   }
-  input > .span3, textarea > .span3, .uneditable-input > .span3 {
+  input > .span3,
+  textarea > .span3,
+  .uneditable-input > .span3 {
     width: 156px;
   }
-  input > .span4, textarea > .span4, .uneditable-input > .span4 {
+  input > .span4,
+  textarea > .span4,
+  .uneditable-input > .span4 {
     width: 218px;
   }
-  input > .span5, textarea > .span5, .uneditable-input > .span5 {
+  input > .span5,
+  textarea > .span5,
+  .uneditable-input > .span5 {
     width: 280px;
   }
-  input > .span6, textarea > .span6, .uneditable-input > .span6 {
+  input > .span6,
+  textarea > .span6,
+  .uneditable-input > .span6 {
     width: 342px;
   }
-  input > .span7, textarea > .span7, .uneditable-input > .span7 {
+  input > .span7,
+  textarea > .span7,
+  .uneditable-input > .span7 {
     width: 404px;
   }
-  input > .span8, textarea > .span8, .uneditable-input > .span8 {
+  input > .span8,
+  textarea > .span8,
+  .uneditable-input > .span8 {
     width: 466px;
   }
-  input > .span9, textarea > .span9, .uneditable-input > .span9 {
+  input > .span9,
+  textarea > .span9,
+  .uneditable-input > .span9 {
     width: 528px;
   }
-  input > .span10, textarea > .span10, .uneditable-input > .span10 {
+  input > .span10,
+  textarea > .span10,
+  .uneditable-input > .span10 {
     width: 590px;
   }
-  input > .span11, textarea > .span11, .uneditable-input > .span11 {
+  input > .span11,
+  textarea > .span11,
+  .uneditable-input > .span11 {
     width: 652px;
   }
-  input > .span12, textarea > .span12, .uneditable-input > .span12 {
+  input > .span12,
+  textarea > .span12,
+  .uneditable-input > .span12 {
     width: 714px;
   }
 }
@@ -383,7 +417,8 @@
     color: #999999;
     text-shadow: none;
   }
-  .navbar .nav > li > a, .navbar .dropdown-menu a {
+  .navbar .nav > li > a,
+  .navbar .dropdown-menu a {
     padding: 6px 15px;
     font-weight: bold;
     color: #999999;
@@ -394,7 +429,8 @@
   .navbar .dropdown-menu li + li a {
     margin-bottom: 2px;
   }
-  .navbar .nav > li > a:hover, .navbar .dropdown-menu a:hover {
+  .navbar .nav > li > a:hover,
+  .navbar .dropdown-menu a:hover {
     background-color: #222222;
   }
   .navbar .dropdown-menu {
@@ -415,13 +451,15 @@
     -moz-box-shadow: none;
     box-shadow: none;
   }
-  .navbar .dropdown-menu:before, .navbar .dropdown-menu:after {
+  .navbar .dropdown-menu:before,
+  .navbar .dropdown-menu:after {
     display: none;
   }
   .navbar .dropdown-menu .divider {
     display: none;
   }
-  .navbar-form, .navbar-search {
+  .navbar-form,
+  .navbar-search {
     float: none;
     padding: 9px 15px;
     margin: 9px 0;
@@ -458,7 +496,8 @@
     margin-left: -30px;
     *zoom: 1;
   }
-  .row:before, .row:after {
+  .row:before,
+  .row:after {
     display: table;
     content: "";
   }
@@ -469,7 +508,9 @@
     float: left;
     margin-left: 30px;
   }
-  .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
+  .container,
+  .navbar-fixed-top .container,
+  .navbar-fixed-bottom .container {
     width: 1170px;
   }
   .span1 {
@@ -548,7 +589,8 @@
     width: 100%;
     *zoom: 1;
   }
-  .row-fluid:before, .row-fluid:after {
+  .row-fluid:before,
+  .row-fluid:after {
     display: table;
     content: "";
   }
@@ -598,43 +640,69 @@
   .row-fluid > .span12 {
     width: 100%;
   }
-  input, textarea, .uneditable-input {
+  input,
+  textarea,
+  .uneditable-input {
     margin-left: 0;
   }
-  input > .span1, textarea > .span1, .uneditable-input > .span1 {
+  input > .span1,
+  textarea > .span1,
+  .uneditable-input > .span1 {
     width: 60px;
   }
-  input > .span2, textarea > .span2, .uneditable-input > .span2 {
+  input > .span2,
+  textarea > .span2,
+  .uneditable-input > .span2 {
     width: 160px;
   }
-  input > .span3, textarea > .span3, .uneditable-input > .span3 {
+  input > .span3,
+  textarea > .span3,
+  .uneditable-input > .span3 {
     width: 260px;
   }
-  input > .span4, textarea > .span4, .uneditable-input > .span4 {
+  input > .span4,
+  textarea > .span4,
+  .uneditable-input > .span4 {
     width: 360px;
   }
-  input > .span5, textarea > .span5, .uneditable-input > .span5 {
+  input > .span5,
+  textarea > .span5,
+  .uneditable-input > .span5 {
     width: 460px;
   }
-  input > .span6, textarea > .span6, .uneditable-input > .span6 {
+  input > .span6,
+  textarea > .span6,
+  .uneditable-input > .span6 {
     width: 560px;
   }
-  input > .span7, textarea > .span7, .uneditable-input > .span7 {
+  input > .span7,
+  textarea > .span7,
+  .uneditable-input > .span7 {
     width: 660px;
   }
-  input > .span8, textarea > .span8, .uneditable-input > .span8 {
+  input > .span8,
+  textarea > .span8,
+  .uneditable-input > .span8 {
     width: 760px;
   }
-  input > .span9, textarea > .span9, .uneditable-input > .span9 {
+  input > .span9,
+  textarea > .span9,
+  .uneditable-input > .span9 {
     width: 860px;
   }
-  input > .span10, textarea > .span10, .uneditable-input > .span10 {
+  input > .span10,
+  textarea > .span10,
+  .uneditable-input > .span10 {
     width: 960px;
   }
-  input > .span11, textarea > .span11, .uneditable-input > .span11 {
+  input > .span11,
+  textarea > .span11,
+  .uneditable-input > .span11 {
     width: 1060px;
   }
-  input > .span12, textarea > .span12, .uneditable-input > .span12 {
+  input > .span12,
+  textarea > .span12,
+  .uneditable-input > .span12 {
     width: 1160px;
   }
   .thumbnails {

docs/assets/js/bootstrap-tooltip.js

@@ -206,7 +206,7 @@
       title = $e.attr('data-original-title')
         || (typeof o.title == 'function' ? o.title.call($e[0]) :  o.title)
 
-      title = title.toString().replace(/(^\s*|\s*$)/, "")
+      title = (title || '').toString().replace(/(^\s*|\s*$)/, "")
 
       return title
     }

docs/base-css.html

@@ -287,7 +287,7 @@
   <!-- Lists -->
   <h2>Lists</h2>
   <div class="row">
-    <div class="span3">
+    <div class="span4">
       <h4>Unordered</h4>
       <p><code>&lt;ul&gt;</code></p>
       <ul>
@@ -308,7 +308,7 @@
         <li>Eget porttitor lorem</li>
       </ul>
     </div>
-    <div class="span3">
+    <div class="span4">
       <h4>Unstyled</h4>
       <p><code>&lt;ul class="unstyled"&gt;</code></p>
       <ul class="unstyled">
@@ -329,7 +329,7 @@
         <li>Eget porttitor lorem</li>
       </ul>
     </div>
-    <div class="span3">
+    <div class="span4">
       <h4>Ordered</h4>
       <p><code>&lt;ol&gt;</code></p>
       <ol>
@@ -343,7 +343,9 @@
         <li>Eget porttitor lorem</li>
       </ol>
     </div>
-    <div class="span3">
+  </div><!-- /row -->
+  <div class="row">
+    <div class="span4">
       <h4>Description</h4>
       <p><code>&lt;dl&gt;</code></p>
       <dl>
@@ -356,6 +358,19 @@
         <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
       </dl>
     </div>
+    <div class="span8">
+      <h4>Horizontal</h4>
+      <p><code>&lt;dl class="horizontal"&gt;</code></p>
+      <dl class="horizontal">
+        <dt>Description lists</dt>
+        <dd>A description list is perfect for defining terms.</dd>
+        <dt>Euismod</dt>
+        <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
+        <dd>Donec id elit non mi porta gravida at eget metus.</dd>
+        <dt>Malesuada porta</dt>
+        <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
+      </dl>
+    </div>
   </div><!-- /row -->
 </section>
 
@@ -1299,7 +1314,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
         <td><code>.btn-danger</code></td>
         <td>Indicates a dangerous or potentially negative action</td>
       </tr>
-  	  <tr>
+      <tr>
         <td><button class="btn btn-inverse" href="#">Inverse</button></td>
         <td><code>.btn-inverse</code></td>
         <td>Alternate dark gray button, not tied to a semantic action or use</td>

docs/templates/pages/base-css.mustache

@@ -211,7 +211,7 @@
   <!-- Lists -->
   <h2>{{_i}}Lists{{/i}}</h2>
   <div class="row">
-    <div class="span3">
+    <div class="span4">
       <h4>{{_i}}Unordered{{/i}}</h4>
       <p><code>&lt;ul&gt;</code></p>
       <ul>
@@ -232,7 +232,7 @@
         <li>Eget porttitor lorem</li>
       </ul>
     </div>
-    <div class="span3">
+    <div class="span4">
       <h4>{{_i}}Unstyled{{/i}}</h4>
       <p><code>&lt;ul class="unstyled"&gt;</code></p>
       <ul class="unstyled">
@@ -253,7 +253,7 @@
         <li>Eget porttitor lorem</li>
       </ul>
     </div>
-    <div class="span3">
+    <div class="span4">
       <h4>{{_i}}Ordered{{/i}}</h4>
       <p><code>&lt;ol&gt;</code></p>
       <ol>
@@ -267,7 +267,9 @@
         <li>Eget porttitor lorem</li>
       </ol>
     </div>
-    <div class="span3">
+  </div><!-- /row -->
+  <div class="row">
+    <div class="span4">
       <h4>{{_i}}Description{{/i}}</h4>
       <p><code>&lt;dl&gt;</code></p>
       <dl>
@@ -280,6 +282,19 @@
         <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
       </dl>
     </div>
+    <div class="span8">
+      <h4>{{_i}}Horizontal{{/i}}</h4>
+      <p><code>&lt;dl class="horizontal"&gt;</code></p>
+      <dl class="horizontal">
+        <dt>{{_i}}Description lists{{/i}}</dt>
+        <dd>{{_i}}A description list is perfect for defining terms.{{/i}}</dd>
+        <dt>Euismod</dt>
+        <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
+        <dd>Donec id elit non mi porta gravida at eget metus.</dd>
+        <dt>Malesuada porta</dt>
+        <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
+      </dl>
+    </div>
   </div><!-- /row -->
 </section>
 
@@ -1223,7 +1238,7 @@
         <td><code>.btn-danger</code></td>
         <td>{{_i}}Indicates a dangerous or potentially negative action{{/i}}</td>
       </tr>
-  	  <tr>
+      <tr>
         <td><button class="btn btn-inverse" href="#">{{_i}}Inverse{{/i}}</button></td>
         <td><code>.btn-inverse</code></td>
         <td>{{_i}}Alternate dark gray button, not tied to a semantic action or use{{/i}}</td>

less/type.less

@@ -130,6 +130,41 @@ dt {
 dd {
   margin-left: @baseLineHeight / 2;
 }
+// Horizontal layout (like forms)
+dl.horizontal {
+  dt {
+    float: left;
+    clear: left;
+    width: 120px;
+    text-align: right;
+  }
+  dd {
+    margin-left: 130px;
+  }
+  &.horizontal-mini {
+    dt { width:        50px; }
+    dd { margin-left:  60px; }
+  }
+  &.horizontal-small {
+    dt { width:        90px; }
+    dd { margin-left: 100px; }
+  }
+  &.horizontal-normal {
+    // no additional styles needed
+  }
+  &.horizontal-large {
+    dt { width:       140px; }
+    dd { margin-left: 150px; }
+  }
+  &.horizontal-xlarge {
+    dt { width:       170px; }
+    dd { margin-left: 180px; }
+  }
+  &.horizontal-xxlarge {
+    dt { width:       190px; }
+    dd { margin-left: 200px; }
+  }
+}
 
 // MISC
 // ----
@@ -198,7 +233,7 @@ blockquote {
 // Quotes
 q:before,
 q:after,
-blockquote:before, 
+blockquote:before,
 blockquote:after {
   content: "";
 }