dd

  <div class="d-flex align-items-baseline" style="height: 200px">
    <!-- paddingも含めて、flaxの大きさが決まる 文字の位置の高さが同じ-->
    <div style="padding: 2rem">flex文字01 <br>（padding: 2rem）</div>
    <div style="padding: 4rem">flex文字02 <br>（padding: 4rem）</div>
    <div style="padding: 1rem">flex文字03 <br>（padding: 1rem）</div>
  </div>

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

  <!-- rowをcolで制御する -->
  <dl class="row">
    <dt class="col-sm-3">dt1</dt>
    <dd class="col-sm-9">用語1の説明。</dd>
    <!-- text-truncateがcolの幅で自動設定される -->
    <dt class="col-sm-3 text-truncate">長いテキストは切り捨てて省略</dt>
    <dd class="col-sm-9">用語2の説明。</dd>
    <dt class="col-sm-3">用語3</dt>
    <dd class="col-sm-9">
      <dl class="row">
        <dt class="col-sm-4">ネストされた用語4</dt>
        <dd class="col-sm-8">ネストされた用語4の説明</dd>
      </dl>
    </dd>
  </dl>

  <nav>
    <ul class="pagination">
      <li class="page-item"><a class="page-link" href="#" aria-label="前へ"><span aria-hidden="true">«</span><span
            class="sr-only">前へ</span></a></li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#" aria-label="次へ"><span aria-hidden="true">»</span><span
            class="sr-only">次へ</span></a></li>
    </ul>
  </nav>

  <!-- https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css -->
  <!-- font-awesomeによるアイコン -->
  <h3 class="block-title-info">
    <i class="fa fa-shopping-basket" aria-hidden="true"></i>formタイトル
  </h3>
  <div class="form-row">
    <!-- 最小単位のセット、勝手に順番に２列で並んでいく -->
    <div class="form-group col-sm-6">
      <label for="text4a">First name</label>
      <input type="text" class="form-control" id="text4a" placeholder="First name" />
    </div>
    <div class="form-group col-sm-6">
      <label for="text4b">Last name</label>
      <input type="text" class="form-control" id="text4b" placeholder="Last name" />
    </div>
    <div class="form-group col-sm-6">
      <label for="text4a">First name</label>
      <input type="text" class="form-control" id="text4a" placeholder="First name" />
    </div>
    <div class="form-group col-sm-6">
      <label for="text4b">Last name</label>
      <input type="text" class="form-control" id="text4b" placeholder="Last name" />
    </div>
    <div class="form-group col-sm-6">
      <label for="select1a">Select:</label>
      <select id="select1a" class="form-control">
        <option>Select A</option>
        <option>Select B</option>
      </select>
    </div>
    <div class="form-group col-sm-6">
      <label for="file1">File:</label>
      <input type="file" id="file1" class="form-control-file" />
    </div>
    <div class="form-group col-sm-6">
      <label for="select1a">check:</label>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="check1a" checked />
        <label class="form-check-label" for="check1a">Check A</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="check1b" />
        <label class="form-check-label" for="check1b">Check B</label>
      </div>
    </div>
    <div class="form-group col-sm-6">
      <label for="select1a">radio:</label>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="radio1" id="radio1a" checked />
        <label class="form-check-label" for="radio1a">Check A</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="radio1" id="radio1b" />
        <label class="form-check-label" for="radio1b">Check B</label>
      </div>
    </div>
  </div>

  <form>
    <div class="form-row">
      <div class="form-group col-md-6">
        <label for="inputEmail">メールアドレス</label>
        <input type="email" class="form-control" id="inputEmail" placeholder="メールアドレスを入力">
      </div>
      <div class="form-group col-md-6">
        <label for="inputPassword">パスワード</label>
        <input type="password" class="form-control" id="inputPassword" placeholder="パスワードを入力">
      </div>
    </div>
    <div class="form-row">
      <div class="form-group col-md-4">
        <label for="inputState">国</label>
        <select id="inputState" class="form-control">
          <option selected>Choose...</option>
          <option>...</option>
        </select>
      </div>
      <div class="form-group col-md-2">
        <label for="inputZip">郵便番号</label>
        <input type="text" class="form-control" id="inputZip">
      </div>
      <div class="form-group col-md-6">
        <label for="inputCity">都道府県</label>
        <input type="text" class="form-control" id="inputCity">
      </div>
    </div>
    <div class="form-group">
      <label for="inputAddress1">住所1</label>
      <input type="text" class="form-control" id="inputAddress1" placeholder="市町村">
    </div>
    <div class="form-group">
      <label for="inputAddress2">住所2</label>
      <input type="text" class="form-control" id="inputAddress2" placeholder="マンション名">
    </div>
    <div class="form-group">
      <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>
  </form>

  <div class="input-group">
    <div class="input-group-prepend">
      <span class="input-group-text" id="basic-addon1">@</span>
    </div>
    <input type="text" class="form-control" placeholder="ユーザー名" aria-label="ユーザー名" aria-describedby="basic-addon1">
  </div>

  <!-- 固定の文字列を書いておいて、その続きを入力してもらう -->
  <label for="basic-url">サイトのURL</label>
  <div class="input-group">
    <div class="input-group-prepend">
      <span class="input-group-text" id="basic-addon5">https://example.com/users/</span>
    </div>
    <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon5">
  </div>

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

  <form class="needs-validation" novalidate>
    <div class="form-row">
      <div class="col-md-6 mb-3">
        <label for="validation01">姓</label>
        <input type="text" class="form-control" id="validation01" placeholder="First name" value="山田" required>
        <div class="valid-feedback">
          入力済！
        </div>
      </div>
      <div class="col-md-6 mb-3">
        <label for="validation02">名</label>
        <input type="text" class="form-control" id="validation02" placeholder="Last name" value="太郎" required>
        <div class="valid-feedback">
          入力済！
        </div>
      </div>
    </div>
    <div class="form-row">
      <div class="col-md-6 mb-3">
        <label for="validation03">市町村</label>
        <input type="text" class="form-control" id="validation03" placeholder="市町村名を入力" required>
        <div class="invalid-feedback">
          市町村名を入力してください
        </div>
      </div>
      <div class="col-md-3 mb-3">
        <label for="validation04">都道府県</label>
        <input type="text" class="form-control" id="validation04" placeholder="都道府県名を入力" required>
        <div class="invalid-feedback">
          都道府県名を入力してください
        </div>
      </div>
      <div class="col-md-3 mb-3">
        <label for="validation05">郵便番号</label>
        <input type="text" class="form-control" id="validation05" placeholder="郵便番号を入力" required>
        <div class="invalid-feedback">
          郵便番号を入力してください
        </div>
      </div>
    </div>
    <button class="btn btn-primary" type="submit">送信する</button>
  </form>
  <!-- 無効な入力がある場合にフォームの送信を無効にする -->
  <script>
    (function () {
      'use strict';
      window.addEventListener('load', function () {
        // Bootstrapのフォームの入力検証スタイルを適用するフォームを取得
        var forms = document.getElementsByClassName('needs-validation');
        // ループして帰順を防ぐ
        var validation = Array.prototype.filter.call(forms, function (form) {
          form.addEventListener('submit', function (event) {
            if (form.checkValidity() === false) {
              event.preventDefault();
              event.stopPropagation();
            }
            form.classList.add('was-validated');
          }, false);
        });
      }, false);
    })();
  </script>

  <!-- マウスオンで説明文を表示する -->
  <form class="needs-validation" novalidate>
    <div class="form-row">
      <div class="col-md-6 mb-3">
        <label for="validation01">姓</label>
        <input type="text" class="form-control" id="validation01" placeholder="First name" value="山田" required>
        <div class="valid-tooltip"> 入力済！ </div>
      </div>
      <div class="col-md-6 mb-3">
        <label for="validation02">名</label>
        <input type="text" class="form-control" id="validation02" placeholder="Last name" value="太郎" required>
        <div class="valid-tooltip"> 入力済！ </div>
      </div>
    </div>
    <div class="form-row">
      <div class="col-md-6 mb-3">
        <label for="validation03">市町村</label>
        <input type="text" class="form-control" id="validation03" placeholder="市町村名を入力" required>
        <div class="invalid-tooltip"> 市町村名を入力してください </div>
      </div>
      <div class="col-md-3 mb-3">
        <label for="validation04">都道府県</label>
        <input type="text" class="form-control" id="validation04" placeholder="都道府県名を入力" required>
        <div class="invalid-tooltip"> 都道府県名を入力してください </div>
      </div>
      <div class="col-md-3 mb-3">
        <label for="validation05">郵便番号</label>
        <input type="text" class="form-control" id="validation05" placeholder="郵便番号を入力" required>
        <div class="invalid-tooltip"> 郵便番号を入力してください </div>
      </div>
    </div>
    <button class="btn btn-primary" type="submit">送信する</button>
  </form>
  <!-- 無効な入力がある場合にフォームの送信を無効にする -->
  <script>
    (function () {
      'use strict';
      window.addEventListener('load', function () {
        // Bootstrapのフォームの入力検証スタイルを適用するフォームを取得
        var forms = document.getElementsByClassName('needs-validation');
        // ループして帰順を防ぐ
        var validation = Array.prototype.filter.call(forms, function (form) {
          form.addEventListener('submit', function (event) {
            if (form.checkValidity() === false) {
              event.preventDefault();
              event.stopPropagation();
            }
            form.classList.add('was-validated');
          }, false);
        });
      }, false);
    })();
  </script>

  <nav class="navbar navbar-dark bg-dark">
    <form class="form-inline">
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="basic-addon1">@</span>
        </div>
        <input type="text" class="form-control" placeholder="ユーザー名" aria-label="ユーザー名" aria-describedby="basic-addon1">
      </div>
    </form>
  </nav>

  <div id="carouselSample" class="carousel slide" data-ride="carousel">
    <!-- インジケーターによるフェード遷移（好きな場所にクリックでいける） -->
    <ol class="carousel-indicators">
      <li data-target="#carouselSample" data-slide-to="0" class="active"></li>
      <li data-target="#carouselSample" data-slide-to="1"></li>
      <li data-target="#carouselSample" data-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-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">前に戻る</span>
    </a>
    <a class="carousel-control-next" href="#carouselSample" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">次に送る</span>
    </a>
  </div>

  <div class="container">
    <div id="carouselExample" class="carousel slide">
      <!-- インジケーター部分 -->
      <ol class="carousel-indicators">
        <li data-target="#carouselExample" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExample" data-slide-to="1"></li>
        <li data-target="#carouselExample" data-slide-to="2"></li>
      </ol>
      <!-- カルーセル部分 -->
      <div class="carousel-inner">
        <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>
        <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>
        <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-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">前に戻る</span>
      </a>
      <a class="carousel-control-next" href="#carouselExample" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">次に送る</span>
      </a>
    </div>
  </div>
  <script>
    $('#carouselExample').on('slide.bs.carousel', function () {
      $('#carouselExample .carousel-caption').hide();
    });
    $('#carouselExample').on('slid.bs.carousel', function () {
      $('#carouselExample .carousel-caption').show();
    });
  </script>

  <div class="container">
    <div id="carouselExample2" class="carousel slide">
      <!-- data-ride="carousel"は不要 -->
      <!-- インジケーター部分 -->
      <ol class="carousel-indicators">
        <li data-target="#carouselExample" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExample" data-slide-to="1"></li>
        <li data-target="#carouselExample" data-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="#carouselExample2" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">前に戻る</span>
      </a>
      <!-- 次に送るアイコン -->
      <a class="carousel-control-next" href="#carouselExample2" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">次に送る</span>
      </a>
    </div>
  </div>
  <script>
    $(function () {
      $('#carouselExample2').carousel();
    });
  </script>

  <div class="container">
    <div id="carousel" class="carousel slide">
      <div class="carousel-inner">
        <!-- First slide -->
        <div class="carousel-item active">
          <img class="d-block w-100" alt="First slide"
            src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=First slide">
        </div>
        <!-- Second slide -->
        <div class="carousel-item">
          <img class="d-block w-100" alt="Second slide"
            src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Second slide">
        </div>
        <!-- Third slide -->
        <div class="carousel-item">
          <img class="d-block w-100" alt="Third slide"
            src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Third slide">
        </div>
      </div>
      <!-- 前に戻るアイコン -->
      <a class="carousel-control-prev" href="#carouselIndicators" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">前に戻る</span>
      </a>
      <!-- 次に送るアイコン -->
      <a class="carousel-control-next" href="#carouselIndicators" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">次に送る</span>
      </a>
    </div>
    <!-- コントロールボタン -->
    <div class="control-buttons my-3">
      <input type="button" class="btn btn-primary start-slide" value="開始">
      <input type="button" class="btn btn-primary pause-slide" value="停止">
      <input type="button" class="btn btn-primary prev-slide" value="前へ">
      <input type="button" class="btn btn-primary next-slide" value="次へ">
      <input type="button" class="btn btn-primary slide-first" value="第1スライドに">
      <input type="button" class="btn btn-primary slide-second" value="第2スライドに">
      <input type="button" class="btn btn-primary slide-third" value="第3スライドに">
    </div>
  </div>
  <script>
    $(function () {
      // 循環開始
      $(".start-slide").on('click', function () {
        $("#carousel").carousel('cycle');
      });
      // 一時停止
      $(".pause-slide").on('click', function () {
        $("#carousel").carousel('pause');
      });
      // 前へ循環
      $(".prev-slide").on('click', function () {
        $("#carousel").carousel('prev');
      });
      // 次へ循環
      $(".next-slide").on('click', function () {
        $("#carousel").carousel('next');
      });
      // 特定のフレームに循環
      $(".slide-first").on('click', function () {
        $("#carousel").carousel(0);
      });
      $(".slide-second").on('click', function () {
        $("#carousel").carousel(1);
      });
      $(".slide-third").on('click', function () {
        $("#carousel").carousel(2);
      });
    });
  </script>

  <div class="container">
    <!-- intervalの設定 -->
    <div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="3000">
      <ol class="carousel-indicators">
        <li data-target="#carouselExample" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExample" data-slide-to="1"></li>
        <li data-target="#carouselExample" data-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-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">前に戻る</span>
      </a>
      <!-- 次に送るアイコン -->
      <a class="carousel-control-next" href="#carouselExample" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">次に送る</span>
      </a>
    </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>

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

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

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

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

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

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

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

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