• アコーディオン(Accordion)
• アラート(Alerts)
  • アラート中のリンク(Link in alert)
  • アラート中のヘッダ(Alert header)
  • アラートアイコン(Alert icon)
  • クローズボタン(Close button)
• バッチ(Badge)
• パンくずリスト(Breadcrumb)
• ボタン(Buttons)
  • アウトラインボタン(Outline button)
  • ボタンサイズ(Button size)
  • 無効化ボタン(Disabled button)
  • トグルボタン(Toggle button)
• ボタングループ(Button group)
  • ボタングループのサイズ(Size of button group)
  • ボタングループのネスト(Nest of button group)
  • 垂直ボタングループ(Vertical button group)
• カード(Cards)
  • カードのヘッダとフッタ(Card header & footer)
  • ナビゲーション(Navigation)
  • カードのオーバーレイ(Card overlay)
• カードグループ(Card group)
• カルーセル(Carousel)
  • フェードイン・アウト(Fade-in & out)
  • カルーセルのインターバル(Carousel interval)
  • カルーセルのダークモード(Dark carousel)
• クローズボタン(Close button)
• コラプス(Collapse)
• ドロップダウン(Dropdown)
  • ドロップダウンのダークモード(Dark dropdown)
  • ドロップダウンの方向(Direction of dropdown)
  • ドロップダウンメニューの有効化と無効化(Active or disabled dropdown)
  • ドロップダウンメニューのアライン(Align of dropdown)
  • ヘッダと区切り線
  • テキストやフォーム
  • オフセット(Offset)
  • スプリットボタン(Split button)
  • オートクローズ(Auto close)
  • オプション(Options)
• リストグループ(List group)
  • アクティブ・無効化
  • アクション(List group action)
  • フラッシュ(Flush)
  • 番号付き(Numbered)
  • 水平(Horizontal)
  • コンテキスト(Context)
• モーダル(Modal)
  • スタティックバックドロップ(Static backdrop)
  • スクロール(Scrollable)
  • 中央表示(Centered)
  • サイズ(Sizes)
  • フルスクリーン(Fullscreen)
• ナビとタブ(Navs and tabs)
  • ナビ(Navs)
  • タブ(Tabs)
  • ピル(Pills)
  • フィル(Fill)
• ナビバー(Navbar)
  • トグルボタン(Navbar toggle)
  • スクロール(Scroll)
• オフキャンバス(Offcanvas)
  • 方向(Direction)
• ページネーション(Pagination)
  • アクティブ・ディスエイブル(Active and disabled)
  • サイズ(Size)
• ポップオーバー(Popover)
  • 方向(Direction)
• プログレスバー(Progress)
  • マルチプル(Multiple)
  • ストライプ・アニメーション(Stripe & animated)
• スクロールスパイ(Scrollspy)
• スピナー(Spinners)
  • グローイング(Growing)
  • サイズ(Size)
• トースト(Toasts)
  • スタッキング(Stacking)
  • オプション(Option)
• ツールチップ(Tooltips)

.accordion, .accordion-item, .accordion-header, .accordion-button, .accordion-collapse, .accordion-body でアコーディオンを構成します。data-bs-target には開閉対象のIDを、data-bs-parent には親要素のIDを指定します。

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <div class="accordion-header" id="headingOne">
      <button class="accordion-button collapsed" type="button"
          data-bs-toggle="collapse" data-bs-target="#collapseOne"
          aria-expanded="false" aria-controls="collapseOne">
        Accordion Item #1
      </button>
    </div>
    <div id="collapseOne" class="accordion-collapse collapse"
        aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">AAA...</div>
    </div>
  </div>
  <div class="accordion-item">...</div>
  <div class="accordion-item">...</div>
</div>

最初から開いた状態で表示するには、.collapsed を削除し、aria-expanded を true とし、.show を加えてください。

  <div class="accordion-item">
    <div class="accordion-header" id="headingOne">
      <button class="accordion-button collapsed" ...
          aria-expanded="true" ...>...</button>
    </div>
    <div id="collapseOne" class="accordion-collapse collapse show" ...>
      ...
    </div>
  </div>

.accordion-flush を追加すると、デフォルトの背景色、境界線、角の丸めを削除します。

<div class="accordion accordion-flush" id="accordionFlushExample">...</div>

