Custom styles for Bootstrap's .dl-horizontal class to display key-value pairs

dl-metadata.less

.dl-metadata {
  dl {
    border-top: 1px solid #e5e5e5;
    width: 100%;
    overflow: hidden;

    dt {
      width: 100%;
      padding: 12px 20px 0 0;
      color: #888;
      text-align: left;
      text-transform: uppercase;
      font-weight: normal;
      font-size: 10px;
      white-space: normal;
      }
      
    dd {
      margin-left: 0;
      padding: 0 0 8px 0;
      border-bottom: 1px solid #e5e5e5;
      }

    dd:after {
      .clear();
      }
    }
    
  @media (min-width: 768px) {
    dl dt {
      width: 30%;
      }
      
    dl dd {
      padding-top: 8px;
      }
    }
  }