Bootstrap4でモーダルウィンドウのタイトルと閉じるボタンを中央寄せする

この記事は更新から2年以上経過しています。情報が古い可能性がありますのでご注意下さい。

対応バージョン：Bootstrap 4.1

モーダルウィンドウの標準仕様ではヘッダーのタイトルが左寄せ、フッターのボタンが右寄せになっています。flexで配置されていますので、単純にtext-alignで指定しても思った通りになりません。

まずはタイトルですが、justify-contentがspace-betweenになっているので、class=”modal-header”の要素直下に<p></p>を追加し、要素を3つにすることで2番目のタイトルを中央寄せにします。

その上で、下記CSSを追記して右端の閉じるボタンを調整します。

.modal-header .close{
  padding: 0;
  margin: 0;
}

次はボタンです。こちらは単純に中央配置指定するだけなので、下記CSSを追記します。

.modal-footer{
  justify-content : center;
}