.alert, .alert-{primary|secondary|success|danger|warning|info|light|dark} はコンテキストに応じた配色のアラートメッセージを表示します。

<div class="alert alert-primary" role="alert">Primary</div>
<div class="alert alert-secondary" role="alert">Secondary</div>
<div class="alert alert-success" role="alert">Success</div>
<div class="alert alert-danger" role="alert">Danger</div>
<div class="alert alert-warning" role="alert">Warning</div>
<div class="alert alert-info" role="alert">Info</div>
<div class="alert alert-light" role="alert">Light</div>
<div class="alert alert-dark" role="alert">Dark</div>

.alert-link はアラート中のリンクを配色に応じた色で表示します。

<div class="alert alert-primary" role="alert">
  Primary <a href="#" class="alert-link">link</a>
</div>

.alert-heading はアラート中のヘッダを適切な色で表示します。

<div class="alert alert-danger" role="alert">
  <h4 class="alert-heading">Error!!</h4>
  No such file or directory.
</div>

アイコンを表示することもできます。

<div class="alert alert-danger mb-0" role="alert">
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
      fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16">
    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293
        8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 
        .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
  </svg>
  No such file or directory.
</div>

.alert-dismissible は data-bs-dismiss="alert" によるクローズボタンで閉じることが可能なアラートを表示します。

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

.badge や .bg-{context} を用いてバッジを表示します。New! などのようにちょっと目立たせたい通知部品として使用したりします。

<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info text-dark">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-dark">Dark</span>

.rounded-pill を指定すると角の丸いバッジを表示します。

<span class="badge rounded-pill bg-primary">Primary</span>

下記のようにバッジをカウンターとして使用する例もあります。

<button type="button" class="btn btn-primary">
  Messages <span class="badge bg-secondary">4</span>
</button>

.breadcrumb, .breadcrumb-item を用いてパンくずリストを表示します。現在のページには .active をつけます。aria-label や aria-current はスクリーンリーダーなどにこれがパンくずリストであること、現在のページが Data であることなどを伝えます。

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

--bs-breadcrumb-divider で区切り記号を指定することができます。

<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
  ...
</nav>

下記のようにして、アイコンを指定することもできます。

<nav style="--bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E&#34;);" aria-label="breadcrumb">
  ...
</nav>

.btn, .btn-{context} は、コンテキストに応じた色のボタンを表示します。

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

.btn-outline-{context} はアウトラインボタンを表示します。

<button type="button" class="btn btn-outline-primary">Primary</button>
...

.btn-lg は大きなボタンを、.btn-sm は小さなボタンを表示します。

<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Normal</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>

disabled をつけると無効化されたボタンを表示します。

<button type="button" class="btn btn-primary" disabled>Disabled</button>

data-bs-toggle="button" をつけるとクリックする度にアクティブ状態がトグルするボタンを表示します。アクティブなボタンには .active が付加され、色が少し濃くなります。

<button type="button" data-bs-toggle="button" class="btn btn-primary">Normal</button>
<button type="button" data-bs-toggle="button" class="btn btn-primary active">Active</button>

.btn-group はボタングループを表示します。

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Right</button>
</div>

.btn-toolbar はボタングループから構成されるツールバーを表示します。

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group me-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-primary">1</button>
    <button type="button" class="btn btn-primary">2</button>
    <button type="button" class="btn btn-primary">3</button>
    <button type="button" class="btn btn-primary">4</button>
  </div>
  <div class="btn-group me-2" role="group" aria-label="Second group">
    <button type="button" class="btn btn-secondary">5</button>
    <button type="button" class="btn btn-secondary">6</button>
    <button type="button" class="btn btn-secondary">7</button>
  </div>
</div>

.btn-group-lg は大きな、.btn-group-sm は小さなボタングループを表示します。

<div class="btn-group btn-group-lg" role="group" aria-label="Large button group">...</div>
<div class="btn-group" role="group" aria-label="Default button group">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="Small button group">...</div>

ボタングループを入れ子で定義することで、下記のようにドロップダウンボタンをボタングループ化することもできます。

<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
  <button type="button" class="btn btn-primary">1</button>
  <button type="button" class="btn btn-primary">2</button>
  <div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle"
        data-bs-toggle="dropdown" aria-expanded="false">Menu</button>
    <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <li><a class="dropdown-item" href="#nest_button_group">Menu#1</a></li>
      <li><a class="dropdown-item" href="#nest_button_group">Menu#2</a></li>
    </ul>
  </div>
