基本的なグリッドレイアウトは、Bootstrapグリッドシステム内での構築に精通している。
以下の実例では、いくつかのテーマを追加するためにBootstrapのデフォルトでは利用できない .the-grid-col クラスを列に追加設定している。
Bootstrapグリッドシステムには5つの階層があり、サポートするデバイスの各範囲に1つずつある。各階層は最小ビューポートサイズから始まり、書き換えない限り自動的にそれより大きいデバイスにも適用される。
デスクトップとワイド・デスクトップに拡大したときには、3つの等幅列を表示する。携帯端末、タブレットなどでは、列が自動的に積み重なる。
デスクトップとワイド・デスクトップに拡大したときには、さまざまな幅の3つの列を表示する。グリッド列は、1つの水平ブロックに対して12個まで追加する必要がある。それ以上の場合、列はビューポートに関係なく積み重ねを開始する。
デスクトップとワイド・デスクトップに拡大したときには、2列で表示。
全幅の要素にはグリッドクラスは不要。
文章ごとに入れ子にするのは簡単。既存の列内に列の行を配置するだけ。これにより、デスクトップとワイド・デスクトップに拡大したときには、2つの列が表示され、大きい列の中に別の2つの等幅列が表示。
モバイルデバイスのサイズ、タブレット以下では、これらの列とその入れ子にした列は積み重なる。
Bootstrap v4グリッドシステムには、xs（極小:このクラスは不使用）、sm（小）、md（中）、lg（大）、xl（特大）の5つの階層がある。これらのクラスのほぼすべての組み合わせを使用して、よりダイナミックで柔軟なレイアウトが作成可能。
クラスの各層はスケールアップされる。つまり、md, lg, xlで同じ幅を設定する場合は、mdを指定するだけでよい。
Bootstrap v4.4で追加されたクラスでは、特定のブレークポイントまで100%幅のコンテナが使用可能。