ブログ

Bootstrap 4 のmodalの表示幅を画面いっぱいにするには
2020.03.17

Bootstrap 4 のmodalでは、4種類のサイズを指定できるようになっています。

ただ、これらのサイズは、ブレークポイントに応じて「max-width」を指定しているだけなので、画面幅いっぱいには広がってくれません。

例えば、何か複数の画像などのアイテムを選択させるケースなど、情報量を多くしておきたい時には、画面幅いっぱいに広がってくれると助かります。

あらかじめ、次のようなCSSクラスを定義しておきます。

.modal-dialog-fluid {
  max-width: inherit;
  width: 98%;
  margin-left: 15px;
}

少し解説します。

「max-width: inherit;」にてブレークポイントに応じた「max-width」の指定を解除しています。
次に、常に画面幅いっぱいに広がるように「width」を98%にしています。100%にしたいところですが、Bootstrapによって、 .modal-daialogの親要素の<div>に対して動的にstyle属性で「padding-right: 21px;」が指定されている影響で、右側のマージン調整が簡潔にできません。そのため、98%にして少し隙間を空けています。
最後に、「margin-left: 15px;」で左側にも隙間を空けています。左側は、このように問題なく調整できます。

モーダルの右側の隙間が若干あいてしまいますが、画面幅いっぱいに広がって要件を満たせそうです。

次に、.modal-dialogクラスを記述している部分に、上記のクラスを追記するだけです。

HTMLの比較（赤文字が追加）

修正前

<div class="modal-dialog" role="document">

修正後

<div class="modal-dialog　modal-dialog-fluid" role="document">

次のボタンから、実際に表示できますのでお試しください。

以上、お役に立てれば幸いです。