</div>

.btn-group-vertical はボタングループのボタンを縦方向に並べます。

<div class="btn-group-vertical" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary">Up</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Down</button>
</div>

.card はカードを表示します。.card-img-top は上部に、.card-img-bottom は下部に画像を表示します。.card-body はカード本文、.card-title はタイトル、.card-subtitle はサブタイトル、.card-text はテキスト、.card-link はリンクを表示します。

Card title

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

link.

Go somewhere

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="Card example">
  <div class="card-body">
    <div class="h5"card-title">Card title</div>
    <div class="h6 card-subtitle">Card subtitle</div>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <p><a href="#" class="card-link">link.</a></p>   
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

.card-header はカードのヘッダを、.card-footer はカードのフッタを表示します。

<div class="card">
  <div class="card-header">Card header...</div>
  <div class="card-body">
    <div class="card-text">Text...</div>
  </div>
  <div class="card-footer">Card footer...</div>
</div>

カードにナビゲーションをつけるには ナビゲーション と .card-header-tabs を指定します。

<div class="card">
  <div class="card-header">
    <div class="nav nav-tabs card-header-tabs">
      <li class="nav-item"><a class="nav-link active">AAA</a></li>
      <li class="nav-item"><a class="nav-link">BBB</a></li>
      <li class="nav-item"><a class="nav-link">CCC</a></li>
    </div>
  </div>
  <div class="card-body">
    <div class="h5 card-title">AAA</div>
    <p>.....</p>
  </div>
</div>

.card-img, .card-img-overlay はタイトルやテキストを画像に重ね合わせて表示します。

Card title

Text...

<div class="card" style="width:20rem">
  <img src="..." class="card-img" alt="Card example">
  <div class="card-img-overlay text-white">
    <div class="h5 card-title">Card title</div>
    <p class="card-text">Text...</p>
  </div>
</div>

.card-group は複数のカードから構成されるカードグループを表示します。

<div class="card-group">
  <div class="card">...</div>
  <div class="card">...</div>
  <div class="card">...</div>
  <div class="card">...</div>
</div>

.carousel, .carousel-inner, .carousel-item は下記のように使用してカルーセルを表示します。.slide をつけると画像がスライドして切り替わります。.carousel-indicators は下部のインジケーターを表示します。.carousel-caption はカルーセル上にキャプションを表示します。.carousel-control-prev, .carousel-control-next は進むボタン・戻るボタン、.carousel-control-prev-icon, .carousel-control-next-icon はそのアイコンを表示します。data-bs-target にはカルーセルのIDを設定してください。

First slide

This is first slide.

Second slide

This is seconde slide.

Third slide

This is third slide.

Previous Next

<div id="carouselExample" class="carousel slide" data-bs-ride="carousel" style="width:18rem">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <div class="h5">First slide</div>
        <p>This is first slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <div class="h5">Second slide</div>
        <p>This is seconde slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <div class="h5">Third slide</div>
        <p>This is third slide.</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

.carousel-fade を指定すると、画像がフェードアウト・フェードインで表示されます。

First slide

This is first slide.

Second slide

This is seconde slide.

Third slide

This is third slide.

Previous Next

<div id="carouselExample2" class="carousel slide carousel-fade" data-bs-ride="carousel" style="width:18rem">
  ...
</div>

data-bs-interval を指定すると、指定したインターバル(ミリ秒)毎にカルーセルを切り替えます。

First slide

This is first slide.

Second slide

This is seconde slide.

Third slide

This is third slide.

Previous Next

<div id="carouselExample3" class="carousel slide" data-bs-ride="carousel" style="width:18rem">
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="2000">
      ...

.carousel-dark を指定すると、テキスト、インジケータ、アイコンなどを黒系の色で表示します。

First slide

This is first slide.

Second slide

This is seconde slide.

Third slide

This is third slide.

Previous Next

<div id="carouselExample4" class="carousel slide carousel-dark" data-bs-ride="carousel" style="width:18rem">
  ...
</div>

.btn-close はクローズボタンを表示します。.btn-close-white は白いクローズボタンを表示します。disabled が指定されると、無効化状態のクローズボタンを表示します。

