Bootstrap グリッドジェネレータ Bootstrap
Bootstrap 5の12カラムグリッドシステムを視覚設計。レスポンシブブレークポイント (xs/sm/md/lg/xl/xxl) 対応コード生成。
プレビュー
HTMLコード
使い方
- 「行を追加」または「プリセット」で初期配置を設定
- 各カラムの幅 (1〜12) を編集、ブレークポイントを変更
- 「+」で同じ行にカラムを追加、「×」でカラム削除
- プレビューで実際の表示を確認 (ブラウザ幅を変えてレスポンシブも検証可能)
Bootstrap 5 ブレークポイント
col-*(xs): 〜575px (全デバイス)col-sm-*: 576px以上 (大型スマホ)col-md-*: 768px以上 (タブレット)col-lg-*: 992px以上 (ノートPC)col-xl-*: 1200px以上 (デスクトップ)col-xxl-*: 1400px以上 (大型ディスプレイ)