button

bootstrap5.css

bootstrap5.css
button {
  border-radius: 0;
}
bootstrap5.css
button:focus {
  /* buttonにフォーカスが当たったら */
  outline: dotted 1px;
  outline: -webkit-focus-ring-color auto 5px;
}
bootstrap5.css
input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
bootstrap5.css
button,
select {
  /* 文字の大文字等への変換 */
  text-transform: none;
}
bootstrap5.css
[role="button"] {
  cursor: pointer;
}
bootstrap5.css
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}
bootstrap5.css
button:not(:disabled),
[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled) {
  cursor: pointer;
}
bootstrap5.css
::-webkit-inner-spin-button {
  height: auto;
}
bootstrap5.css
::file-selector-button {
  font: inherit;
}
bootstrap5.css
::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button;
}
bootstrap5.css
.form-control::file-selector-button {
  padding: 0.375rem 0.75rem;
  margin: -0.375rem -0.75rem;
  -webkit-margin-end: 0.75rem;
  margin-inline-end: 0.75rem;
  color: #212529;
  background-color: #e9ecef;
  pointer-events: none;
  border-color: inherit;
  border-style: solid;
  border-width: 0;
  border-inline-end-width: 1px;
  border-radius: 0;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .form-control::file-selector-button {
    transition: none;
  }
}
bootstrap5.css
.form-control:hover:not(:disabled):not([readonly])::file-selector-button {
  background-color: #dde0e3;
}
bootstrap5.css
.form-control::-webkit-file-upload-button {
  padding: 0.375rem 0.75rem;
  margin: -0.375rem -0.75rem;
  -webkit-margin-end: 0.75rem;
  margin-inline-end: 0.75rem;
  color: #212529;
  background-color: #e9ecef;
  pointer-events: none;
  border-color: inherit;
  border-style: solid;
  border-width: 0;
  border-inline-end-width: 1px;
  border-radius: 0;
  -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .form-control::-webkit-file-upload-button {
    -webkit-transition: none;
    transition: none;
  }
}
bootstrap5.css
.form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
  background-color: #dde0e3;
}
bootstrap5.css
.form-control-sm::file-selector-button {
  padding: 0.25rem 0.5rem;
  margin: -0.25rem -0.5rem;
  -webkit-margin-end: 0.5rem;
  margin-inline-end: 0.5rem;
}
bootstrap5.css
.form-control-sm::-webkit-file-upload-button {
  padding: 0.25rem 0.5rem;
  margin: -0.25rem -0.5rem;
  -webkit-margin-end: 0.5rem;
  margin-inline-end: 0.5rem;
}
bootstrap5.css
.form-control-lg::file-selector-button {
  padding: 0.5rem 1rem;
  margin: -0.5rem -1rem;
  -webkit-margin-end: 1rem;
  margin-inline-end: 1rem;
}
bootstrap5.css
.form-control-lg::-webkit-file-upload-button {
  padding: 0.5rem 1rem;
  margin: -0.5rem -1rem;
  -webkit-margin-end: 1rem;
  margin-inline-end: 1rem;
}
bootstrap5.css
.accordion-button {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 1rem 1.25rem;
  font-size: 1rem;
  color: #212529;
  background-color: transparent;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0;
  overflow-anchor: none;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .accordion-button {
    transition: none;
  }
}
bootstrap5.css
.accordion-button.collapsed {
  border-bottom-width: 0;
}
bootstrap5.css
.accordion-button:not(.collapsed) {
  color: #0c63e4;
  background-color: #e7f1ff;
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .accordion-button::after {
    transition: none;
  }
}
bootstrap5.css
.accordion-button:hover {
  z-index: 2;
}
bootstrap5.css
.accordion-button:focus {
  z-index: 3;
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
bootstrap5.css
.accordion-item:first-of-type .accordion-button {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}
bootstrap5.css
.accordion-item:last-of-type .accordion-button.collapsed {
  border-bottom-width: 1px;
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}
bootstrap5.css
.accordion-flush .accordion-button {
  border-right: 0;
  border-left: 0;
  border-radius: 0;
}
bootstrap5.css
.accordion-flush .accordion-item:first-of-type .accordion-button {
  border-top-width: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
bootstrap5.css
.accordion-flush .accordion-item:last-of-type .accordion-button.collapsed {
  border-bottom-width: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
bootstrap5.css
.list-group-item-action {
  /* 幅100%にして色を付けて、テキストの位置は継承する */
  /* aやbuttonのインラインをリストにするために使う */
  width: 100%;
  color: #495057;
  text-align: inherit;
}

html bootstrap5 Sample

js ナビゲーションバー基本:navbarとnavbar-togglerとcollapseとnavbar-toggler-icon


    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <!-- TOPは、ブラントとして常に表示 -->
      <a class="navbar-brand" href="#">TOP</a>
      <!-- navbar-togglerでレスポンシブ -->
      <!-- レスポンシブ状態でないと、トグルアイコンは非表示になり、メニューが表示される -->
      <!-- レスポンシブになると、トグルアイコンが表示され、メニューは非表示になる -->
      <!-- data-bs-targetとidでコンテンツを連携させる -->
      <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#Nav1" aria-controls="Nav1"
        aria-expanded="false" aria-label="ナビゲーションの切替">
        <!-- ハンバーガーメニューでボタンを表示 navbar-toggler-icon -->
        <span class="navbar-toggler-icon"></span>
      </button>
      <!-- ボタンが押されたら、以下のメニューを開く、メニューはulとliを使う -->
      <div class="collapse navbar-collapse" id="Nav1">
        <ul class="navbar-nav">
          <li class="nav-item"><a class="nav-link" href="#">メニュー1</a></li>
          <li class="nav-item"><a class="nav-link" href="#">メニュー2</a></li>
          <li class="nav-item"><a class="nav-link" href="#">メニュー3</a></li>
        </ul>
      </div>
    </nav>

js ナビバーの検索窓:d-flex


    <nav class="navbar navbar-expand navbar-light bg-light">
      <div class="container-fluid">
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#Nav3"
          aria-controls="Nav3" aria-expanded="false" aria-label="ナビゲーション切替">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="Nav3">
          <!-- 画面が狭い時はアイコン、画面が広い時メニューを表示 -->
          <a class="navbar-brand" href="#">TOP</a>
          <ul class="navbar-nav me-auto">
            <li class="nav-item active"><a class="nav-link" href="#">メニュー1</a></li>
            <li class="nav-item"><a class="nav-link" href="#">メニュー2</a></li>
            <li class="nav-item"><a class="nav-link" href="#">メニュー3</a></li>
          </ul>
          <form class="d-flex">
            <!-- inputにform-controlを適用しない -->
            <input class="me-2" type="search" placeholder="検索" aria-label="検索">
            <button class="btn btn-light" type="submit">検索</button>
          </form>
        </div>
      </div>
    </nav>

js ナビゲーションドロップダウンメニュー:dropdown-toggle


    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">ブランド</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
          aria-controls="navbarNav" aria-expanded="false" aria-label="ナビゲーション切替">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item dropdown">
              <!-- dropdown-toggleを使う -->
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenu" data-bs-toggle="dropdown"
                aria-haspopup="true" aria-expanded="false">
                ドロップダウンメニュー
              </a>
              <div class="dropdown-menu" aria-labelledby="ドロップダウンメニュー">
                <!-- dropdown-menuは  display: none -->
                <a class="dropdown-item" href="#">サブメニュー1</a>
                <a class="dropdown-item" href="#">サブメニュー2</a>
                <a class="dropdown-item" href="#">サブメニュー3</a>
              </div>
            </li>
            <li class="nav-item active"><a class="nav-link" href="#">メニュー1</a></li>
            <li class="nav-item active"><a class="nav-link" href="#">メニュー2</a></li>
            <li class="nav-item"><a class="nav-link" href="#">メニュー3</a></li>
          </ul>
        </div>
      </div>
    </nav>

js ナビゲーションバー内テキスト:navbar-text


    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">ブランド</a>
      <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarText"
        aria-controls="navbarText" aria-expanded="false" aria-label="ナビゲーションの切替">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarText">
        <ul class="navbar-nav">
          <li class="nav-item active"><a class="nav-link" href="#">ホーム </a></li>
          <li class="nav-item"><a class="nav-link" href="#">リンク1</a></li>
          <li class="nav-item"><a class="nav-link" href="#">リンク2</a></li>
        </ul>
        <!-- ナビバー内にテキストを表示したい場合 -->
        <span class="navbar-text ms-auto">ナビゲーションバーテキスト</span>
      </div>
    </nav>

js ナビゲーションバー 切替ボタンを左寄せに表示:me-auto


    <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav02"
        aria-controls="navbarNav02" aria-expanded="false" aria-label="ナビゲーション切替">
        <span class="navbar-toggler-icon"></span>
      </button>
      <a class="navbar-brand" href="#">ブランド</a>
      <div class="collapse navbar-collapse" id="navbarNav02">
        <ul class="navbar-nav me-auto mt-2 mt-lg-0">
          <li class="nav-item active"><a class="nav-link" href="#">リンク1</a></li>
          <li class="nav-item"><a class="nav-link" href="#">リンク2</a></li>
          <li class="nav-item"><a class="nav-link" href="#">リンク3</a></li>
        </ul>
        <form class="d-flex">
          <input class="mr-sm-2" type="search" placeholder="検索" aria-label="検索">
          <button class="btn btn-outline-light my-2 my-sm-0"  style="background-color: #e3f2fd;" type="submit">Search</button>
        </form>
      </div>
    </nav>

js ナビゲーションバーアイコンしか出さない


    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <!-- navbar-brand -->
      <a class="navbar-brand" href="#">TOP</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#Nav5" aria-controls="Nav5"
        aria-expanded="false" aria-label="ナビゲーション切替">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="Nav5">
        <ul class="navbar-nav me-auto mt-2 mt-lg-0">
          <li class="nav-item active"><a class="nav-link" href="#">リンク1</a></li>
          <li class="nav-item"><a class="nav-link" href="#">リンク2</a></li>
          <li class="nav-item"><a class="nav-link" href="#">リンク3</a></li>
        </ul>
        <form class="d-flex">
          <input class="mr-sm-2" type="search" placeholder="検索" aria-label="検索">
          <button class="btn btn-light my-2 my-sm-0" type="submit">検索</button>
        </form>
      </div>
    </nav>

js ブランドの表示・非表示 ブランドを折り畳んで隠すナビゲーションバ


    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
        aria-controls="navbarNav" aria-expanded="false" aria-label="ナビゲーション切替">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <a class="navbar-brand" href="#">ブランドを隠す</a>
        <ul class="navbar-nav me-auto mt-2 mt-lg-0">
          <li class="nav-item active"><a class="nav-link" href="#">リンク1<span class="visually-hidden">(現位置)</span></a>
          </li>
          <li class="nav-item"><a class="nav-link" href="#">リンク2</a></li>
          <li class="nav-item"><a class="nav-link" href="#">リンク3</a></li>
        </ul>
        <form class="d-flex">
          <input class="mr-sm-2" type="search" placeholder="検索" aria-label="検索">
          <button class="btn btn-light my-2 my-sm-0" type="submit">検索</button>
        </form>
      </div>
    </nav>

js ナビバーのデザイン:navbar-lightとbg-light


    <!-- bg-*はbootstrapの背景色の指定方法、できるだけこれを使うとことで構造化が進む、Core Web Vitals(コアウェブバイタル)にも有効 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">ブランド</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav_d"
        aria-controls="navbarNav" aria-expanded="false" aria-label="ナビゲーション切替">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav_d">
        <ul class="navbar-nav me-auto">
          <li class="nav-item"><a class="nav-link" href="#">リンク1</a></li>
          <li class="nav-item"><a class="nav-link" href="#">リンク2</a></li>
          <li class="nav-item"><a class="nav-link" href="#">リンク3</a></li>
        </ul>
        <!-- アウトラインの検索ボタン、darkだど映える -->
        <form class="d-flex">
          <input class="mr-sm-2" type="search" placeholder="検索" aria-label="検索">
          <button class="btn btn-outline-info my-2 my-sm-0" type="submit">検索</button>
        </form>
      </div>
    </nav>

js ナビバーbg-以外で背景色を直接指定:background-color


  <!-- navbar-*はテキストの色 -->
  <!-- navbar-expand-* は@mediaだったら適用するという指定 -->
    <nav class="navbar navbar-expand-sm navbar-light bg-light" style="background-color: #e3f2fd;">
      <a class="navbar-brand" href="#">ブランド</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#Nav9" aria-controls="Nav9"
        aria-expanded="false" aria-label="ナビゲーション切替">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="Nav9">
        <ul class="navbar-nav me-auto">
          <li class="nav-item"><a class="nav-link" href="#">リンク1</a></li>
          <li class="nav-item"><a class="nav-link" href="#">リンク2</a></li>
          <li class="nav-item"><a class="nav-link" href="#">リンク3</a></li>
        </ul>
        <form class="d-flex">
          <input class="mr-sm-2" type="search" placeholder="検索" aria-label="検索">
          <button class="btn btn-outline-primary my-2 my-sm-0" type="submit">検索</button>
        </form>
      </div>
    </nav>

js アラートを閉じるボタンで消す:alert-bs-dismissible


  <!-- btn-closeで×マーク background: svg -->
  <div class="alert alert-warning alert-dismissible fade show" role="alert">
    右側の「×」マークをクリックするとアラートが閉じます
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
    </button>
  </div>

js アラートを閉じるボタンでしか消えないモーダル:data-bs-backdrop


  <button type="button" class="btn btn-primary" data-bs-toggle="modal"
      data-bs-target="#staticBackdropLive">×でしか閉じないモーダル</button>
  
      <div class="modal fade" id="staticBackdropLive" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
    aria-labelledby="staticBackdropLiveLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="staticBackdropLiveLabel">Modal title</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <p>I will not close if you click outside me. Don't even try to press escape key.</p>
        </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">Understood</button>
        </div>
      </div>
    </div>
  </div>

バッジによるカウンター表示:button


  <!-- buttonにspanでカウンターを設定する、ボタンをクリックすると動作する -->
  <!-- spanにbadgeを設定し、badgeの色も設定する -->
  <button type="button" class="btn btn-primary">
    button <span class="badge bg-light text-dark">4</span>
  </button>

スクリーンリーダー視覚支援 非表示テキスト:visually-hidden


  <!-- visually-hiddenは非表示で、スクリーンリーダのみ読み上げます -->
  <button type="button" class="btn btn-primary">
    未読メッセージ <span class="badge bg-light text-dark">9</span>
    <span class="visually-hidden">未読メッセージ</span>
  </button>

Float左と右:float-startとfloat-end


  <!-- bootstrap5は、leftとrightではなく、startとendになる -->
  <div class="bg-info clearfix">
    <button type="button" class="btn btn-secondary float-start">左フロート</button>
    <button type="button" class="btn btn-secondary float-end">右フロート</button>
  </div>

ホバー、無効、アクティブの状態を持つ :list-groupとlist-group-item-action


リスト項目1 リスト項目2
  <!-- ホバー、無効、アクティブの状態を持つ  -->
  <!-- btnクラスは使わず、list-group-item-actionを使う  -->
  <!-- disabledにすることで、pointer-events: none が適用され、ホバーやアクティブな状態がトリガーを防ぐ -->
  <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>
    <button type="button" class="list-group-item list-group-item-action">リスト項目ボタン</button>
    <button type="button" class="list-group-item list-group-item-action" disabled>リスト項目ボタンdisabled</button>
  </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>

js 基本的なドロップダウン:dropdownとdata-bs-toggle


  <div class="dropdown">
    <!-- 基本構造は、dropdownで囲み、buttonやaリンクをトリガーに実行する -->
    <!-- 実行には、bootstrap.bundle.jsを必要とする(Popper.jsを含んでいる必要がある) -->
    <!-- aria-haspopup、aria-expandedは、視覚支援で、POP要素があること、折りたたまれていることを伝えている -->
    <!-- bootstrap5では、 data-bs-toggledata-bs-toggleに変更される-->
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown"
      aria-haspopup="true" aria-expanded="false">
      ドロップダウンメニュー
    </button>
    <!-- 実際のメニューは、dropdown-menuとdropdown-itemで構成する -->
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
      <a class="dropdown-item" href="#">メニュー01</a>
      <a class="dropdown-item" href="#">メニュー02</a>
      <a class="dropdown-item" href="#">メニュー03</a>
    </div>
  </div>

js Ulに設定するドロップダウン、タイトル付き:dropdown-headerとdropdown-divider


  <!-- ボタングループにすると、ドロップダウンメニューのデザインが変わる -->
  <div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true"
      aria-expanded="false">
      Ulのドロップダウン
    </button>
    <ul class="dropdown-menu">
      <li>
        <h6 class="dropdown-header">Dropdownタイトル</h6>
      </li>
      <li><a class="dropdown-item" href="#">アクション</a></li>
      <li><a class="dropdown-item" href="#">コンテンツ</a></li>
      <li>
        <hr class="dropdown-divider">
      </li>
      <li><a class="dropdown-item" href="#">詳細</a></li>
    </ul>
  </div>

js ボタングループに設定するドロップダウン:btn-group


  <!-- ボタングループにすると、ドロップダウンメニューのデザインが変わる -->
  <div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true"
      aria-expanded="false">
      ドロップダウン
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">メニュー01</a>
      <a class="dropdown-item" href="#">メニュー02</a>
      <a class="dropdown-item" href="#">メニュー03</a>
    </div>
  </div>

js メニューの位置をボタンと右寄せにする:dropdown-menu-end


  <div class="btn-group">
    <!-- btn-info要素で色の変更 -->
    <button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true"
      aria-expanded="false">
      メニューの位置を右寄せにしたドロップダウン
    </button>
    <div class="dropdown-menu dropdown-menu-end">
      <button class="dropdown-item" type="button">メニュー01</button>
      <button class="dropdown-item" type="button">メニュー02</button>
      <button class="dropdown-item" type="button">メニュー03</button>
    </div>
  </div>

js 切り替えボタンにaタグ要素を使用する:dropdown-toggle


  <div class="dropdown">
    <!-- 切り替えボタン roleを付与して、リンクではなくボタンであることを視覚支援する-->
    <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown"
      aria-haspopup="true" aria-expanded="false">
      ドロップダウンリンクメニュー
    </a>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
      <a class="dropdown-item" href="#">メニュー01</a>
      <a class="dropdown-item" href="#">メニュー02</a>
      <a class="dropdown-item" href="#">メニュー03</a>
    </div>
  </div>

js メニュー項目にアクティブの状態を設定する:activeとaria-current


  <div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true"
      aria-expanded="false">ドロップダウン</button>
    <!-- ドロップダウンメニュー -->
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">メニュー01</a>
      <a class="dropdown-item disabled" tabindex="-1" aria-disabled="true" href="#">メニュー02(無効)</a>
      <!-- activeにした場合は、aria-current="true"で視覚支援をする -->
      <a class="dropdown-item active" aria-current="true" href="#">メニュー03(アクティブ)</a>
    </div>
  </div>

js 左方向表示のドロップメニュー:dropleft


  <!-- 左方向へのドロップ -->
  <div class="text-center">
    <div class="btn-group dropstart">
      <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true"
        aria-expanded="false">左方向にドロップメニュー表示</button>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">メニュー01</a>
        <a class="dropdown-item" href="#">メニュー02</a>
        <a class="dropdown-item" href="#">メニュー03</a>
      </div>
    </div>
  </div>

js 右方向表示のドロップメニュー:dropright


  <!-- 右方向へのドロップ -->
  <div class="btn-group dropend">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true"
      aria-expanded="false">右方向にドロップメニュー表示</button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">メニュー01</a>
      <a class="dropdown-item" href="#">メニュー02</a>
      <a class="dropdown-item" href="#">メニュー03</a>
    </div>
  </div>

js 上方向表示のドロップメニュー:dropup


  <!-- 上方向へのドロップ -->
  <div class="btn-group dropup">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true"
      aria-expanded="false">上方向にドロップメニュー表示</button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">メニュー01</a>
      <a class="dropdown-item" href="#">メニュー02</a>
      <a class="dropdown-item" href="#">メニュー03</a>
    </div>
  </div>

js オーバーフロー(枠から飛び出すメニュー)を制約する設定:data-boundary


  <div class="bg-info text-center" style="width:250px;height:250px;overflow:scroll;">
    <br><br><br>
    <div class="dropdown">
      <!-- ata-boundary="scrollParent"-->
      <button class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown"
        data-boundary="scrollParent">ドロップダウンボタン</button>
      <div class="dropdown-menu">
        <a href="#" class="dropdown-item">スクロールウィンドウ幅で制約されるドロップダウンメニュー</a>
        <a href="#" class="dropdown-item">スクロールウィンドウ幅で制約されるドロップダウンメニュー</a>
        <a href="#" class="dropdown-item">スクロールウィンドウ幅で制約されるドロップダウンメニュー</a>
      </div>
    </div>
  </div>

js スペースがない場合に、反対側にドロップダウンを表示させる:data-flip







  <div class="box" style="overflow: auto">
    <br><br><br><br><br>
    <div class="dropdown">
      <!-- data-flip="true" Popper.jsが管理しているからbsは付けない-->
      <button class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-flip="true">ドロップダウンボタン</button>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">メニュー1</a>
        <a class="dropdown-item" href="#">メニュー2</a>
        <a class="dropdown-item" href="#">メニュー3</a>
      </div>
    </div>
  </div>

js ドロップダウンメニューにdivでテキストを配置する:text-muted


  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown"
      aria-haspopup="true" aria-expanded="false">ドロップダウン</button>
    <!-- ドロップダウンメニュー -->
    <div class="dropdown-menu p-3 text-muted" style="max-width: 300px;">
      <p>メニュー内のテキストその1</p>
      <p class="text-danger">メニュー内のテキストその2</p>
    </div>
  </div>

js トグルボタンでdivコンテンツに様々な要素を追加する:dropdown-toggleとdropdown-menu


  <div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true"
      aria-expanded="false">ドロップダウン</button>
    <!-- divで作成するコンテンツありのメニュー -->
    <div class="dropdown-menu">
      <h6 class="dropdown-header">ドロップダウンメニューのタイトル</h6>
      <form class="px-4 py-3">
        <div class="mb-3">
          <label for="email">メールアドレス</label>
          <input type="email" class="form-control" id="email" placeholder="email@example.com">
        </div>
        <div class="mb-3">
          <label for="password">パスワード</label>
          <input type="password" class="form-control" id="password" placeholder="Password">
        </div>
        <!-- form-checkはチェックボックス -->
        <!-- form-check-labelはチェックの状態に応じたラベルスタイルになる-->
        <div class="form-check">
          <input type="checkbox" class="form-check-input" id="check">
          <label class="form-check-label" for="check"> ログイン情報を記憶 </label>
        </div>
        <button type="submit" class="btn btn-secondary">ログイン</button>
      </form>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#1">初めての方</a>
      <a class="dropdown-item" href="#2">パスワードをお忘れの方</a>
    </div>
  </div>

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>

js スプリットボタン(分割ボタン)のドロップダウン:dropdown-toggle-split


  <div class="btn-group">
    <button type="button" class="btn btn-secondary">スプリットボタン</button>
    <!-- ボタンとメニューを分割する、ボタンを押してもメニューは開かない、スプリットボタンを押す必要がある -->
    <!--dropdown-toggle-splitはパディングのデザイン要素の役割  -->
    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"
      aria-haspopup="true" aria-expanded="false">
    </button>
    <!-- ドロップダウンメニュー -->
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">メニュー01</a>
      <a class="dropdown-item" href="#">メニュー02</a>
      <a class="dropdown-item" href="#">メニュー03</a>
    </div>
  </div>

js ドロップダウンのオフセット値を設定する:data-bs-offset


  <div class="dropdown">
    <!-- data-bs-offsetを設定することで表示場所を変えることができる -->
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffsetButton"
      data-bs-toggle="dropdown" data-bs-offset="10,60" aria-haspopup="true" aria-expanded="false">ドロップダウンボタン</button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuOffsetButton">
      <a class="dropdown-item" href="#">メニュー1</a>
      <a class="dropdown-item" href="#">メニュー2</a>
      <a class="dropdown-item" href="#">メニュー3</a>
    </div>
  </div>

フォームの基本要素:form-control


キャリアメールは届かない場合があります。
  <form>
    <!-- Bootstrap は display: block と width: 100%をほぼすべてのフォームコントロールに適用しているので、フォームはデフォルトでは垂直に並びます。 -->
    <!-- inputタグに、form-controlが設定する -->
    <div class="mb-3">
      <label for="email1">メールアドレス</label>
      <input type="email" class="form-control" id="email1" aria-describedby="emailHelp" placeholder="メールアドレスを入力">
      <small id="emailHelp" class="form-text text-muted">キャリアメールは届かない場合があります。</small>
    </div>
    <div class="mb-3">
      <label for="password1">パスワード</label>
      <input type="password" class="form-control" id="password1" placeholder="パスワードを入力">
    </div>
    <div class="mb-3">
      <label for="select1">プルダウンメニューから選んでください</label>
      <select class="form-select" id="select1">
        <option>メニュー1</option>
        <option>メニュー2</option>
        <option>メニュー3</option>
        <option>メニュー4</option>
        <option>メニュー5</option>
      </select>
    </div>
    <!-- 複数選択のプルダウンメニュー -->
    <div class="mb-3">
      <label for="select2">複数選択のプルダウンメニュー</label>
      <select multiple class="form-select" id="select2">
        <option>複数選択可A</option>
        <option>複数選択可B</option>
        <option>複数選択可C</option>
        <option>複数選択可D</option>
        <option>複数選択可E</option>
      </select>
    </div>
    <div class="mb-3">
      <label for="textarea1">複数行のテキスト入力欄</label>
      <textarea class="form-control" id="textarea1" rows="3"></textarea>
    </div>
    <div class="mb-3">
      <label for="file1">ファイルを選択</label>
      <input type="file" class="form-control-file" id="file1">
    </div>
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="checkbox01">
      <label class="form-check-label" for="">チェックする</label>
    </div>
    <button type="submit" class="btn btn-primary">送信</button>
  </form>

フォームレイアウトにrow自動サイズ調整カラム:rowとcol-auto


  <!-- flexbox ユーティリティを使用してコンテンツを垂直方向にセンタリングし、 -->
  <!-- .col を .col-auto に変更して、カラムが必要なだけのスペースを占有する。 -->
  <!-- カラムのサイズは内容に基づいてデバイス等により自動的に決定されます -->
  <!-- bootstrap5では、form-rowからrowに変更 -->
  <div class="row align-items-center">
    <div class="col-auto">
      <!-- labelはvisually-hidden -->
      <label class="visually-hidden" for="inputName">氏名</label>
      <input type="text" class="form-control mb-2" id="inputName" placeholder="氏名を入力">
    </div>
    <div class="col-auto">
      <div class="input-group mb-2">
        <label class="visually-hidden" for="inputUsername">ユーザーネーム</label>
        <input type="text" class="form-control" id="inputUsername" placeholder="ユーザーネームを入力">
      </div>
    </div>
    <div class="col-auto">
      <div class="form-check mb-2">
        <input type="checkbox" class="form-check-input" id="check">
        <label class="form-check-label" for="check"> チェックする </label>
      </div>
    </div>
    <div class="col-auto">
      <button type="submit" class="btn btn-primary mb-2">送信</button>
    </div>
  </div>

フォームレイアウトにrow:rowとmb-3とcol-md-6


  <!-- colとrowで自由自在にデザインを作っていく -->
  <div class="row">
    <div class="mb-3 col-md-6">
      <label for="inputEmail">メールアドレス</label>
      <input type="email" class="form-control" id="inputEmail" placeholder="メールアドレスを入力">
    </div>
    <div class="mb-3 col-md-6">
      <label for="inputPassword">パスワード</label>
      <input type="password" class="form-control" id="inputPassword" placeholder="パスワードを入力">
    </div>
  </div>
  <div class="row">
    <div class="mb-3 col-md-4">
      <label for="inputState">国</label>
      <select id="inputState" class="form-select">
        <option selected>Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="mb-3 col-md-2">
      <label for="inputZip">郵便番号</label>
      <input type="text" class="form-control" id="inputZip">
    </div>
    <div class="mb-3 col-md-6">
      <label for="inputCity">都道府県</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
  </div>
  <div class="mb-3">
    <label for="inputAddress1">住所1</label>
    <input type="text" class="form-control" id="inputAddress1" placeholder="市町村">
  </div>
  <div class="mb-3">
    <label for="inputAddress2">住所2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="マンション名">
  </div>
  <div class="mb-3">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="check">
      <label class="form-check-label" for="check">チェックする</label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">サインイン</button>

一連の入力グループをまとめて無効にする:disabled


  <fieldset disabled>
    <div class="mb-3">
      <label for="disabledTextInput">無効な入力欄</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="mb-3">
      <label for="disabledSelect">無効なプルダウンメニュー</label>
      <select id="disabledSelect" class="form-select">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="disabledCheck" disabled>
      <label class="form-check-label" for="disabledCheck">無効なチェックボックス</label>
    </div>
    <button type="submit" class="btn btn-primary">無効な送信ボタン</button>
  </fieldset>

水平配置のフォームを作成する:mb-3とrowとcol


ラジオボタン
チェックボックス
  <div class="mb-3 row">
    <label for="inputEmail" class="col-sm-2 col-form-label">メールアドレス</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail" placeholder="メールアドレスを入力">
    </div>
  </div>
  <div class="mb-3 row">
    <label for="inputPassword" class="col-sm-2 col-form-label">パスワード</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="パスワードを入力">
    </div>
  </div>
  <fieldset class="mb-3">
    <div class="row">
      <legend class="col-form-label col-sm-2 pt-0">ラジオボタン</legend>
      <div class="col-sm-10">
        <div class="form-check">
          <input class="form-check-input" type="radio" name="radios" id="radios1" value="option1" checked>
          <label class="form-check-label" for="radios1">オプション1</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="radios" id="radios2" value="option2">
          <label class="form-check-label" for="radios2">オプション2</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="radios" id="radios3" value="option3" disabled>
          <label class="form-check-label" for="radios3">オプション3(無効)</label>
        </div>
      </div>
    </div>
  </fieldset>
  <div class="mb-3 row">
    <div class="col-sm-2">チェックボックス</div>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="check1">
        <label class="form-check-label" for="check1">チェックする</label>
      </div>
    </div>
  </div>
  <div class="mb-3 row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">サインイン</button>
    </div>
  </div>

インラインのフォーム:form-inline


@
  <!-- formにclassを設定する -->
  <form class="form-inline">
    <label class="visually-hidden" for="name">氏名</label>
    <input type="text" class="form-control mb-2 mr-sm-2" id="name" placeholder="氏名を入力">
    <label class="visually-hidden" for="username">ユーザーネーム</label>
    <!-- input-groupとinput-group-textを設定して、テキスト文字と混在させる -->
    <div class="input-group mb-2 mr-sm-2">
      <div class="input-group-text">@</div>
      <input type="text" class="form-control" id="username" placeholder="ユーザーネームを入力">
    </div>
    <div class="form-check mb-2 mr-sm-2">
      <input class="form-check-input" type="checkbox" id="checkbox20">
      <label class="form-check-label" for="checkbox20">チェックする</label>
    </div>
    <button type="submit" class="btn btn-primary mb-2">送信</button>
  </form>

クライアント側で入力検証を行う場合:required


姓を入力してください
名を入力してください
市町村名を入力してください
都道府県名を入力してください
郵便番号を入力してください
  <form class="row g-3">
    <div class="col-md-6 mb-3">
      <label for="validationServer01">姓</label>
      <!-- requiredは必須-->
      <input type="text" class="form-control" id="validationServer01" placeholder="First name" value="山田" required>
      <div class="invalid-feedback">姓を入力してください</div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationServer02">名</label>
      <input type="text" class="form-control" id="validationServer02" placeholder="Last name" value="太郎" required>
      <div class="invalid-feedback">名を入力してください</div>
    </div>
    </div>
    <div class="form">
      <div class="col-md-6 mb-3">
        <label for="validationServer03">市町村</label>
        <input type="text" class="form-control" id="validationServer03" placeholder="市町村名を入力" required>
        <div class="invalid-feedback">市町村名を入力してください</div>
      </div>
      <div class="col-md-3 mb-3">
        <label for="validationServer04">都道府県</label>
        <input type="text" class="form-control" id="validationServer04" placeholder="都道府県名を入力" required>
        <div class="invalid-feedback">都道府県名を入力してください</div>
      </div>
      <div class="col-md-3 mb-3">
        <label for="validationServer05">郵便番号</label>
        <input type="text" class="form-control" id="validationServer05" placeholder="郵便番号を入力" required>
        <div class="invalid-feedback">郵便番号を入力してください</div>
      </div>
    </div>
    <button class="btn btn-primary" type="submit">送信する</button>
  </form>

サーバー側で入力検証を行う場合:is-valid


市町村名を入力してください
都道府県名を入力してください
郵便番号を入力してください
  <div class="form">
    <div class="col-md-6 mb-3">
      <label for="validationServer01">姓</label>
      <!-- is-valid はチェックマークが付く-->
      <input type="text" class="form-control is-valid" id="validationServer01" placeholder="First name" value="山田"
        required>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationServer02">名</label>
      <input type="text" class="form-control is-valid" id="validationServer02" placeholder="Last name" value="太郎"
        required>
    </div>
  </div>
  <div class="form">
    <div class="col-md-6 mb-3">
      <label for="validationServer03">市町村</label>
      <input type="text" class="form-control is-invalid" id="validationServer03" placeholder="市町村名を入力" required>
      <div class="invalid-feedback">市町村名を入力してください</div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">都道府県</label>
      <input type="text" class="form-control is-invalid" id="validationServer04" placeholder="都道府県名を入力" required>
      <div class="invalid-feedback">都道府県名を入力してください</div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer05">郵便番号</label>
      <input type="text" class="form-control is-invalid" id="validationServer05" placeholder="郵便番号を入力" required>
      <div class="invalid-feedback">郵便番号を入力してください</div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">送信する</button>

ボタンの色:btn-*


  <button type="button" class="btn btn-primary">btn-primary</button>
  <button type="button" class="btn btn-secondary">btn-secondary</button>
  <button type="button" class="btn btn-success">btn-success</button>
  <button type="button" class="btn btn-danger">btn-danger</button>
  <button type="button" class="btn btn-warning">btn-warning</button>
  <button type="button" class="btn btn-info">btn-info</button>
  <button type="button" class="btn btn-light">btn-light</button>
  <button type="button" class="btn btn-dark">btn-dark</button>
  <button type="button" class="btn btn-link">btn-link</button>

アウトラインボタンの色:btn-outline-*


  <!-- 塗りつぶしがない -->
  <button class="btn btn-outline-primary">outline-primary</button>
  <button class="btn btn-outline-secondary">outline-secondary</button>
  <button class="btn btn-outline-success">outline-success</button>
  <button class="btn btn-outline-danger">outline-danger</button>
  <button class="btn btn-outline-warning">outline-warning</button>
  <button class="btn btn-outline-info">outline-info</button>
  <button class="btn btn-outline-light">outline-light</button>
  <button class="btn btn-outline-dark">outline-dark</button>

ボタンサイズを変更する:btn-lg:btn-sm


  <button class="btn btn-primary btn-lg">大サイズ</button>
  <button class="btn btn-primary">通常サイズ</button>
  <button class="btn btn-primary btn-sm">小サイズ</button>

アクティブ状態のボタン:active


  <a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">アクティブボタン</a>
  <a href="#" class="btn btn-primary btn-lg" role="button">通常ボタン</a>

a要素やinput要素でボタンを作成する:btn


  <!-- aも、inputも、typeでも見た目は変らず -->
  <a class="btn btn-primary" href="#" role="button">a要素ボタン</a>
  <input class="btn btn-primary" type="button" value="inputボタン">
  <input class="btn btn-primary" type="submit" value="submitボタン">
  <input class="btn btn-primary" type="reset" value="resetボタン">

js ラジオボタンをボタン表示に変更する:btn-check


  <div class="btn-group" data-bs-toggle="buttons">
    <input type="radio" class="btn-check" checked autocomplete="off">
    <label class="btn btn-secondary active">ラジオ1</label>
    <input type="radio" class="btn-check" autocomplete="off">
    <label class="btn btn-secondary">ラジオ2</label>
    <input type="radio" class="btn-check" autocomplete="off">
    <label class="btn btn-secondary">ラジオ3</label>
  </div>

js チェックボックスをボタン表示に変更する:btn-check


  <!-- トグルボタンは、クリック後にボタンからマウスを離してもアクティブな状態が維持される -->
  <div class="btn-group" data-bs-toggle="buttons">
    <input type="checkbox" class="btn-check" checked autocomplete="off">
    <label class="btn btn-secondary active">チェック1</label>
    <input type="checkbox" class="btn-check" autocomplete="off">
    <label class="btn btn-secondary">チェック2</label>
    <input type="checkbox" class="btn-check" autocomplete="off">
    <label class="btn btn-secondary">チェック3</label>
  </div>

無効状態のリンクボタンを作成する:disabled


  <a href="#" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">無効ボタン</a>
  <a href="#" class="btn btn-primary btn-lg" role="button">通常ボタン</a>

無効状態のボタンを作成する:disabled


  <button class="btn btn-lg btn-primary" disabled>無効ボタン</button>
  <button class="btn btn-lg btn-primary">通常ボタン</button>

ボタングループ:btn-group


  <!-- btn-group(一連のグループに見える)を付けて、roleとaria-labelで視覚支援する  -->
  <div class="btn-group" role="group" aria-label="基本的な使用例">
    <button type="button" class="btn btn-secondary">左ボタン</button>
    <button type="button" class="btn btn-secondary">中ボタン</button>
    <button type="button" class="btn btn-secondary">右ボタン</button>
  </div>

ボタンツールバー:btn-toolbar


  <div class="btn-toolbar" role="toolbar" aria-label="ボタンツールバー">
    <!-- ボタンをひとまとめにすることができる -->
    <div class="btn-group me-2" role="group" aria-label="ボタングループ1">
      <button type="button" class="btn btn-secondary">1</button>
      <button type="button" class="btn btn-secondary">2</button>
      <button type="button" class="btn btn-secondary">3</button>
      <button type="button" class="btn btn-secondary">4</button>
    </div>
    <div class="btn-group me-2" role="group" aria-label="ボタングループ2">
      <button type="button" class="btn btn-secondary">A</button>
      <button type="button" class="btn btn-secondary">B</button>
      <button type="button" class="btn btn-secondary">C</button>
    </div>
    <div class="btn-group" role="group" aria-label="ボタングループ3">
      <button type="button" class="btn btn-secondary">D</button>
    </div>
  </div>

ボタングループ:ボタンのサイズ変更:btn-group-lg




  <div class="btn-group btn-group-lg" role="group" aria-label="グループ1">
    <button type="button" class="btn btn-secondary">大左ボタン</button>
    <button type="button" class="btn btn-secondary">大中ボタン</button>
    <button type="button" class="btn btn-secondary">大右ボタン</button>
  </div>
  <hr>
  <div class="btn-group" role="group" aria-label="グループ2">
    <!-- 何もなければデフォルト -->
    <button type="button" class="btn btn-secondary">左ボタン</button>
    <button type="button" class="btn btn-secondary">中ボタン</button>
    <button type="button" class="btn btn-secondary">右ボタン</button>
  </div>
  <hr>
  <!-- btn-group-sm -->
  <div class="btn-group btn-group-sm" role="group" aria-label="グループ3">
    <button type="button" class="btn btn-secondary">小左ボタン</button>
    <button type="button" class="btn btn-secondary">小中ボタン</button>
    <button type="button" class="btn btn-secondary">小右ボタン</button>
  </div>

js ドロップダウンメニュー:data-bs-toggleとdropdown


  <!-- .dropdown, .dropdown-toggle, data-bs-toggle="dropdown", .dropdown-menu, .dropdown-item を組み合わせてドロップダウンメニューを作成する -->
  <div class="btn-group" role="group" aria-label="ドロップダウンを含むボタングループ">
    <button type="button" class="btn btn-secondary">1</button>
    <div class="btn-group" role="group">
      <button id="dropmenu1" type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown"
        aria-haspopup="true" aria-expanded="false">
        ドロップダウン
      </button>
      <div class="dropdown-menu" aria-labelledby="dropmenu1">
        <a class="dropdown-item" href="#">リンク1</a>
        <a class="dropdown-item" href="#">リンク2</a>
      </div>
    </div>
  </div>

js 垂直方向ボタングループ:btn-group-vertical


  <div class="btn-group-vertical" role="group" aria-label="ドロップダウンを含むボタングループ">
    <button type="button" class="btn btn-secondary">上ボタン</button>
    <button type="button" class="btn btn-secondary">中ボタン</button>
    <div class="btn-group" role="group">
      <button id="drop2" type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown"
        aria-haspopup="true" aria-expanded="false">
        ドロップダウン
      </button>
      <div class="dropdown-menu" aria-labelledby="drop2">
        <a class="dropdown-item" href="#">リンク1</a>
        <a class="dropdown-item" href="#">リンク2</a>
      </div>
    </div>
    <button type="button" class="btn btn-secondary">下ボタン</button>
  </div>

js 押されている状態のボタンを作成する:aria-pressed


  <!-- ボタンが押されている状態と押されていない状態を表示する -->
  <button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true"
    autocomplete="off">押された状態</button>
  <button type="button" class="btn btn-primary" data-bs-toggle="button" aria-pressed="false"
    autocomplete="off">押されていない状態</button>

js ピル型ナビゲーションドロップダウン:nav-linkとdropdown-toggle


  <ul class="nav nav-pills">
    <li class="nav-item"><a class="nav-link active" href="#">アクティブ</a></li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true"
        aria-expanded="false">ドロップダウン</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">リンク1</a>
        <a class="dropdown-item" href="#">リンク2</a>
        <a class="dropdown-item" href="#">リンク3</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">その他リンク</a>
      </div>
    </li>
    <li class="nav-item"><a class="nav-link" href="#">リンク</a></li>
    <li class="nav-item"><a class="nav-link disabled" href="#">無効</a></li>
  </ul>

js タブ型ナビゲーションドロップダウン:dropdown-toggle


  <ul class="nav nav-tabs">
    <li class="nav-item"><a class="nav-link active" href="#">アクティブ</a></li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true"
        aria-expanded="false">ドロップダウン</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">リンク1</a>
        <a class="dropdown-item" href="#">リンク2</a>
        <a class="dropdown-item" href="#">リンク3</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">その他リンク</a>
      </div>
    </li>
    <li class="nav-item"><a class="nav-link" href="#">リンク</a></li>
    <li class="nav-item"><a class="nav-link disabled" href="#">無効</a></li>
  </ul>

js アコーディオンを作成する:data-bs-toggleとcollapse


カード01のコンテンツ。再びクリック又は他のカードの切替ボタンをクリックすると非表示になります。
コンテンツ02のコンテンツ。
サイドメニューなどに使える。
カード03のコンテンツ。再びクリック又は他のカードの切替ボタンをクリックすると非表示になります。
  <div class="accordion" id="accordion">
    <div class="card">
      <!-- アコーディオンは、開いたり閉じたりする機能。サイドメニューなどにも使える -->
      <!-- aria-expanded="true"でコンテンツが開いたままになる -->
      <div class="card-header" id="headingOne">
        <h5 class="mb-0">
          <button class="btn btn-link" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne"
            aria-expanded="true" aria-controls="collapseOne">
            コンテンツ1の切替ボタン
          </button>
        </h5>
      </div>
      <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-bs-parent="#accordion">
        <div class="card-body">
          カード01のコンテンツ。再びクリック又は他のカードの切替ボタンをクリックすると非表示になります。
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header" id="headingTwo">
        <h5 class="mb-0">
          <button class="btn btn-link collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo"
            aria-expanded="false" aria-controls="collapseTwo">
            コンテンツ2の切替ボタン
          </button>
        </h5>
      </div>
      <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-bs-parent="#accordion">
        <div class="card-body">
          コンテンツ02のコンテンツ。<br>サイドメニューなどに使える。
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header" id="headingThree">
        <h5 class="mb-0">
          <button class="btn btn-link collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree"
            aria-expanded="false" aria-controls="collapseThree">
            コンテンツ3の切替ボタン
          </button>
        </h5>
      </div>
      <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-bs-parent="#accordion">
        <div class="card-body">
          カード03のコンテンツ。再びクリック又は他のカードの切替ボタンをクリックすると非表示になります。
        </div>
      </div>
    </div>
  </div>

js アコーディオンflushタイプのメニュー:accordion-flush


本文

本文

本文
  <!-- アコーディオンを親コンテナと一緒に 端から端までレンダリングします。 -->
  <!-- data-bs-parentに同じ親のidを指定する accordionFlushExample -->  
  <div class="accordion accordion-flush" id="accordionFlushExample">
    <div class="accordion-item">
      <h3 class="accordion-header" id="flush-headingOne">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
          data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">Accordion Item
          #1</button>
      </h3>
      <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne"
        data-bs-parent="#accordionFlushExample">
        <div class="accordion-body">本文</div>
      </div>
    </div>
    <div class="accordion-item">
      <h3 class="accordion-header" id="flush-headingTwo">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
          data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">Accordion Item
          #2</button>
      </h3>
      <div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo"
        data-bs-parent="#accordionFlushExample">
        <div class="accordion-body">本文</div>
      </div>
    </div>
    <div class="accordion-item">
      <h3 class="accordion-header" id="flush-headingThree">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
          data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">Accordion
          Item #3</button>
      </h3>
      <div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree"
        data-bs-parent="#accordionFlushExample">
        <div class="accordion-body">本文</div>
      </div>
    </div>
  </div>

js 複数の要素の表示と非表示の切り替え:data-bs-targetとcollapse


ID「content-01」、クラス「contents」
ID「content-02」、クラス「contents」
  <!-- 切替ボタン、data-bs-targetで切り替え先を指定する -->
  <p>
    <button class="btn btn-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#content-01"
      aria-expanded="false" aria-controls="content-01">ID「content-01」</button>
    <button class="btn btn-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#content-02"
      aria-expanded="false" aria-controls="content-02">ID「content-02」</button>
  </p>
  <!-- 切り替え先は、IDで指定する「content-01」、クラス「contents」 -->
  <div class="row">
    <div class="col">
      <div class="collapse contents" id="content-01">
        <div class="card card-body">
          ID「content-01」、クラス「contents」
        </div>
      </div>
    </div>
    <div class="col">
      <div class="collapse contents" id="content-02">
        <div class="card card-body">
          ID「content-02」、クラス「contents」
        </div>
      </div>
    </div>
  </div>

js Collapse (コラプス)複数同時折り畳み:collapse


ボタン1本文
ボタン2本文
  <!--複数の要素を表示および非表示にすることができる  -->
    <!--toggleは開いていれば閉じる、閉じていれば開く  -->
    <p>
      <a class="btn btn-primary" data-bs-toggle="collapse" href="#multi1" role="button"
        aria-expanded="false" aria-controls="multi1">ボタン1</a>
      <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multi2"
        aria-expanded="false" aria-controls="multi2">ボタン2</button>
        <!-- aria-controls="multi1 multi2"に複数指定することで実現する -->
      <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse"
        aria-expanded="false" aria-controls="multi1 multi2">ボタン12</button>
    </p>
    <div class="row">
      <div class="col">
        <div class="collapse multi-collapse" id="multi1">
          <div class="card card-body">ボタン1本文</div>
        </div>
      </div>
      <div class="col">
        <div class="collapse multi-collapse" id="multi2">
          <div class="card card-body">ボタン2本文</div>
        </div>
      </div>
    </div>
  

js インジケータ、タイトル、キャプション付きカルーセル:carousel-indicatorsとdata-bs-slide-to


  <div id="carouselSample" class="carousel slide" data-bs-ride="carousel">
    <!-- インジケーターによるフェード遷移(好きな場所にクリックでいける) -->
    <ol class="carousel-indicators">
      <li data-bs-target="#carouselSample" data-bs-slide-to="0" class="active"></li>
      <li data-bs-target="#carouselSample" data-bs-slide-to="1"></li>
      <li data-bs-target="#carouselSample" data-bs-slide-to="2"></li>
    </ol>
    <!-- カルーセル部分 -->
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img class="d-block w-100" slide"
          src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=First slide">
        <div class="carousel-caption d-none d-md-block">
          <h5>スライドタイトル</h5>
          <p>スライドのキャプション</p>
        </div>
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" alt="img"
          src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Second slide">
        <div class="carousel-caption d-none d-md-block">
          <h5>スライドタイトル</h5>
          <p>スライドのキャプション</p>
        </div>
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" alt="img"
          src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Third slide">
        <div class="carousel-caption d-none d-md-block">
          <h5>スライドタイトル</h5>
          <p>スライドのキャプション</p>
        </div>
      </div>
    </div>
    <!-- コントローラー部分 -->
    <!-- 前と次のアイコン付きカルーセル -->
    <a class="carousel-control-prev" href="#carouselSample" role="button" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">前に戻る</span>
    </a>
    <a class="carousel-control-next" href="#carouselSample" role="button" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">次に送る</span>
    </a>
  </div>

js データ属性でインターバルの設定:data-bs-interval


  <div class="container">
    <!-- intervalの設定 -->
    <div id="carouselExample" class="carousel slide" data-bs-ride="carousel" data-bs-interval="15000">
      <ol class="carousel-indicators">
        <li data-bs-target="#carouselExample" data-bs-slide-to="0" class="active"></li>
        <li data-bs-target="#carouselExample" data-bs-slide-to="1"></li>
        <li data-bs-target="#carouselExample" data-bs-slide-to="2"></li>
      </ol>
      <!-- カルーセル部分 -->
      <div class="carousel-inner">
        <!-- First slide -->
        <div class="carousel-item active"> <img class="d-block w-100" alt="img"
            src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=First slide">
          <div class="carousel-caption">
            <h5>スライドタイトル</h5>
            <p>スライドのキャプション</p>
          </div>
        </div>
        <!-- Second slide -->
        <div class="carousel-item"> <img class="d-block w-100" alt="img"
            src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Second slide">
          <div class="carousel-caption">
            <h5>スライドタイトル</h5>
            <p>スライドのキャプション</p>
          </div>
        </div>
        <!-- Third slide -->
        <div class="carousel-item"> <img class="d-block w-100" alt="img"
            src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Third slide">
          <div class="carousel-caption">
            <h5>スライドタイトル</h5>
            <p>スライドのキャプション</p>
          </div>
        </div>
      </div>
      <!-- 前に戻るアイコン -->
      <a class="carousel-control-prev" href="#carouselExample" role="button" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">前に戻る</span>
      </a>
      <!-- 次に送るアイコン -->
      <a class="carousel-control-next" href="#carouselExample" role="button" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">次に送る</span>
      </a>
    </div>
  </div>

js データ属性でフェードトランジションの設定:carousel-fade


  <div class="container">
    <!-- スライドの代わりにフェードトランジションでスライドをアニメーションさせる -->
    <div id="carouselExample" class="carousel slide carousel-fade" data-bs-ride="carousel">
      <ol class="carousel-indicators">
        <li data-bs-target="#carouselExample" data-bs-slide-to="0" class="active"></li>
        <li data-bs-target="#carouselExample" data-bs-slide-to="1"></li>
        <li data-bs-target="#carouselExample" data-bs-slide-to="2"></li>
      </ol>
      <!-- カルーセル部分 -->
      <div class="carousel-inner">
        <!-- First slide -->
        <div class="carousel-item active"> <img class="d-block w-100" alt="img"
            src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=First slide">
          <div class="carousel-caption">
            <h5>スライドタイトル1</h5>
            <p>スライドのキャプション3</p>
          </div>
        </div>
        <!-- Second slide -->
        <div class="carousel-item"> <img class="d-block w-100" alt="img"
            src="https://via.placeholder.com/1600x900/665566/FF0000/000000?text=Second slide">
          <div class="carousel-caption">
            <h5>スライドタイトル2</h5>
            <p>スライドのキャプション3</p>
          </div>
        </div>
        <!-- Third slide -->
        <div class="carousel-item"> <img class="d-block w-100" alt="img"
            src="https://via.placeholder.com/1600x900/664466/FFEE00/000000?text=Third slide">
          <div class="carousel-caption">
            <h5>スライドタイトル3</h5>
            <p>スライドのキャプション3</p>
          </div>
        </div>
      </div>
      <!-- 前に戻るアイコン -->
      <a class="carousel-control-prev" href="#carouselExample" role="button" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">前に戻る</span>
      </a>
      <!-- 次に送るアイコン -->
      <a class="carousel-control-next" href="#carouselExample" role="button" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">次に送る</span>
      </a>
    </div>
  </div>

js インジケーター、キャプションを暗くする:carousel-dark


  <div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
    <ol class="carousel-indicators">
      <li data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active"></li>
      <li data-bs-target="#carouselExampleDark" data-bs-slide-to="1"></li>
      <li data-bs-target="#carouselExampleDark" data-bs-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active" data-bs-interval="10000">
        <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400"
          xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: First slide"
          preserveAspectRatio="xMidYMid slice" focusable="false">
          <title>image svg 1</title>
          <rect width="100%" height="100%" fill="#f5f5f5" /><text x="50%" y="50%" fill="#aaa" dy=".3em">First
            slide</text>
        </svg>
        <div class="carousel-caption d-none d-md-block">
          <h5>First タイトル</h5>
          <p>First xxxxxxxxxxxxxx</p>
        </div>
      </div>
      <div class="carousel-item" data-bs-interval="2000">
        <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400"
          xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Second slide"
          preserveAspectRatio="xMidYMid slice" focusable="false">
          <title>image svg 2</title>
          <rect width="100%" height="100%" fill="#eee" /><text x="50%" y="50%" fill="#bbb" dy=".3em">Second
            slide</text>
        </svg>
        <div class="carousel-caption d-none d-md-block">
          <h5>Second タイトル</h5>
          <p>Second xxxxxxxxxxxxxx</p>
        </div>
      </div>
      <div class="carousel-item">
        <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400"
          xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Third slide"
          preserveAspectRatio="xMidYMid slice" focusable="false">
          <title>image svg 3</title>
          <rect width="100%" height="100%" fill="#e5e5e5" /><text x="50%" y="50%" fill="#999" dy=".3em">Third
            slide</text>
        </svg>
        <div class="carousel-caption d-none d-md-block">
          <h5>Third タイトル</h5>
          <p>Third xxxxxxxxxxxxxx</p>
        </div>
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleDark" role="button" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true">
        <span class="visually-hidden">Previous
    </a>
    <a class="carousel-control-next" href="#carouselExampleDark" role="button" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true">
        <span class="visually-hidden">Next
    </a>
  </div>

js モーダル 表示ボタン、外枠(非表示)、本体、コンテンツ、閉じるボタンの5点セット


  <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#exampleModal">モーダルボタン</button>
    <!-- モーダルウィンドウ外枠 id="exampleModal"-->
  <div class="modal" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
          <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">
          モーダルの本文が入ります。
        </div>
        <div class="modal-footer">
          <!-- 「data-bs-dismiss=”modal”」が閉じる動作 -->
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
        </div>
      </div>
    </div>
  </div>

js モーダルのアニメーション設定:fade


  <div class="container">
    <button type="button" class="btn btn-secondary" data-bs-toggle="modal"
      data-bs-target="#exampleModal2">モーダルボタン</button>
    <!-- モーダルウィンドウ外枠 id="exampleModal2"-->
    <div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
      aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
            モーダルの本文が入ります。
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
          </div>
        </div>
      </div>
    </div>
  </div>

js 垂直方向中央に配置するモーダル:modal-dialog-centered


  <div class="container">
    <button type="button" class="btn btn-secondary" data-bs-toggle="modal"
      data-bs-target="#exampleModal3">モーダルボタン</button>
    <!-- モーダルウィンドウ外枠 id="exampleModal3"-->
    <div class="modal fade" id="exampleModal3" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
      aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
            <!-- モーダルの×ボタン -->
            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
            モーダルの本文が入ります。
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <style>
    .row>.col,
    .row>[class^=col-] {
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
      background-color: f8f8ff;
      border: 1px solid #aaa;
    }
  </style>

js グリッドレイアウトを使用したモーダル:rowとcol


  <div class="container">
    <button type="button" class="btn btn-secondary" data-bs-toggle="modal"
      data-bs-target="#exampleModal4">モーダルボタン</button>
    <!-- モーダルウィンドウ外枠 id="exampleModal4"-->
    <div class="modal fade" id="exampleModal4" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
      aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"><span
                aria-hidden="true">×</span></button>
          </div>
          <div class="modal-body">
            <!-- container-fluidは画面いっぱい -->
            <div class="container-fluid">
              <div class="row">
                <div class="col-md-4">col-md-4</div>
                <div class="col-md-4 ms-auto">col-md-4、ms-auto</div>
              </div>
              <div class="row">
                <div class="col-md-3 ms-auto">col-md-3、ms-auto</div>
                <div class="col-md-2 ms-auto">col-md-2、ms-auto</div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
          </div>
        </div>
      </div>
    </div>
  </div>

js 長いコンテンツのモーダル:modal-body


  <div class="container">
    <button type="button" class="btn btn-secondary" data-bs-toggle="modal"
      data-bs-target="#exampleModal5">モーダルボタン</button>
    <!-- モーダルウィンドウ外枠 id="exampleModal5"-->
    <div class="modal fade" id="exampleModal5" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
      aria-hidden="true">
      <!-- モーダルのダイアログ本体 -->
      <div class="modal-dialog" role="document">
        <!-- モーダルのコンテンツ -->
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
          </div>
        </div>
      </div>
    </div>
  </div>

js 長いコンテンツ、スクロールのモーダル:modal-dialog-scrollable


  <div class="container">
    <button type="button" class="btn btn-secondary" data-bs-toggle="modal"
      data-bs-target="#exampleModalsc">スクロールモーダルボタン</button>
    <!-- モーダルウィンドウ外枠 id="exampleModalsc"-->
    <div class="modal fade" id="exampleModalsc" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
      aria-hidden="true">
      <!-- モーダルのダイアログ本体 -->
      <div class="modal-dialog modal-dialog-scrollable" role="document">
        <!-- モーダルのコンテンツ -->
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
          </div>
        </div>
      </div>
    </div>
  </div>

js 大きなサイズのモーダル サイズのオプション:modal-lg


  <div class="container">
    <button type="button" class="btn btn-secondary" data-bs-toggle="modal"
      data-bs-target="#largeModal6">大きなモーダルボタン</button>
    <!-- モーダル id="largeModal6"-->
    <div class="modal fade" id="largeModal6" tabindex="-1" role="dialog" aria-labelledby="largeModalLabel"
      aria-hidden="true">
      <!-- 大きなモーダルのダイアログ本体modal-lg -->
      <!-- modal-sm:300px,Default(None):500px,modal-lg:800px,modal-xl:1140px
  -->
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="largeModalLabel">モーダルのタイトル</h5>
            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"> <span
                aria-hidden="true">×</span></button>
          </div>
          <div class="modal-body">モーダルの本文</div>
          <!-- モーダルのフッター -->
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
          </div>
        </div>
      </div>
    </div>

js 小さなサイズのモーダル:modal-sm


    <button type="button" class="btn btn-secondary" data-bs-toggle="modal"
      data-bs-target="#smallModal">小さなモーダルボタン(modal-sm)</button>
    <!-- モーダル id="smallModal"-->
    <div class="modal fade" id="smallModal" tabindex="-1" role="dialog" aria-labelledby="smallModalLabel"
      aria-hidden="true">
      <!-- 小さなモーダルのダイアログ本体modal-sm -->
      <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="smallModalLabel">モーダルのタイトル</h5>
            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"><span
                aria-hidden="true">×</span></button>
          </div>
          <div class="modal-body">モーダルの本文</div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
          </div>
        </div>
      </div>
    </div>

js フルスクリーンのモーダル:modal-fullscreen


    <button type="button" class="btn btn-secondary" data-bs-toggle="modal"
      data-bs-target="#fullModal">フルスクリーンモーダルボタン(modal-fullscreen)</button>
    <!-- モーダル id="fullModal"-->
    <div class="modal fade" id="fullModal" tabindex="-1" role="dialog" aria-labelledby="fullModalLabel"
      aria-hidden="true">
      <div class="modal-dialog  modal-fullscreen" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="fullModalLabel">モーダルのタイトル</h5>
            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"><span
                aria-hidden="true">×</span></button>
          </div>
          <div class="modal-body">モーダルの本文</div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
          </div>
        </div>
      </div>
    </div>
    
</body>
</html>