dl(detail list) not working in bootstrap 4

I had the same exact problem and solved it using .row class as suggested by @Paulie_D

Here is what I did

 <section class="landing">
  <div class="container">
    <dl class="row">
      <dt class="col-sm-3">col1</dt>
      <dd class="col-sm-9">col2</dd>
    </dl>
  </div>
</section>

UPDATE You can also add text align right and left

 <section class="landing">
  <div class="container">
    <dl class="row">
      <dt class="col-sm-3 text-right">col1</dt>
      <dd class="col-sm-9 text-left">col2</dd>
    </dl>
  </div>
</section>

That class has been removed from Bootstrap in V4.

From the Migration documents of Bootstrap 4

.dl-horizontal has been dropped. Instead, use .row on <dl> and use grid column classes (or mixins) on its <dt> and <dd> children.

If you've embedded .dl-horizontal in content, you could always add the Bootstrap 3 code back into your own .css stylesheets. From the Bootstrap 3 source:

@media (min-width: 768px) {
  .dl-horizontal dt {
    float: left;
    width: 160px;
    clear: left;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dl-horizontal dd {
    margin-left: 180px;
  }
}

...

.dl-horizontal dd:before,
.dl-horizontal dd:after, {
  display: table;
  content: " ";
}

...

.dl-horizontal dd:after {
  clear: both;
}