<div class="container-fluid">
  <div class="row">
    <div class="col-2 bg-light border text-center">
      <button type="button" class="btn-close" aria-label="Close"></button>
      <button type="button" class="btn-close" aria-label="Close" disabled></button>
    </div>
    <div class="col-2 bg-dark border text-center">
      <button type="button" class="btn-close btn-close-white" aria-label="Close"></button>
      <button type="button" class="btn-close btn-close-white" aria-label="Close" disabled></button>
    </div>
  </div>
</div>

.collapse は潰れる、崩れるなどの意味です。コラプスの対象要素を閉じたり開いたりすることができます。コラプスを制御するリンクやボタンには data-bs-toggle="collapse" を指定し、リンクの場合は href, ボタンの場合は data-bs-target でコラプス対象要素のIDを指定します。ID の代わりに .collapseExample などのクラスを指定すると、コラプス対象要素を複数同時に開閉することができます。

<div>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample"
      role="button" aria-expanded="false" aria-controls="collapseExample">Link with href</a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample"
      aria-expanded="false" aria-controls="collapseExample"> Button with data-bs-target</button>
</div>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Some placeholder content for the collapse component.
    This panel is hidden by default but revealed when the user activates the relevant trigger.
  </div>
</div>

.dropdown, .dropdown-toggle, .dropdown-menu, .dropdown-item はドロップダウンメニューを構成します。メニューには data-bs-toggle="dropdown" を指定します。

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button"
      id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">Menu</button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li><a class="dropdown-item" href="#">Menu#1</a></li>
    <li><a class="dropdown-item" href="#">Menu#2</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Menu#3</a></li>
  </ul>
</div>

.dropdown-menu-dark を指定するとダーク系配色のドロップダウンを表示します。

<div class="dropdown">
  <button ...>Menu</button>
  <ul class="dropdown-menu dropdown-menu-dark" ...>
    ...
  </ul>
</div>

.dropdown の代わりに .dropup, .dropstart, .dropend を指定すると、上方向、テキストの開始方向、終了方向にドロップダウンメニューを表示することができます。

<div class="dropdown">...</div>
<div class="dropup">...</div>
<div class="dropstart">...</div>
<div class="dropend">...</div>

.active, .disabled を指定することでドロップダウンメニューを有効化・無効化することができます。

<div class="dropdown">
  <button ...>Menu</button>
  <ul class="dropdown-menu" ...>
    <li><a class="dropdown-item" href="#">Menu#1</a></li>
    <li><a class="dropdown-item active" href="#">Menu#2</a></li>
    <li><a class="dropdown-item disabled" href="#">Menu#3</a></li>
  </ul>
</div>

.dropdown-menu-start, .dropdown-menu-end は、ドロップダウンメニューをテキストの開始方向・終了方向位置に表示します。.dropdown-menu-{breakpoint}-start, .dropdown-menu-{breakpoint}-end でブレークポイントを指定することもできます。

<div class="dropdown">
  <button ...>Start-aligned example</button>
  <ul class="dropdown-menu dropdown-menu-start">...</ul>
</div>
<div class="dropdown">
  <button ...>End-aligned example</button>
  <ul class="dropdown-menu dropdown-menu-end">...</ul>
</div>

.dropdown-header はヘッダタイトルを表示します。.dropdown-divider は区切り線を表示します。

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button"
      id="dropdownExampleContent" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
  <ul class="dropdown-menu" aria-labelledby="dropdownExampleContent">
    <li><div class="h6 dropdown-header">Header</div></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Menu#1</a></li>
    <li><a class="dropdown-item" href="#">Menu#2</a></li>
  </ul>
</div>

ドロップダウンメニューにテキストやフォームを表示することもできます。

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button"
      id="dropdownExampleTextForm" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
  <div class="dropdown-menu" aria-labelledby="dropdownExampleTextForm">
    <div class="p-2">
      <p>Text...</p>
    </div>
    <form class="p-2 mb-2">
      <label for="dropdownExampleForm" class="form-label">Label</label>
      <input type="text" class="form-control" id="dropdownExampleForm">
    </form>
  </div>
</div>

data-bs-offset="x,y" を指定すると、メニューの表示位置を x, y だけずらすことができます。

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button"
      data-bs-toggle="dropdown" data-bs-offset="10,20" ...>Offset</button>
  ...
</div>

.dropdown-toggle-split を指定することでスプリット（分割）ボタンを表示することができます。data-bs-reference="parent" はメニューを親要素の位置に合わせて表示することを指定します。

