</ul>
{% endexample %}
-### Horizontal description
+### Description list alignment
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">
+<dl class="row">
<dt class="col-sm-3">Description lists</dt>
<dd class="col-sm-9">A description list is perfect for defining terms.</dd>
- Moved all `.text-` utilities to the `_utilities.scss` file.
- Dropped the `.page-header` class entirely.
-- `.dl-horizontal` now requires grid classes, increasing flexbility in column widths.
+- `.dl-horizontal` has been dropped. Instead, use `.row` on `<dl>` and use grid column classes on its `<dt>` and `<dd>` children.
- Custom `<blockquote>` styling has moved to classes—`.blockquote` and the `.blockquote-reverse` modifier.
### Images
}
}
-// Horizontal description lists w/ grid classes
-.dl-horizontal {
- margin-right: -$grid-gutter-width;
- margin-left: -$grid-gutter-width;
- @include clearfix;
-}
-
//
// Misc