title: How to layout labels and values in Bootstrap 4?
body: <p>I'm looking for a way to layout labels and data throughout my application.  I want a solution that will work for my example below, but also other data.</p>
  
  <p><a href="https://i.stack.imgur.com/9443R.png" rel="noreferrer"><img src="https://i.stack.imgur.com/9443R.png" alt="enter image description here"></a></p>
  
  <p>I want to lay out labels and values so that they are left aligned in a grid format.  I don't want to use the Bootstrap 4 <code>col-md-N</code> classes because I don't want to hard code column sizes.  Instead I want the label and data widths to define the widths of the columns.  I don't want to always have to change the column sizes when adding new labels that might have longer text.  I also want to be able to left or right align a column easily.  </p>
  
  <p>Also Bootstraps <code>&lt;dl&gt;</code> styling does not seem correct for this.</p>
  
  <p>Right now this is being done with a table.</p>
  
  <p>Also, to be clear, this is not a form, so the Bootstrap form elements don't seem to be the correct option either.  (There is nothing to post).</p>
  
  <p>Here's my code so far:</p>
  
  <pre><code>    &lt;table&gt;
          &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;td class="text-right"&gt;&lt;label class="mr-2"&gt;Short:&lt;/label&gt;&lt;/td&gt;
                  &lt;td&gt;Short data&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td class="text-right"&gt;&lt;label class="mr-2"&gt;A very long label:&lt;/label&gt;&lt;/td&gt;
                  &lt;td&gt;1/2/2018&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td class="text-right"&gt;&lt;label class="mr-2"&gt;An even longer label:&lt;/label&gt;&lt;/td&gt;
                  &lt;td&gt;and longer data...&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
      &lt;hr /&gt;
      &lt;table&gt;
          &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;label&gt;Price:&lt;/label&gt;&lt;/td&gt;
                  &lt;td class="text-right"&gt;$100.00&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;label&gt;Rebate:&lt;/label&gt;&lt;/td&gt;
                  &lt;td class="text-right"&gt;$10.00&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;label&gt;Total:&lt;/label&gt;&lt;/td&gt;
                  &lt;td class="text-right"&gt;$90.00&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  </code></pre>
  
  <p>PS: In the past I have tried some <a href="https://plnkr.co/edit/50Pq71?p=preview" rel="noreferrer">other options</a>, but I want to use something easy from Bootstrap 4.</p>