<div class="btn-group">
  <button type="button" class="btn btn-primary">Action#1</button>
  <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split"
      id="dropdownMenuSplit" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuSplit">
    <li><a class="dropdown-item" href="#">Action#2</a></li>
    <li><a class="dropdown-item" href="#">Action#3</a></li>
  </ul>
</div>

data-bs-auto-close にはオートクローズの振る舞いを指定します。デフォルトでは、ボタンクリック、メニュークリック、アウトサイドクリックでメニューが閉じます。"inside" を指定するとボタンクリック、メニュークリックで、"outside" を指定するとボタンクリック、アウトサイドクリックで、"false" を指定するとボタンクリックのみでメニューが閉じます。

<button class="btn btn-primary dropdown-toggle" type="button">...</button>
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-auto-close="inside">...</button>
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-auto-close="outside">...</button>
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-auto-close="false">...</button>

data-bs-offset、data-bs-auto-close の他にも、data-bs-boundary、data-bs-reference、data-bs-display、data-bs-popper-config などのオプションがあります。詳細は下記を参照してください。

• Dropdown のオプション

.list-group, .list-group-item はリストグループを表示します。

<ul class="list-group">
  <li class="list-group-item">Item#1</li>
  <li class="list-group-item">Item#2</li>
  <li class="list-group-item">Item#3</li>
</ul>

.active はリスト項目をアクティブにします。.disabled は無効化します。

<ul class="list-group">
  <li class="list-group-item">Normal</li>
  <li class="list-group-item active">Active</li>
  <li class="list-group-item disabled">Disabled</li>
</ul>

<a> や <button> に .list-group-item-action を指定することで、アイテムがアクションを受け付けることを示します。マウスを乗せた時やクリックした際に少し色が変化します。

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Action#1</a>
  ...
<div class="list-group">
  <button class="list-group-item list-group-item-action">Action#1</button>
  ...

.list-group-flush を指定すると一部のボーダーや角の丸みが除去されます。

<ul class="list-group list-group-flush">
  <li class="list-group-item">Item#1</li>
  <li class="list-group-item">Item#2</li>
</ul>

<ol> に .list-group-numbered を指定すると番号付きのリストグループを表示します。

<ol class="list-group list-group-numberd">
  <li class="list-group-item">Item#1</li>
  <li class="list-group-item">Item#2</li>
</ol>

.list-group-horizontal はリストグループを水平に表示します。.list-group-horizontal-{breakpoint} でブレークポイントを指定することもできます。

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">Item#1</li>
  <li class="list-group-item">Item#2</li>
  <li class="list-group-item">Item#3</li>
</ul>

.list-group-item-{context} でコンテキストを指定することができます。

<ul class="list-group">
  <li class="list-group-item list-group-item-primary">Item#1</li>
  <li class="list-group-item list-group-item-success">Item#2</li>
  <li class="list-group-item list-group-item-danger">Item#3</li>
</ul>

.modal はモーダルダイアログを表示します。.modal-dialog, .modal-content, .modal-header, .modal-title, .modal-body, .modal-footer はそれぞれ、ダイアログ、コンテンツ、ヘッダ、タイトル、ボディ、フッタを表示します。開くボタンには data-bs-toggle="modal" と、data-bs-target でターゲットとするモーダル要素のIDを指定してください。

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Show modal
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Body...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">OK</button>
      </div>
    </div>
  </div>
</div>

data-bs-backdrop="static" と data-bs-keyboard="false" は、モーダルダイアログ以外の箇所をクリックしたり ESC キーを押してもダイアログが閉じないようにします。

<div class="modal fade" id="exampleModal2" data-bs-backdrop="static" data-bs-keyboard="false" ...>
  ...

.modal-dialog-scrollable はダイアログの中身をスクロール可能にします。

<div class="modal-dialog modal-dialog-scrollable">
  ...

.modal-dialog-centered はダイアログを上下方向の中央に表示します。

<div class="modal-dialog modal-dialog-centered">
  ...

.modal-sm, .modal-lg, .modal-xl はダイアログの最大横幅を指定します。

<div class="modal-dialog modal-sm">...</div>
<div class="modal-dialog">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-xl">...</div>

.modal-fullscreen はダイアログをフルスクリーンで表示します。.modal-full-screen-{breakpoint}-down は画面の横幅がブレークポイントサイズ以下の場合にフルスクリーンダイアログを表示します。

