How to layout labels and values in Bootstrap 4?

Question

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.

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 col-md-N 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.

Also Bootstraps <dl> styling does not seem correct for this.

Right now this is being done with a table.

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).

Here's my code so far:

    <table>
        <tbody>
            <tr>
                <td class="text-right"><label class="mr-2">Short:</label></td>
                <td>Short data</td>
            </tr>
            <tr>
                <td class="text-right"><label class="mr-2">A very long label:</label></td>
                <td>1/2/2018</td>
            </tr>
            <tr>
                <td class="text-right"><label class="mr-2">An even longer label:</label></td>
                <td>and longer data...</td>
            </tr>
        </tbody>
    </table>
    <hr />
    <table>
        <tbody>
            <tr>
                <td><label>Price:</label></td>
                <td class="text-right">$100.00</td>
            </tr>
            <tr>
                <td><label>Rebate:</label></td>
                <td class="text-right">$10.00</td>
            </tr>
            <tr>
                <td><label>Total:</label></td>
                <td class="text-right">$90.00</td>
            </tr>
        </tbody>
    </table>

PS: In the past I have tried some other options, but I want to use something easy from Bootstrap 4.

Answer 1

Using a dl is actually appropriate and will work fine if you are ok with truncated labels.

Here is the doc: https://getbootstrap.com/docs/4.0/content/typography/#description-list-alignment

And here is an example:

<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>

  <dt class="col-sm-3">Euismod</dt>
  <dd class="col-sm-9">
    <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
    <p>Donec id elit non mi porta gravida at eget metus.</p>
  </dd>
</dl>

Answer 2

EDIT: In that case, tables are well suitable, yes.

Use the following structure:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<table>
    <tr>
        <th class="small text-muted pr-2" scope="row">Label 1</th>
        <td>Value 1</td>
    </tr>
    <tr>
        <th class="small text-muted pr-2" scope="row">Label 2</th>
        <td>Value 2</td>
    </tr>
    <tr>
        <th class="small text-muted pr-2" scope="row">Label 3</th>
        <td>Value 3</td>
    </tr>
</table>

You could also apply a bit of custom css but I think those native Bootstrap 4 classes do pretty much exactly what you want.

The pr-2 class applies "padding-right 2 units" to the labels.