Bootstrap グリッドプレイグラウンド
レスポンシブな Bootstrap 5.3 のグリッドレイアウトをビジュアルに構築し、正確なクラス —— row、col、オフセット、並び順、ガター、配置 —— をコピーできます。
プレビュー
列をクリックして編集します
生成された HTML
—
すべての処理はブラウザー内で実行されます —— 何もアップロードされません。
設定したクラスは、このブレークポイント以上で適用されます。ブレークポイントを切り替えてレスポンシブなレイアウトを構築しましょう。
行 .row
列
0
選択中の列
Bootstrap グリッドプレイグラウンドについて
Bootstrap Gridプレイグラウンドは、実際のBootstrap 5.3グリッドシステムを使ってレスポンシブな行・列レイアウトを構築します。行に最大12列まで追加し、任意の列をクリックして幅・オフセット・順序を設定し、行のガター(余白)と配置を調整すると、プレビューと生成されたマークアップの両方が変更のたびにライブで更新されます。
Bootstrapのグリッドはモバイルファーストであるため、ブレークポイントスイッチャーが中心的な役割を果たします。ベースでcol-6、mdでcol-md-4に列を設定すれば、モバイルではスタックし、デスクトップでは3列並びになる定番パターンをコードを書かずに構築できます。オフセット、順序、ガターのクラスはすべて同じレスポンシブなインフィックスを取ります。
出力は、行div内にあなたが設定したとおりのクラスを持つ列の子要素、というクリーンでコピー&ペーストしやすいHTMLです。スニペット全体、または行のクラスだけをコピーできます。すべてブラウザ内でローカルに動作します。
Bootstrap グリッドプレイグラウンドの使い方
- 行に列を最大12個まで追加し、1つをクリックして選択します。
- 現在のブレークポイントに対して、選択した列のスパン・オフセット・順序を設定します。
- ブレークポイント(smからxxl)を切り替え、より大きな画面でレイアウトがどう再配置されるかを定義します。
- 行のガターと配置ユーティリティを調整します。
- ライブプレビューを確認し、生成されたHTMLまたは行のクラスをコピーします。
よくある質問
Bootstrapのグリッドは幅12ユニットです。合計スパンが12を超える列は、同じ行内で新しい行に折り返されます。これは想定された動作であり、複数行のグリッドを意図的に作るためによく使われます。
列にフル幅のベース(col-12)と、ブレークポイントでのより狭いスパン(col-md-4など)を指定します。768px未満では列はスタックし、md以上では3列に並びます。ブレークポイントスイッチャーはまさにこれを構築します。
オフセットは、指定したグリッドユニット数だけ列を右に押し出します(offset-md-2は2ユニット分スキップします)。単一の列を中央揃えにしたり、空の埋め合わせ列を挿入せずに意図的な余白を作ったりするために使います。
はい。行のガターユーティリティが、列間の水平・垂直方向の間隔を制御します。プレイグラウンドは行の配置オプションと並べてこれらを提供しており、他のグリッドクラス同様にレスポンシブなインフィックスも受け付けます。
はい、完全に無料です。ビルダーはブラウザ内でのみ動作するため、作成したレイアウトがサーバー側にアップロードされたり保存されたりすることはありません。
人気の検索
Bootstrap グリッドプレイグラウンド
Bootstrap グリッドジェネレーター
Bootstrap 5 グリッドシステム
row col クラスジェネレーター
Bootstrap 列オフセットツール
レスポンシブ Bootstrap グリッドビルダー
Bootstrap ガター配置ジェネレーター
お困りですか？
このツールで問題が見つかりましたか？チームにお知らせください。