<div class="modal-dialog modal-fullscreen">...</div>
<div class="modal-dialog modal-fullscreen-sm-down">...</div>
<div class="modal-dialog modal-fullscreen-md-down">...</div>
<div class="modal-dialog modal-fullscreen-lg-down">...</div>
<div class="modal-dialog modal-fullscreen-xl-down">...</div>
<div class="modal-dialog modal-fullscreen-xxl-down">...</div>

.nav, .nav-item, .nav-link はナビゲーションリンクを表示します。.active はアクティブな、.disabled は無効化されたリンクを表示します。

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

<nav> を用いて表示することもできます。

<nav class="nav">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

.nav-tabs はタブ形式で表示します。

<ul class="nav nav-tabs">
  ...
</ul>

.nav-pills を指定するとアクティブリンクが下記のように表示されます。

<ul class="nav nav-pills">
  ...
</ul>

.nav-fill を指定すると横幅いっぱいに表示します。

<ul class="nav nav-pills nav-fill">
  ...
</ul>

.navbar はナビバーを表示します。.navbar-dark はダーク系、.navbar-light はライト系で表示します。.navbar-brand でブランド名を、.navbar-text でテキストを表示します。

<nav class="navbar navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <span class="navbar-text">Powerd by ABC.</span>
  </div>
</nav>
<nav class="navbar navbar-light" style="background-color: #ddd">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <span class="navbar-text">Powerd by ABC.</span>
  </div>
</nav>

.navbar-toggler はトグルボタンを表示します。data-bs-toggle="collapse" を指定し、data-bs-target には開閉対象要素のIDを指定します。.navbar-toggler-icon はメニューアイコンを表示します。

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button"
        data-bs-toggle="collapse" data-bs-target="#exampleNavbarToggle"
        aria-controls="exampleNavbarToggle" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="exampleNavbarToggle">
      <ul class="navbar-nav me-auto mb-2">
        <li class="nav-item"><a class="nav-link" href="#">Link#1</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Link#2</a></li>
      </ul>
    </div>
  </div>
</nav>

.navbar-nav-scroll を指定し、style="--bs-scroll-height: ... を指定することで、トグルメニューにスクロールバーをつけることができます。

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    ...
    <div class="collapse navbar-collapse" id="exampleNavbarScroll">
      <ul class="navbar-nav me-auto mb-2 navbar-nav-scroll" style="--bs-scroll-height:5rem">
        ...

.offcanvas は通常は表示されないオフキャンバスを表示します。.offcanvas-start はテキストの開始側(左側)、.offcanvas-end は終了側(右側)に表示します。.offcanvas-header, .offcanvas-title, .offcanvas-body はオフキャンバスのヘッダ、タイトル、本文を表示します。開くボタンには data-bs-toggle="offcanvas" を指定し、data-bs-target で対象のオフキャンバス要素のIDを指定します。閉じるボタンには data-bs-dismiss="offcanvas" を指定します。

<button class="btn btn-primary" type="button"
    data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
  Show offcanvas
</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas Header</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">Offcanvas body...</div>
</div>

.offcanvas-start, .offcanvas-end, .offcanvas-top, .offcanvas-bottom はオフキャンバスを表示する方向を指定します。

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExampleStart">...</div>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasExampleEnd">...</div>
<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasExampleTop">...</div>
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasExampleBottom">...</div>

.pagination, .page-item, .page-link はページネーションを表示します。

<nav>
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">&lt;</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">&gt;</a></li>
  </ul>
</nav>

.active はアクティブなページを、.disabled は無効化されたページを示します。

<nav>
  <ul class="pagination">
    <li class="page-item disabled"><a class="page-link" href="#">&lt;</a></li>
    <li class="page-item active"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">&gt;</a></li>
  </ul>
</nav>

.pagination-lg は大きな、.pagination-sm は小さなページネーションを表示します。

<nav>
  <ul class="pagination pagination-lg">...</ul>
</nav>
<nav>
  <ul class="pagination">...</ul>
</nav>
<nav>
  <ul class="pagination pagination-sm">...</ul>
</nav>

data-bs-toggle="popover" を指定したボタンがクリックされるとポップオーバーを表示します。title にはタイトル、data-bs-content にはコンテンツを指定します。

