リストグループ：list-group

  <ul class="list-group">
    <li class="list-group-item">リスト項目1</li>
    <li class="list-group-item">リスト項目2</li>
    <li class="list-group-item">リスト項目3</li>
  </ul>

  <ul class="list-inline">
    <li class="list-inline-item">インラインリスト項目</li>
    <li class="list-inline-item">インラインリスト項目</li>
    <li class="list-inline-item">インラインリスト項目</li>
  </ul>

  <ul class="list-unstyled">
    <li>リストマーカーの無いリスト項目</li>
    <li>リストマーカーの無いリスト項目</li>
    <li>リストマーカーの無いリスト項目</li>
  </ul>

  <ul class="list-group">
    <li class="list-group-item active">リスト項目1</li>
    <li class="list-group-item">リスト項目2</li>
    <li class="list-group-item">リスト項目3</li>
  </ul>

  <ul class="list-group">
    <li class="list-group-item list-group-item-primary">これは「primary」のリスト項目です。</li>
    <li class="list-group-item list-group-item-secondary">これは「secondary」のリスト項目です。</li>
    <li class="list-group-item list-group-item-success">これは「success」のリスト項目です。</li>
    <li class="list-group-item list-group-item-danger">これは「danger」のリスト項目です。</li>
    <li class="list-group-item list-group-item-warning">これは「warning」のリスト項目です。</li>
    <li class="list-group-item list-group-item-info">これは「info」のリスト項目です。</li>
    <li class="list-group-item list-group-item-light">これは「light」のリスト項目です。</li>
    <li class="list-group-item list-group-item-dark">これは「dark」のリスト項目です。</li>
    <li class="list-group-item">これは「デフォルト」のリスト項目です。</li>
  </ul>

  <ul class="list-group">
    <li class="list-group-item disabled">リスト項目1</li>
    <li class="list-group-item">リスト項目2</li>
    <li class="list-group-item">リスト項目3</li>
  </ul>

  <ul class="list-group">
    <!-- justify-content-betweenで左と右端にする -->
    <!-- align-items-centerで縦整列にする -->
    <li class="list-group-item d-flex justify-content-between align-items-center">
      リスト項目1
      <span class="badge badge-primary badge-pill">14</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
      リスト項目2
      <span class="badge badge-primary badge-pill">2</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
      リスト項目3
      <span class="badge badge-primary badge-pill">1</span>
    </li>
  </ul>

  <!-- rowをcolで制御する -->
  <dl class="row">
    <dt class="col-sm-3">dt1</dt>
    <dd class="col-sm-9">用語1の説明。</dd>
    <!-- text-truncateがcolの幅で自動設定される -->
    <dt class="col-sm-3 text-truncate">長いテキストは切り捨てて省略</dt>
    <dd class="col-sm-9">用語2の説明。</dd>
    <dt class="col-sm-3">用語3</dt>
    <dd class="col-sm-9">
      <dl class="row">
        <dt class="col-sm-4">ネストされた用語4</dt>
        <dd class="col-sm-8">ネストされた用語4の説明</dd>
      </dl>
    </dd>
  </dl>

  <!-- サイドメニューでリンクさせる -->
  <div class="list-group">
    <a href="#" class="list-group-item list-group-item-action">リスト項目1</a>
    <a href="#" class="list-group-item list-group-item-action">リスト項目2</a>
    <a href="#" class="list-group-item list-group-item-action disabled">リスト項目3</a>
  </div>

  <div class="list-group">
    <a href="#" class="list-group-item list-group-item-action list-group-item-primary">これは「primary」のリスト項目です。</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">これは「secondary」のリスト項目です。</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-success">これは「success」のリスト項目です。</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-danger">これは「danger」のリスト項目です。</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-warning">これは「warning」のリスト項目です。</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-info">これは「info」のリスト項目です。</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-light">これは「light」のリスト項目です。</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-dark">これは「dark」のリスト項目です。</a>
    <a href="#" class="list-group-item list-group-item-action">これは「デフォルト」のリスト項目です。</a>
  </div>

  <!-- activeを付けると、背景色が濃くなる -->
  <div class="list-group">
    <a href="#" class="list-group-item list-group-item-action list-group-item-primary active">これはアクティブ状態の「primary」。</a>
    <a href="#"
      class="list-group-item list-group-item-action list-group-item-secondary active">これはアクティブ状態の「secondary」</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-success active">これはアクティブ状態の「success」。</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-danger active">これはアクティブ状態の「danger」</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-warning active">これはアクティブ状態の「warning」</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-info active">これはアクティブ状態の「info」</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-light active">これはアクティブ状態の「light」</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-dark active">これはアクティブ状態の「dark」</a>
    <a href="#" class="list-group-item list-group-item-action active">これはアクティブ状態の「デフォルト（何も設定なし）」</a>
  </div>

  <div class="list-group">
    <a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
      <!-- justify-content-betweenを使って左右に設置する -->
      <div class="d-flex w-100 justify-content-between">
        <h5 class="mb-1">hヘッダ</h5>
        <small>smallコンテンツ</small>
      </div>
      <p class="mb-1">pコンテンツ</p>
      <small>smallコンテンツ</small>
    </a>
    <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
      <div class="d-flex w-100 justify-content-between">
        <h5 class="mb-1">hヘッダ</h5>
        <small class="text-muted">smallコンテンツ</small>
      </div>
      <p class="mb-1">pコンテンツ</p>
      <small class="text-muted">smallコンテンツ</small>
    </a>
  </div>

  <div>
    <ul class="list-group list-group-flush">
      <li class="list-group-item">リスト項目1</li>
      <li class="list-group-item">リスト項目2</li>
      <li class="list-group-item">リスト項目3</li>
    </ul>
  </div>

  <div class="list-group">
    <button type="button" class="list-group-item list-group-item-action">リスト項目1</button>
    <button type="button" class="list-group-item list-group-item-action">リスト項目2</button>
    <button type="button" class="list-group-item list-group-item-action" disabled>リスト項目3</button>
  </div>