dropdown-item-text

bootstrap5.css

bootstrap5.css
.dropdown-item-text {
  display: block;
  padding: 0.25rem 1rem;
  color: #212529;
}
bootstrap5.css
.dropdown-menu-dark .dropdown-item-text {
  color: #dee2e6;
}

html bootstrap5 Sample

js ドロップダウンにリンクなしの項目を追加する:dropdown-item-text


  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true"
      aria-expanded="false">ドロップダウン</button>
    <div class="dropdown-menu">
      <!-- メニューの説明分など入れたい場合に利用 -->
      <span class="dropdown-item-text">非リンクテキスト</span>
      <a class="dropdown-item" href="#1">メニュー1</a>
      <a class="dropdown-item" href="#2">メニュー2</a>
      <a class="dropdown-item" href="#3">メニュー3</a>
    </div>
  </div>