<p dir="auto">(Consider this a feature request)</p>
<p dir="auto">This is most obvious when I do something simple like this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;dl&gt;
  &lt;dt&gt;Your name&lt;/dt&gt;
  &lt;dd&gt;Eric&lt;/dd&gt;
  &lt;dt&gt;Timezone&lt;/dt&gt;
  &lt;dd&gt;Australia/Sydney&lt;/dd&gt;
  &lt;dt&gt;Created&lt;/dt&gt;
  &lt;dd&gt;Sunday, 23-Sep-12 22:46:40 UTC&lt;/dd&gt;
&lt;/dl&gt;
&lt;div class=&quot;col-md-offset-2&quot;&gt;
  &lt;a class=&quot;btn btn-default&quot; href=&quot;edit&quot;&gt;Edit your details&lt;/a&gt;
  &lt;a class=&quot;btn btn-default&quot; href=&quot;logout&quot;&gt;Logout&lt;/a&gt;
&lt;/div&gt;"><pre class="notranslate"><code class="notranslate">&lt;dl&gt;
  &lt;dt&gt;Your name&lt;/dt&gt;
  &lt;dd&gt;Eric&lt;/dd&gt;
  &lt;dt&gt;Timezone&lt;/dt&gt;
  &lt;dd&gt;Australia/Sydney&lt;/dd&gt;
  &lt;dt&gt;Created&lt;/dt&gt;
  &lt;dd&gt;Sunday, 23-Sep-12 22:46:40 UTC&lt;/dd&gt;
&lt;/dl&gt;
&lt;div class="col-md-offset-2"&gt;
  &lt;a class="btn btn-default" href="edit"&gt;Edit your details&lt;/a&gt;
  &lt;a class="btn btn-default" href="logout"&gt;Logout&lt;/a&gt;
&lt;/div&gt;
</code></pre></div>
<p dir="auto">1200 breakpoint:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/2a28a33e4cd70bef99469358678893128be25217498d0d5e13b5f06f08b10634/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f323630353436372f313430373333392f34323139323664382d336436612d313165332d386436642d3734656133663066303866382e706e67"><img src="https://camo.githubusercontent.com/2a28a33e4cd70bef99469358678893128be25217498d0d5e13b5f06f08b10634/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f323630353436372f313430373333392f34323139323664382d336436612d313165332d386436642d3734656133663066303866382e706e67" alt="image" data-canonical-src="https://f.cloud.github.com/assets/2605467/1407339/421926d8-3d6a-11e3-8d6d-74ea3f0f08f8.png" style="max-width: 100%;"></a></p>
<p dir="auto">992 breakpoint:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/a6bbb08158b377aea1fbb83a19f3710ad6c9b47b9bff32d9d591a2e30d4bb85a/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f323630353436372f313430373333382f33303638646432612d336436612d313165332d396437372d3131383265656237313364342e706e67"><img src="https://camo.githubusercontent.com/a6bbb08158b377aea1fbb83a19f3710ad6c9b47b9bff32d9d591a2e30d4bb85a/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f323630353436372f313430373333382f33303638646432612d336436612d313165332d396437372d3131383265656237313364342e706e67" alt="image" data-canonical-src="https://f.cloud.github.com/assets/2605467/1407338/3068dd2a-3d6a-11e3-9d77-1182eeb713d4.png" style="max-width: 100%;"></a></p>
<p dir="auto">768 breakpoint:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/939bfce472a5d5acb2532f20d909cb97d718e21a19231c564b52a9f13467e61d/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f323630353436372f313430373333342f31643137326564652d336436612d313165332d393464612d3932333661643730383032382e706e67"><img src="https://camo.githubusercontent.com/939bfce472a5d5acb2532f20d909cb97d718e21a19231c564b52a9f13467e61d/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f323630353436372f313430373333342f31643137326564652d336436612d313165332d393464612d3932333661643730383032382e706e67" alt="image" data-canonical-src="https://f.cloud.github.com/assets/2605467/1407334/1d172ede-3d6a-11e3-94da-9236ad708028.png" style="max-width: 100%;"></a></p>
<p dir="auto">I've got the result I want by doing the following in my site css (but this only works right with full width containers)</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="@media (min-width: 768px) {
  .dl-horizontal dt {
    width: 90px;
    }
  .dl-horizontal dd {
    margin-left: 111px;
    padding-left: 15px !important;
    }
}
@media (min-width: 992px) {
  .dl-horizontal dt {
    width: 126px;
    }
  .dl-horizontal dd {
    margin-left: 146px;
    }
}
@media (min-width: 1200px) {
  .dl-horizontal dt {
    width: 160px;
    }
  .dl-horizontal dd {
    margin-left: 180px;
    }
}"><pre class="notranslate"><code class="notranslate">@media (min-width: 768px) {
  .dl-horizontal dt {
    width: 90px;
    }
  .dl-horizontal dd {
    margin-left: 111px;
    padding-left: 15px !important;
    }
}
@media (min-width: 992px) {
  .dl-horizontal dt {
    width: 126px;
    }
  .dl-horizontal dd {
    margin-left: 146px;
    }
}
@media (min-width: 1200px) {
  .dl-horizontal dt {
    width: 160px;
    }
  .dl-horizontal dd {
    margin-left: 180px;
    }
}
</code></pre></div>
<p dir="auto">It would be great if it was possible to align description lists with the grid system. I have a description list and below a grid and I would like the left and right columns to match.</p>
<p dir="auto">The columns currently don't match, because:</p>
<ul dir="auto">
<li>dt has a fixed width of 160px</li>
<li>grid columns have dynamic widths</li>
<li>dd has a fixed left padding of 20px</li>
<li>grid columns have a padding of 30px by default</li>
</ul>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Some text

&lt;dt&gt; item 1 | &lt;dd&gt; Description
&lt;dt&gt; item 2 | &lt;dd&gt; Description
&lt;dt&gt; item 3 | &lt;dd&gt; Description

Horizontal form, using a 3:9 grid

Field 1 label  | Field 1
Field 2 label  | Field 2
Field 3 label  | Field 3

            ^--^
 both the column start and the
 column padding are different"><pre class="notranslate"><code class="notranslate">Some text

&lt;dt&gt; item 1 | &lt;dd&gt; Description
&lt;dt&gt; item 2 | &lt;dd&gt; Description
&lt;dt&gt; item 3 | &lt;dd&gt; Description

Horizontal form, using a 3:9 grid

Field 1 label  | Field 1
Field 2 label  | Field 2
Field 3 label  | Field 3

            ^--^
 both the column start and the
 column padding are different
</code></pre></div>