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/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;
 }