Use grid classes or mixins on .dl-horizontal, update docs to include it, removes auto truncate and makes .text-overflow mixin into a .text-truncate class and mixin combo for better granularity

docs/assets/css/docs.min.css.map

@@ -16,7 +16,7 @@
 		"../../../scss/mixins/_size.scss",
 		"../../../scss/mixins/_tab-focus.scss",
 		"../../../scss/mixins/_text-emphasis.scss",
-		"../../../scss/mixins/_text-overflow.scss",
+		"../../../scss/mixins/_text-truncate.scss",
 		"../../../scss/mixins/_alert.scss",
 		"../../../scss/mixins/_buttons.scss",
 		"../../../scss/mixins/_pagination.scss",

docs/components/typography.md

@@ -334,19 +334,22 @@ A list of terms with their associated descriptions.
 
 ### Horizontal description
 
-Make terms and descriptions in `<dl>` line up side-by-side. Starts off stacked like default `<dl>`s, but when the navbar expands, so do these.
+Align terms and descriptions horizontally by using our grid system's predefined classes (or semantic mixins). For longer terms, you can optionally add a `.text-truncate` class to truncate the text with an ellipsis.
 
 {% example html %}
 <dl class="dl-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>
-  <dt>Felis euismod semper eget lacinia</dt>
-  <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
+  <dt class="col-sm-3">Description lists</dt>
+  <dd class="col-sm-9">A description list is perfect for defining terms.</dd>
+
+  <dt class="col-sm-3">Euismod</dt>
+  <dd class="col-sm-9">Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
+  <dd class="col-sm-9 col-sm-offset-3">Donec id elit non mi porta gravida at eget metus.</dd>
+  
+  <dt class="col-sm-3">Malesuada porta</dt>
+  <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
+  
+  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
+  <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
 </dl>
 {% endexample %}
 

docs/dist/css/bootstrap.css

@@ -486,28 +486,17 @@ dd {
   margin-left: 0;
 }
 
-.dl-horizontal dd:before, .dl-horizontal dd:after {
+.dl-horizontal {
+  margin-right: -1.5rem;
+  margin-left: -1.5rem;
+}
+.dl-horizontal:before, .dl-horizontal:after {
   display: table; 
   content: " ";
 }
-.dl-horizontal dd:after {
+.dl-horizontal:after {
   clear: both;
 }
-@media (min-width: 34em) {
-  .dl-horizontal dt {
-    float: left;
-    width: 160px;
-    overflow: hidden;
-    clear: left;
-    text-align: right;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .dl-horizontal dd {
-    margin-left: 180px;
-  }
-}
 
 abbr[title], abbr[data-original-title] {
   cursor: help;
@@ -5072,6 +5061,12 @@ a.list-group-item-state.active, a.list-group-item-state.active:hover, a.list-gro
   white-space: nowrap;
 }
 
+.text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .text-lowercase {
   text-transform: lowercase;
 }