btn-secondary

bootstrap5.css

bootstrap5.css
.btn-secondary {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}
bootstrap5.css
.btn-secondary:hover {
  color: #fff;
  background-color: #5a6268;
  border-color: #545b62;
}
bootstrap5.css
.btn-secondary:focus,
.btn-secondary.focus {
  box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);
}
bootstrap5.css
.btn-secondary.disabled,
.btn-secondary:disabled {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}
bootstrap5.css
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle {
  color: #fff;
  background-color: #545b62;
  border-color: #4e555b;
}
bootstrap5.css
.btn-secondary:not(:disabled):not(.disabled):active:focus,
.btn-secondary:not(:disabled):not(.disabled).active:focus,
.show > .btn-secondary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);
}

html bootstrap5 Sample

button要素を使用したドロップダウン：dropdownとdata-toggle

メニュー01 メニュー02 メニュー03 
  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"
      aria-haspopup="true" aria-expanded="false">
      ドロップダウン
    </button>
    <!-- ドロップダウンメニュー -->
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <a class="dropdown-item" href="#">メニュー01</a>
      <a class="dropdown-item" href="#">メニュー02</a>
      <a class="dropdown-item" href="#">メニュー03</a>
    </div>
  </div>

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

メニュー01 メニュー02 メニュー03 
  <!-- ボタングループにすると、ドロップダウンメニューのデザインが変わる -->
  <div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-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>

メニュー項目にbuttonを使用する：dropdown-menu

  <div class="dropdown">
    <!-- 切り替えボタン -->
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"
      aria-haspopup="true" aria-expanded="false">
      ドロップダウン
    </button>
    <!-- ドロップダウンメニュー -->
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <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>

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

  <div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
      aria-expanded="false">
      メニューの位置を右寄せにしたドロップダウン
    </button>
    <div class="dropdown-menu dropdown-menu-right">
      <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>

切り替えボタンにaタグ要素を使用したドロップダウン：dropdown-toggle

メニュー01 メニュー02 メニュー03 
  <div class="dropdown">
    <!-- 切り替えボタン -->
    <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-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>

メニュー項目にアクティブの状態を設定する：active

メニュー01 メニュー02（無効） メニュー03（アクティブ） 
  <div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-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" href="#">メニュー02（無効）</a>
      <a class="dropdown-item active" href="#">メニュー03（アクティブ）</a>
    </div>
  </div>

左側表示のドロップメニュー：dropleft

メニュー01 メニュー02 メニュー03 
  <div class="container py-5 d-flex justify-content-center">
    <!-- 左方向へのドロップ -->
    <div class="btn-group dropleft">
      <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
        aria-expanded="false">左方向へのドロップ</button>
      <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>
  </div>

右側表示のドロップメニュー：dropright

メニュー01 メニュー02 メニュー03 
  <div class="container py-5 d-flex justify-content-center">
    <!-- 右方向へのドロップ -->
    <div class="btn-group dropright">
      <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
        aria-expanded="false">右方向へのドロップ</button>
      <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>
  </div>

上側表示のドロップメニュー：dropup

メニュー01 メニュー02 メニュー03 
  <div class="container py-5 d-flex justify-content-center">
    <!-- 上方向へのドロップ -->
    <div class="btn-group dropup">
      <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
        aria-expanded="false">上方向へのドロップ</button>
      <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>
  </div>

オーバーフロー（枠から飛び出す）を制約する設定：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-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>

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






メニュー1 メニュー2 メニュー3 
  <div class="box" style="overflow: auto">
    <br><br><br><br><br>
    <div class="dropdown">
      <!-- data-flip="true"-->
      <button class="btn btn-secondary dropdown-toggle" data-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>

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

メニュー1 メニュー2 メニュー3 
  <div class="dropdown">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown"
      data-offset="10,20" aria-haspopup="true" aria-expanded="false">ドロップダウンボタン</button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <a class="dropdown-item" href="#">メニュー1</a>
      <a class="dropdown-item" href="#">メニュー2</a>
      <a class="dropdown-item" href="#">メニュー3</a>
    </div>
  </div>

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

メニュー内のテキストその1

メニュー内のテキストその2

  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-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>

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

