div.modal-contentと階層を作り、その中に次の3つスタイルを設定する形です。div.modal-headerdiv.modal-bodydiv.modal-footermodal-headerにはモーダル画面のタイトル、modal-bodyには内容、そしてmodal-footerには各ボタンを配置します。モーダル画面のdivにidを付けます。aria-labelledby="exampleModalLabel">このidを呼び出し元のボタンなどから「data-target="#exampleModal"」のように指定することでモーダル画面を開くことができます。</button>モーダル(Modal)画面の詳細設定スポンサーリンクモーダル(Modal)画面を背景クリックで閉じなくするモーダル(Modal)の外側をクリックしてもモーダルは閉じられないようにするにはdiv.modalの場所に「data-backdrop="static"」タグを追加します。aria-labelledby="exampleModalLabel">モーダル(Modal)画面にスクロールバーを表示するモーダル(Modal)画面にスクロールバーを表示するにはdiv.modal-dialogの場所に「modal-dialog-scrollable」クラスを追加します。role="document">モーダル(Modal)画面を中央に表示するモーダル(Modal)画面を中央に表示するにはdiv.modal-dialogの場所に「modal-dialog-centered」クラスを追加します。role="document">モーダル(Modal)画面のサイズを変更するモーダル(Modal)画面のサイズを変更するにはdiv.modal-dialogの場所に次のいずれかのクラスを追加します。コメントをキャンセルメールアドレスが公開されることはありません。Bootstrap4の機能であるProgress(プログレスバー)の使い方を紹介します。プログレスバー(Progress)の画面イメージは次の通りです。ツールチップを使うには「popper.min.js」が必要です。Bootstrap4でツールチップ(Tooltips)を使うには「popper.min.js」が必要です。「popper.min.js」をダウンロードして使用するかのどちらかです。指定することで作成することができます。指定することで作成することができます。レスポンシブとはPC、タブレット、スマートフォンなど、異なる画面サイズの幅を基準にWebサイト表示を柔軟に調整し、見やすく最適な表示にすることです。HTMLの「img」タグにBootstrapで用意してある.img-fluidを指定することでレスポンシブな画像を作成することができます。レスポンシブ設定をしていない場合、次のようにスマートフォンでは表示でデザインが崩れてしまいます。