list-group

bootstrap5.css

.card > .list-group:first-child .list-group-item:first-child {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}

bootstrap5.css

.card > .list-group:last-child .list-group-item:last-child {
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

bootstrap5.css

.card-header + .list-group .list-group-item:first-child {
  border-top: 0;
}

bootstrap5.css

.list-group {
  /* flexでcolumn形式にする */
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
}

bootstrap5.css

.list-group-item-action {
  /* 幅100%にして色を付けて、テキストの位置は継承する */
  /* aやbuttonのインラインをリストにするために使う */
  width: 100%;
  color: #495057;
  text-align: inherit;
}

bootstrap5.css

.list-group-item-action:hover,
.list-group-item-action:focus {
  z-index: 1;
  color: #495057;
  text-decoration: none;
  background-color: #f8f9fa;
}

bootstrap5.css

.list-group-item-action:active {
  color: #212529;
  background-color: #e9ecef;
}

bootstrap5.css

.list-group-item {
  position: relative;
  display: block;
  padding: 0.75rem 1.25rem;
  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.125);
}

bootstrap5.css

.list-group-item:first-child {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}

bootstrap5.css

.list-group-item:last-child {
  margin-bottom: 0;
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

bootstrap5.css

.list-group-item.disabled,
.list-group-item:disabled {
  color: #6c757d;
  pointer-events: none;
  background-color: #fff;
}

bootstrap5.css

.list-group-item.active {
  z-index: 2;
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

bootstrap5.css

.list-group-horizontal {
  -ms-flex-direction: row;
  flex-direction: row;
}

bootstrap5.css

.list-group-horizontal .list-group-item {
  margin-right: -1px;
  margin-bottom: 0;
}

bootstrap5.css

.list-group-horizontal .list-group-item:first-child {
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
  border-top-right-radius: 0;
}

bootstrap5.css

.list-group-horizontal .list-group-item:last-child {
  margin-right: 0;
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0;
}

bootstrap5.css

@media (min-width: 576px) {
  .list-group-horizontal-sm {
    -ms-flex-direction: row;
    flex-direction: row;
  }
  .list-group-horizontal-sm .list-group-item {
    margin-right: -1px;
    margin-bottom: 0;
  }
  .list-group-horizontal-sm .list-group-item:first-child {
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
    border-top-right-radius: 0;
  }
  .list-group-horizontal-sm .list-group-item:last-child {
    margin-right: 0;
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    border-bottom-left-radius: 0;
  }
}

bootstrap5.css

@media (min-width: 768px) {
  .list-group-horizontal-md {
    -ms-flex-direction: row;
    flex-direction: row;
  }
  .list-group-horizontal-md .list-group-item {
    margin-right: -1px;
    margin-bottom: 0;
  }
  .list-group-horizontal-md .list-group-item:first-child {
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
    border-top-right-radius: 0;
  }
  .list-group-horizontal-md .list-group-item:last-child {
    margin-right: 0;
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    border-bottom-left-radius: 0;
  }
}

bootstrap5.css

@media (min-width: 992px) {
  .list-group-horizontal-lg {
    -ms-flex-direction: row;
    flex-direction: row;
  }
  .list-group-horizontal-lg .list-group-item {
    margin-right: -1px;
    margin-bottom: 0;
  }
  .list-group-horizontal-lg .list-group-item:first-child {
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
    border-top-right-radius: 0;
  }
  .list-group-horizontal-lg .list-group-item:last-child {
    margin-right: 0;
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    border-bottom-left-radius: 0;
  }
}

bootstrap5.css

@media (min-width: 1200px) {
  .list-group-horizontal-xl {
    -ms-flex-direction: row;
    flex-direction: row;
  }
  .list-group-horizontal-xl .list-group-item {
    margin-right: -1px;
    margin-bottom: 0;
  }
  .list-group-horizontal-xl .list-group-item:first-child {
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
    border-top-right-radius: 0;
  }
  .list-group-horizontal-xl .list-group-item:last-child {
    margin-right: 0;
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    border-bottom-left-radius: 0;
  }
}

bootstrap5.css

.list-group-flush .list-group-item {
  border-right: 0;
  border-left: 0;
  border-radius: 0;
}

bootstrap5.css

.list-group-flush .list-group-item:last-child {
  margin-bottom: -1px;
}

bootstrap5.css

.list-group-flush:first-child .list-group-item:first-child {
  border-top: 0;
}

bootstrap5.css

.list-group-flush:last-child .list-group-item:last-child {
  margin-bottom: 0;
  border-bottom: 0;
}

bootstrap5.css

.list-group-item-primary {
  color: #004085;
  background-color: #b8daff;
}

bootstrap5.css

.list-group-item-primary.list-group-item-action:hover,
.list-group-item-primary.list-group-item-action:focus {
  color: #004085;
  background-color: #9fcdff;
}

bootstrap5.css

.list-group-item-primary.list-group-item-action.active {
  color: #fff;
  background-color: #004085;
  border-color: #004085;
}

bootstrap5.css

.list-group-item-secondary {
  color: #383d41;
  background-color: #d6d8db;
}

bootstrap5.css

.list-group-item-secondary.list-group-item-action:hover,
.list-group-item-secondary.list-group-item-action:focus {
  color: #383d41;
  background-color: #c8cbcf;
}

bootstrap5.css

.list-group-item-secondary.list-group-item-action.active {
  color: #fff;
  background-color: #383d41;
  border-color: #383d41;
}

bootstrap5.css

.list-group-item-success {
  color: #155724;
  background-color: #c3e6cb;
}

bootstrap5.css

.list-group-item-success.list-group-item-action:hover,
.list-group-item-success.list-group-item-action:focus {
  color: #155724;
  background-color: #b1dfbb;
}

bootstrap5.css

.list-group-item-success.list-group-item-action.active {
  color: #fff;
  background-color: #155724;
  border-color: #155724;
}

bootstrap5.css

.list-group-item-info {
  color: #0c5460;
  background-color: #bee5eb;
}

bootstrap5.css

.list-group-item-info.list-group-item-action:hover,
.list-group-item-info.list-group-item-action:focus {
  color: #0c5460;
  background-color: #abdde5;
}

bootstrap5.css

.list-group-item-info.list-group-item-action.active {
  color: #fff;
  background-color: #0c5460;
  border-color: #0c5460;
}

bootstrap5.css

.list-group-item-warning {
  color: #856404;
  background-color: #ffeeba;
}

bootstrap5.css

.list-group-item-warning.list-group-item-action:hover,
.list-group-item-warning.list-group-item-action:focus {
  color: #856404;
  background-color: #ffe8a1;
}

bootstrap5.css

.list-group-item-warning.list-group-item-action.active {
  color: #fff;
  background-color: #856404;
  border-color: #856404;
}

bootstrap5.css

.list-group-item-danger {
  color: #721c24;
  background-color: #f5c6cb;
}

bootstrap5.css

.list-group-item-danger.list-group-item-action:hover,
.list-group-item-danger.list-group-item-action:focus {
  color: #721c24;
  background-color: #f1b0b7;
}

bootstrap5.css

.list-group-item-danger.list-group-item-action.active {
  color: #fff;
  background-color: #721c24;
  border-color: #721c24;
}

bootstrap5.css

.list-group-item-light {
  color: #818182;
  background-color: #fdfdfe;
}

bootstrap5.css

.list-group-item-light.list-group-item-action:hover,
.list-group-item-light.list-group-item-action:focus {
  color: #818182;
  background-color: #ececf6;
}

bootstrap5.css

.list-group-item-light.list-group-item-action.active {
  color: #fff;
  background-color: #818182;
  border-color: #818182;
}

bootstrap5.css

.list-group-item-dark {
  color: #1b1e21;
  background-color: #c6c8ca;
}

bootstrap5.css

.list-group-item-dark.list-group-item-action:hover,
.list-group-item-dark.list-group-item-action:focus {
  color: #1b1e21;
  background-color: #b9bbbe;
}

bootstrap5.css

.list-group-item-dark.list-group-item-action.active {
  color: #fff;
  background-color: #1b1e21;
  border-color: #1b1e21;
}

html bootstrap5 Sample

カード内のボーダーの無いリストグループ：list-group-flush

カードのタイトル

カードの内容

リスト01
リスト02
リスト03

カード内リンクカード内リンク

  <div class="card" style="max-width: 25rem;">
    <img class="card-img-top" src="https://via.placeholder.com/318x180/FFFF00/000000?text=.card-img-top" alt="image">
    <div class="card-body">
      <h4 class="card-title">カードのタイトル</h4>
      <p class="card-text">カードの内容</p>
    </div>
    <!-- list-group-flushは、ボーダーの無いリストグループ-->
    <ul class="list-group list-group-flush">
      <li class="list-group-item">リスト01</li>
      <li class="list-group-item">リスト02</li>
      <li class="list-group-item">リスト03</li>
    </ul>
    <!-- カードの本文：card-body -->
    <div class="card-body">
      <a href="#" class="card-link">カード内リンク</a>
      <a href="#" class="card-link">カード内リンク</a>
    </div>
  </div>

リストグループ：list-group

リスト項目1
リスト項目2
リスト項目3

  <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>

リスト項目をアクティブ状態にする：active

リスト項目1
リスト項目2
リスト項目3

  <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>

リストグループの背景色：list-group-item-*

これは「primary」のリスト項目です。
これは「secondary」のリスト項目です。
これは「success」のリスト項目です。
これは「danger」のリスト項目です。
これは「warning」のリスト項目です。
これは「info」のリスト項目です。
これは「light」のリスト項目です。
これは「dark」のリスト項目です。
これは「デフォルト」のリスト項目です。

  <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>

リスト項目を無効状態にする：disabled

リスト項目1
リスト項目2
リスト項目3

  <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>

バッジ付きリストグループ：badge-pill

リスト項目1 14
リスト項目2 2
リスト項目3 1

  <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>

divとaタグでリストグループ：list-groupとlist-group-item

リスト項目1 リスト項目2 リスト項目3

  <!-- サイドメニューでリンクさせる -->
  <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>

リストグループ背景色：list-group-item-*

これは「primary」のリスト項目です。これは「secondary」のリスト項目です。これは「success」のリスト項目です。これは「danger」のリスト項目です。これは「warning」のリスト項目です。これは「info」のリスト項目です。これは「light」のリスト項目です。これは「dark」のリスト項目です。これは「デフォルト」のリスト項目です。

  <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

これはアクティブ状態の「primary」。これはアクティブ状態の「secondary」これはアクティブ状態の「success」。これはアクティブ状態の「danger」これはアクティブ状態の「warning」これはアクティブ状態の「info」これはアクティブ状態の「light」これはアクティブ状態の「dark」これはアクティブ状態の「デフォルト（何も設定なし）」

  <!-- 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>

aタグに複数の要素を入れる：list-group-itemとflex-column

hヘッダ

smallコンテンツ

pコンテンツ

smallコンテンツ

hヘッダ

smallコンテンツ

pコンテンツ

smallコンテンツ

  <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>

li 枠なしのリストグループ：list-group-flush

リスト項目1
リスト項目2
リスト項目3

  <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>

ボタンのリストグループ：list-group-item-action

  <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>