How to get horizontal layout to definition lists with cards with Bootstrap 4

Question

I have been building a web application using Bootstrap 3. Within that, I used panels to group user elements - displaying data, simple edit forms etc.

I would use a dl with the label as a dt and the value as the dd. Similarly, I would use forms with the labels inline with the fields

<div class="panel-body">
  <dl class="dl-horizontal">
    <dt>Name</dt>
    <dd>Value</dd>
  </dl>
</div>

I could use dl-horizontal just fine within the panel.

Now, however, with Bootstrap 4 panels have become cards, and the dl-horizontal class does not seem to have an effect.

<div class="card-body">
  <div class="card-text">
    <dl class="dl-horizontal">
      <dt>Name</dt>
      <dd>Value</dd>
    </dl>
  </div>
</div>

Update Removed references to forms. I had initially had issues with form-horizontal as well, Bootstrap4 does horizontal forms differently

Answer 1

To get fully responsive behavior, use:

<div class="card-body">
  <div class="card-text">
    <dl class="row">
      <dt class="col-sm-3 text-md-right">Name</dt>
      <dd class="col-sm-9">Value</dd>
    </dl>
  </div>
</div>

Because in Bootstrap 3 the dl-horizontal class only applied to sm+ screens, and it aligned the <dt> to the right.

Answer 2

Bootstrap 4 no longer supports dl-horizontal. The recommended alternative is to use .row and .col*.

<div class="card-body">
  <div class="card-text">
    <dl class="row">
      <dt class="col-4">Name</dt>
      <dd class="col-8">Value</dd>
    </dl>
  </div>
</div>

worked for me

Answer 3

Use a combination of list-inline and list-inline-item:

<div class="card-body">
  <div class="card-text">
    <dl class="list-inline">
      <dt class="list-inline-item">Name</dt>
      <dd class="list-inline-item">Value</dd>
    </dl>
  </div>
</div>