modal-dialog-centered
bootstrap5.css
bootstrap5.css
.modal-dialog-centered {
display: flex;
align-items: center;
min-height: calc(100% - 1rem);
}
bootstrap5.css
@media (min-width: 576px) {
.modal-dialog {
max-width: 500px;
margin: 1.75rem auto;
}
.modal-dialog-scrollable {
height: calc(100% - 3.5rem);
}
.modal-dialog-centered {
min-height: calc(100% - 3.5rem);
}
.modal-sm {
max-width: 300px;
}
}
html bootstrap5 Sample
js 垂直方向中央に配置するモーダル:modal-dialog-centered
<div class="container">
<button type="button" class="btn btn-secondary" data-bs-toggle="modal"
data-bs-target="#exampleModal3">モーダルボタン</button>
<!-- モーダルウィンドウ外枠 id="exampleModal3"-->
<div class="modal fade" id="exampleModal3" 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-bs-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-bs-dismiss="modal">閉じる</button>
</div>
</div>
</div>
</div>
</div>
<style>
.row>.col,
.row>[class^=col-] {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
background-color: f8f8ff;
border: 1px solid #aaa;
}
</style>
js グリッドレイアウトを使用したモーダル:rowとcol
<div class="container">
<button type="button" class="btn btn-secondary" data-bs-toggle="modal"
data-bs-target="#exampleModal4">モーダルボタン</button>
<!-- モーダルウィンドウ外枠 id="exampleModal4"-->
<div class="modal fade" id="exampleModal4" 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-bs-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<!-- container-fluidは画面いっぱい -->
<div class="container-fluid">
<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-4 ms-auto">col-md-4、ms-auto</div>
</div>
<div class="row">
<div class="col-md-3 ms-auto">col-md-3、ms-auto</div>
<div class="col-md-2 ms-auto">col-md-2、ms-auto</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
</div>
</div>
</div>
</div>
</div>