ドロップダウンメニューのタイトル
初めての方 パスワードをお忘れの方 
  <div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-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="form-group">
          <label for="email">メールアドレス</label>
          <input type="email" class="form-control" id="email" placeholder="email@example.com">
        </div>
        <div class="form-group">
          <label for="password">パスワード</label>
          <input type="password" class="form-control" id="password" placeholder="Password">
        </div>
        <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>

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

非リンクテキスト メニュー1 メニュー2 メニュー3 
  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-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>

ドロップダウンのオフセット値を設定する：offset

メニュー1 メニュー2 メニュー3 
  <!-- data-offset="x,y" はメニューの表示位置を右方向に x、下方向に y ずれた位置に表示します。 -->
  <div class="dropdown">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown"
      aria-haspopup="true" aria-expanded="false">ドロップダウンボタン</button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <a class="dropdown-item" href="#">メニュー1</a>
      <a class="dropdown-item" href="#">メニュー2</a>
      <a class="dropdown-item" href="#">メニュー3</a>
    </div>
  </div>
  <script>
    $(function () {
      $('#dropdownMenuButton').dropdown({
        offset: '10, 20'
      })
    });
  </script>

スプリットボタン（分割ボタン）のドロップダウン：dropdown-toggle-split

メニュー01 メニュー02 メニュー03 
  <div class="btn-group">
    <button type="button" class="btn btn-secondary">スプリットボタン</button>
    <!-- ボタンとメニューを分割して表示する -->
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-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>

入力グループ ボタン付きアドオン：input-group-append

  <div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="検索キーワード" aria-label="検索キーワード" aria-describedby="basic-addon1">
    <div class="input-group-append">
      <button class="btn btn-secondary" type="button">検索</button>
    </div>
  </div>
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <button class="btn btn-secondary" type="button">好き</button>
    </div>
    <input type="text" class="form-control" placeholder="商品名" aria-label="商品名" aria-describedby="basic-addon2">
    <div class="input-group-append">
      <button class="btn btn-secondary" type="button">嫌い</button>
    </div>
  </div>

入力グループ ドロップダウン付きアドオン：input-group-append

リンク1 リンク2 リンク3 
  <div class="input-group">
    <input type="text" class="form-control" aria-label="ドロップダウン付テキスト入力欄">
    <div class="input-group-append">
      <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true"
        aria-expanded="false">アクション</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>

入力グループ スプリットボタン付きアドオン：input-group-append

リンク1 リンク2 リンク3 
  <div class="input-group">
    <input type="text" class="form-control" aria-label="スプリットボタン付テキスト入力欄">
    <div class="input-group-append">
      <button type="button" class="btn btn-secondary">アクション</button>
      <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"
        aria-haspopup="true" aria-expanded="false">
        <span class="sr-only">ドロップダウン切替</span>
      </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>

ボタンの色：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>

ラジオボタンをボタンに変更する：labelとbtnとdata-toggle=buttons

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

チェックボックスをボタン変更する：labelとbtnとdata-toggle=buttons

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

ボタングループ：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 mr-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 mr-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>

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

リンク1 リンク2 
  <!-- .dropdown, .dropdown-toggle, data-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-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>

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

リンク1 リンク2 
  <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-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>

アコーディオンタイプのメニュー：data-parent

コンテンツ1

コンテンツ2

コンテンツ3 
  <!-- data-parentをclassにすることで複数の対象を同時に開閉可能（開いたら、他が閉じる） -->
  <div id="sample3">
    <div class="container">
      <p>
        <a class="btn btn-secondary" data-toggle="collapse" href="#collapseContent01" role="button"
          aria-expanded="false" aria-controls="collapseContent01">ボタン1</a>
      </p>
      <div class="collapse" id="collapseContent01" data-parent="#sample3">
        <div class="card card-body">
          コンテンツ1
        </div>
      </div>
    </div>
    <div class="container">
      <p>
        <a class="btn btn-secondary" data-toggle="collapse" href="#collapseContent02" role="button"
          aria-expanded="false" aria-controls="collapseContent02">ボタン2</a>
      </p>
      <div class="collapse" id="collapseContent02" data-parent="#sample3">
        <div class="card card-body">
          コンテンツ2
        </div>
      </div>
    </div>
    <div class="container">
      <p>
        <a class="btn btn-secondary" data-toggle="collapse" href="#collapseContent03" role="button"
          aria-expanded="false" aria-controls="collapseContent03">ボタン3</a>
      </p>
      <div class="collapse" id="collapseContent03" data-parent="#sample3">
        <div class="card card-body">
          コンテンツ3
        </div>
      </div>
    </div>
  </div>

