<div class="container">
  <div class="page-header">
    <h1>Bootstrap 3 Horizontal Definition Lists</h1>
  </div>
  <!--  /page-header  -->


  <h2>Auto truncated - default</h2>

  <dl class="dl-horizontal">
    <dt>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</dt>
    <dd>Laudantium beatae, consectetur inventore quia nesciunt blanditiis facilis possimus, odit vero temporibus omnis necessitatibus iste doloremque! Iste nisi quod eveniet aliquid ducimus.</dd>
    <dt>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</dt>
    <dd>Laudantium beatae, consectetur inventore quia nesciunt blanditiis facilis possimus, odit vero temporibus omnis necessitatibus iste doloremque! Iste nisi quod eveniet aliquid ducimus.</dd>
    <dt>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</dt>
    <dd>Laudantium beatae, consectetur inventore quia nesciunt blanditiis facilis possimus, odit vero temporibus omnis necessitatibus iste doloremque! Iste nisi quod eveniet aliquid ducimus.</dd>
    <dt>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</dt>
    <dd>Laudantium beatae, consectetur inventore quia nesciunt blanditiis facilis possimus, odit vero temporibus omnis necessitatibus iste doloremque! Iste nisi quod eveniet aliquid ducimus.</dd>
  </dl>


  <h2>No truncating</h2>

  <dl class="dl-horizontal dl-horizontal-notrunc">
    <dt>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</dt>
    <dd>Laudantium beatae, consectetur inventore quia nesciunt blanditiis facilis possimus, odit vero temporibus omnis necessitatibus iste doloremque! Iste nisi quod eveniet aliquid ducimus.</dd>
    <dt>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</dt>
    <dd>Laudantium beatae, consectetur inventore quia nesciunt blanditiis facilis possimus, odit vero temporibus omnis necessitatibus iste doloremque! Iste nisi quod eveniet aliquid ducimus.</dd>
    <dt>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</dt>
    <dd>Laudantium beatae, consectetur inventore quia nesciunt blanditiis facilis possimus, odit vero temporibus omnis necessitatibus iste doloremque! Iste nisi quod eveniet aliquid ducimus.</dd>
    <dt>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</dt>
    <dd>Laudantium beatae, consectetur inventore quia nesciunt blanditiis facilis possimus, odit vero temporibus omnis necessitatibus iste doloremque! Iste nisi quod eveniet aliquid ducimus.</dd>
  </dl>

</div>
@media (min-width: 768px) {
  .dl-horizontal.dl-horizontal-notrunc dt {
    float: left;
    width: 160px;
    overflow: visible;
    clear: left;
    text-align: left;
    text-overflow: clip;
    white-space: normal;
  }
}

.dl-horizontal dd {
  margin-bottom: .5em;
}

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. //maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js