<button type="button" class="btn btn-primary"
    data-bs-toggle="popover" title="Popover title" data-bs-content="Popover content...">
  Popover
</button>

ポップオーバーを使用する画面では、ページの読み込みが完了した後に下記の JavaScript を実行してください。

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl);
});

data-bs-placement でポップオーバーを表示する方向を指定することができます。

<button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-placement="top" ...>Top</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-placement="right" ...>Right</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-placement="bottom" ...>Bottom</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-placement="left" ...>Left</button>

.progress, .progress-bar はプログレスバーを表示します。割合は width: で指定します。aria-* には読み上げブラウザ等への情報を提供します。

<div class="progress mb-2">
  <div class="progress-bar" style="width:25%" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
<div class="progress mb-2">
  <div class="progress-bar" style="width:50%" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
</div>
<div class="progress">
  <div class="progress-bar" style="width:100%" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">100%</div>
</div>

下記のようにして複数の値を持つプログレスバーを表示することができます。

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-danger" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-success" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>

.progress-bar-striped はストライプ付きの、.progress-bar-animated はアニメーション付きのプログレスバーを表示します。

<div class="progress">
  <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>

data-bs-spy="scroll" はスクロールスパイを構築します。スクロールスパイの本文をスクロールさせていくと、第1章が表示されている時は第1章のボタンが、第2章が表示されている時は第2章のボタンがアクティブになります。

<nav id="scrollspy-example" class="navbar navbar-light bg-light px-3">
  <a class="navbar-brand" href="#">Scrollspy</a>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#spy-one">第2章</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#spy-two">第2章</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#spy-three">第3章</a>
    </li>
  </ul>
</nav>
<div data-bs-spy="scroll" data-bs-target="#scrollspy-example" data-bs-offset="0" tabindex="0"
    style="position:relative; height:8rem; overflow:scroll">
  <div class="h4" id="spy-one">第1章</div>
  <p>...</p>
  <div class="h4" id="spy-two">第2章</div>
  <p>...</p>
  <div class="h4" id="spy-three">第3章</div>
  <p>...</p>
</div>

.spinner-border はローディング中などを示すスピナーを表示します。.text-primary などで色を指定することもできます。

<div class="spinner-border" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-primary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

.spinner-grow は大きさが変化するスピナーを表示します。

<div class="spinner-grow" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

.spinner-border-sm, .spinner-grow-sm は小さなスピナーを表示します。

<div class="spinner-border spinner-border-sm" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

.toast は、画面の右上端などに表示させるメッセージボックスを生成します。.toast-header, .toast-body はトーストのヘッダ、ボディを表示します。new bootstrap.Toast() でトースト要素からトーストオブジェクトを生成し、.show() メソッドでトーストを表示します。

<button type="button" class="btn btn-primary" id="toastExampleBtn">Toast</button>
<div class="position-fixed top-0 end-0 p-3" style="z-index: 11">
  <div id="toastExample" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <strong class="me-auto">Toast Example</strong>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      This is toast body.
    </div>
  </div>
</div>
<script>
(function() {
  window.addEventListener('load', function() {
    var toastElm = document.getElementById('toastExample');
    var toastObj = new bootstrap.Toast(toastElm, {animation:true, autohide:true, delay:2000});
    document.getElementById('toastExampleBtn').addEventListener('click', function() {
      toastObj.show();
    });
  });
})();
</script>

.toast-container を用いることにより、複数のトーストをスタック表示することができます。

<div class="toast-container">
  <div class="toast show">,,,</div>
  <div class="toast show">,,,</div>
</div>

bootstrap.Toast() で指定するオプションは data-bs-* でも指定できます。data-bs-animation="false" はアニメーションを抑止します。data-bs-autohide="false" は自動クローズを無効化します。data-bs-delay="3000" は自動クローズまでの時間をミリ秒で指定します。

<div class="toast" data-bs-animation="false">...</div>
<div class="toast" data-bs-autohide="false">...</div>
<div class="toast" data-bs-delay="2000">...</div>

data-bs-toggle="tooltip" は、要素にマウスを乗せた際に title で指定した内容をツールチップとして表示します。data-bs-placement にはツールチップの表示方向(top, bottom, right, left)を指定します。

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
  Tooltip
</button>
<script>
(function() {
  window.addEventListener("load", function() {
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
      return new bootstrap.Tooltip(tooltipTriggerEl);
    });
  });
})();
</script>