複数の要素の表示と非表示とを切り替：data-target

ID「content-01」、クラス「contents」
ID「content-02」、クラス「contents」 
  <!-- 切替ボタン、data-targetで切り替え先を指定する -->
  <p>
    <button class="btn btn-secondary" type="button" data-toggle="collapse" data-target="#content-01"
      aria-expanded="false" aria-controls="content-01">ID「content-01」</button>
    <button class="btn btn-secondary" type="button" data-toggle="collapse" data-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>

モーダル 表示ボタン、外枠（非表示）、本体、コンテンツ、閉じるボタンの５点セット

  <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#exampleModal">モーダルボタン</button>
  <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-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">
          モーダルの本文が入ります。
        </div>
        <div class="modal-footer">
          <!-- 「data-dismiss=”modal”」が閉じる動作 -->
          <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
        </div>
      </div>
    </div>
  </div>

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

  <div class="container">
    <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#exampleModal">モーダルボタン</button>
    <div class="modal fade" 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-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-dismiss="modal">閉じる</button>
          </div>
        </div>
      </div>
    </div>
  </div>

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

  <div class="container">
    <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#exampleModal">モーダルボタン</button>
    <div class="modal fade" id="exampleModal" 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-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-dismiss="modal">閉じる</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <style>
    .row>.col,
    .row>[class^=col-] {
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
      background-color: rgba(0, 0, 0, .1);
      border: 1px solid #aaa;
    }
  </style>

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

  <div class="container">
    <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#exampleModal">モーダルボタン</button>
    <div class="modal fade" id="exampleModal" 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-dismiss="modal" aria-label="Close"><span
                aria-hidden="true">×</span></button>
          </div>
          <div class="modal-body">
            <div class="container-fluid">
              <div class="row">
                <div class="col-md-4">col-md-4</div>
                <div class="col-md-4 ml-auto">col-md-4、ml-auto</div>
              </div>
              <div class="row">
                <div class="col-md-3 ml-auto">col-md-3、ml-auto</div>
                <div class="col-md-2 ml-auto">col-md-2、ml-auto</div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
          </div>
        </div>
      </div>
    </div>
  </div>

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

  <div class="container">
    <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#exampleModal">モーダルボタン</button>
    <!-- モーダルウィンドウ外枠 -->
    <div class="modal fade" 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-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-dismiss="modal">閉じる</button>
          </div>
        </div>
      </div>
    </div>
  </div>

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

  <div class="container">
    <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#largeModal">モーダルボタン</button>
    <!-- モーダル -->
    <div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="largeModalLabel"
      aria-hidden="true">
      <!-- 大きなモーダルのダイアログ本体modal-lg -->
      <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-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-dismiss="modal">閉じる</button>
          </div>
        </div>
      </div>
    </div>

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

    <button type="button" class="btn btn-secondary" data-toggle="modal"
      data-target="#smallModal">モーダルボタン（modal-sm）</button>
    <!-- モーダル -->
    <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-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-dismiss="modal">閉じる</button>
          </div>
        </div>
      </div>
    </div>

モーダル：JavaScript使用

    <div class="container">
      <p class="text-center"><button type="button" class="btn btn-primary">モーダルボタン</button></p>
      <!-- モーダル -->
      <div class="modal" id="myModal" 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-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-dismiss="modal">閉じる</button>
              <button type="button" class="btn btn-primary">変更を保存</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script>
      $('.btn').click(function () {
        $('#myModal').modal('show');
      });
    </script>

モーダルを閉じるときにメッセージを出す：JavaScript使用

    <div class="container">
      <p class="text-center my-5"><button type="button" class="btn btn-primary" data-toggle="modal"
          data-target="#myModal">モーダルボタン</button></p>
      <div class="modal" id="myModal" 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-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-dismiss="modal">閉じる</button>
              <button type="button" class="btn btn-primary">変更を保存</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script>
      $('#myModal').on('hide.bs.modal', function (e) {
        if (!confirm('閉じてよろしいですか？')) {
          e.preventDefault();
        }
      });
    </script>
</body>
</html>