Bootstrapグリッドシステム内でビルドすることに慣れるための基本的なグリッドレイアウト。
これらの例では、.themed-grid-colクラスが列に追加されて、いくつかのテーマが追加されています。これは、Bootstrapでは既定で使用できるクラスではありません。
Bootstrapグリッドシステムには、サポートしている各デバイスの範囲に対応する5つの層があります。各層は最小ビューポートサイズで開始し、上書きされない限り、自動的により大きなデバイスに適用されます。
デスクトップで開始して大型デスクトップにスケーリングされる3つの等幅列を取得します。モバイルデバイス、タブレット、それ以下では、列は自動的に積み重ねられます。
さまざまな幅のデスクトップで開始して大型デスクトップにスケーリングされる3つの列を取得します。グリッド列は、単一の水平ブロックに対し合計12になる必要があることを覚えておいてください。それ以上になると、ビューポートに関係なく、列は積み重ねられ始めます。
デスクトップで開始して大型デスクトップにスケーリングされる2つの列を取得します。
全幅要素にはグリッドクラスは必要ありません。
ドキュメントに従って、ネストは簡単です。既存の列内に列の行を置くだけです。これにより、デスクトップで開始して大型デスクトップにスケーリングされる2つの列が作成され、もう2つの列（幅は等しい）がより大きな列内に作成されます。
モバイルデバイスサイズ、タブレットサイズ、それ以下では、これらの列とそのネストされた列は積み重ねられます。
Bootstrap v4グリッドシステムには、5つの層のクラスがあります: xs（エクストラスモール、このクラスのインフィクスは使用されません）、sm（スモール）、md（ミディアム）、lg（ラージ）、xl（エクストララージ）。これらのクラスをほぼ任意に組み合わせて、より動的で柔軟なレイアウトを作成できます。
各層のクラスはスケールアップします。つまり、md、lg、xlに同じ幅を設定する場合は、mdを指定するだけでよいということです。
Bootstrap v4.4で追加された追加のクラスにより、特定のブレークポイントまで100%幅のコンテナを使用できます。