知識の枝

"All is well"

Bootstrap モーダル内でグリッドを使う

約184日前 2021年5月26日19:01
デジタル
HTML CSS

改訂履歴


2021/5/26 投稿

1. 背景


Djangoを使った開発中に覚えたことを備忘録として残します。

今回はBootstrapのモーダル内でグリッドレイアウトを使用する方法を解説します。


2. ゴール


モーダル内で単なる縦表示からカラムを使ったレイアウトに変更する。


3. はじめに


モーダルというのは画面にポップアップ表示されるこんなやつです。




Bootstrapの「Modal」というページを見れば誰でも簡単に実装できます。

Modal - Bootstrap4.2

このモーダル画面ってすごくシンプルですよね。

できればグリッドレイアウトのように自由にコンテンツを設置したいところです。
その方法を解説します。


4. モーダル内でグリッド


まずモーダルの基本形です。
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
クリックしてみて
</button>

<!-- Modal -->
<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">&times;</span>
</button>
</div>
<div class="modal-body">
これがモーダルです
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
これをベースに手を加えます。

ちょうど真ん中あたりの「modal-body」の中をこんなふうに変えましょう。
<div class="modal-body">
<div class="container col-12">
<!--通常のcontainerの中身のように書きましょう-->
<div class="row">
<div class="col-4">
これが
</div>
<div class="col-4">
モーダル
</div>
<div class="col-4">
です
</div>
</div>
</div>
</div>








この方法はここを参考にさせて頂きました。
Bootstrap Modal Dialog. Can the grid system be used within a modal context?

ありがとうございました。
Thanks.


5. さいごに


このモーダルのグリッドレイアウトを使うと自由な配置できるので、頭の中のイメージを実現しやすくなると思います!

下記は使用例です。



活用してみてください。お疲れ様でした!