• ブレークポイント(Breakpoints)
• コンテナ(Containers)
• グリッド(Grid)
  • カラム指定(Columns)
  • カラム数指定(Row columns)
  • レスポンシブ(Responsive)
  • 自動幅グリッド(Auto width)
• カラム(Columns)
  • 縦方向のアライン(Align items)
  • 縦方向のアライン(Align self)
  • 横方向のアライン(Justify)
  • カラムの順序(Columns order)
  • カラムのオフセット(Offset)
  • カラムのマージン(Margin)
• ガター(Gutters)
  • 水平方向のガター(Horizontal gutter)
  • 垂直方向のガター(Vertical gutter)
  • 水平・垂直方向のガター(Horizontal & vertical gutter)

sm, md, lg, xl, xxl のブレークポイントは、画面の横幅に応じて表示を変化させたい場合に利用します。Bootstrap 5では新たなブレークポイント xxl が追加されました。

*-{breakpoints}-* は、画面サイズが breakpoint で指定した幅よりも大きな場合のみ適用されます。例えば、.d-none は非表示、.d-block はブロック表示を行うクラスですが、下記のように指定することで、デフォルトでは表示されないけれど、画面が sm サイズ以上(576px以上)の場合にブロックとして表示されるようになります。つまり、小さなスマホ画面では表示しないけど、大きなPCディスプレイでは表示するといった操作が可能となります。

<div class="d-none d-sm-block">
...
</div>

コンテナは画面全体の横幅を制御したい場合などに利用します。.container, .container-{breakpoint} は画面の横幅に応じて段階的に、.container-fluid は画面の横幅いっぱいまでスムーズに広がるコンテナを生成します。段階的なコンテナは開発者にとって評価が楽という利点があります。スムーズなコンテナは画面の横幅を最大限に利用できる利点があります。

<div class="container my-box">...></div>
<div class="container-sd my-box">...</div>
<div class="container-md my-box">...</div>
<div class="container-lg my-box">...</div>
<div class="container-xl my-box">...</div>
<div class="container-xxl my-box">...</div>
<div class="container-fluid my-box">...</div>

.row と .col を組み合わせることで、横幅を、幅の等しい複数のグリッド領域に分割することができます。

<div class="container-fluid">
  <div class="row">
    <div class="col my-box">...</div>
    <div class="col my-box">...</div>
    <div class="col my-box">...</div>
  </div>
</div>

横幅は12のカラムに分割されています。.col-{n} の {n} には1～12のカラム数を指定することができます。カラム数の合計が12を超える場合は改行して表示されます。

<div class="container-fluid">
  <div class="row">
    <div class="col-1 my-box">1</div>
    <div class="col-2 my-box">2</div>
    <div class="col-3 my-box">3</div>
  </div>
  <div class="row">
    <div class="col-2 my-box">2</div>
    <div class="col-4 my-box">4</div>
    <div class="col-6 my-box">6</div>
  </div>
</div>

.row-cols-{n} , .row-cols-{breakpoint}-{n} は、{n} 個のカラムを構成します。n には 1～6 の値を指定することができます。

<div class="container-fluid">
  <div class="row row-cols-3">
    <div class="col my-box">...</div>
    <div class="col my-box">...</div>
    <div class="col my-box">...</div>
    <div class="col my-box">...</div>
    <div class="col my-box">...</div>
  </div>
</div>

.col-{breakpoint} や .col-{breakpoint}-{n} を用いて、画面の横幅に応じて表示方法を変更することができます。下記の例では、画面サイズが sm(576px) 以上の場合は3分割となり、それより小さい場合は縦方向に並びます。

<div class="container-fluid">
  <div class="row">
    <div class="col-sm my-box">...</div>
    <div class="col-sm my-box">...</div>
    <div class="col-sm my-box">...</div>
  </div>
</div>

.row-cols-auto や .col-auto や .col-{breakpoint}-auto はコンテンツの内容によってグリッド横幅を自動的に計算します。

<div class="container-fluid">
  <div class="row row-cols-auto">
    <div class="col my-box">Short msg.</div>
    <div class="col my-box">Normal length of message.</div>
    <div class="col my-box">This is very long long long long long message.</div>
  </div>
  <div class="row">
    <div class="col-auto my-box">Short msg.</div>
    <div class="col-auto my-box">Normal length of message.</div>
    <div class="col-auto my-box">This is very long long long long long message.</div>
  </div>
</div>

.align-items-* は、子カラムの縦方向のアラインを指定します。

<div class="container-fluid">
  <div class="row align-items-start my-box-light">
    <div class="col my-box">start</div>
  </div>
  <div class="row align-items-center my-box-light">
    <div class="col my-box">center</div>
  </div>
  <div class="row align-items-end my-box-light">
    <div class="col my-box"endA</div>
  </div>
</div>

.align-self-* は、カラム自身の縦方向のアラインを指定します。

<div class="container-fluid">
  <div class="row my-box-light">
    <div class="col align-self-start">start</div>
    <div class="col align-self-center">center</div>
    <div class="col align-self-end">end</div>
  </div>
</div>

.justify-content-* は、子カラムの横方向のアライン指定します。start は左寄せ、center は中央寄せ、end は右寄せ、around はカラム間と両端に適度なスペースを入れる、between はカラム間に適度なスペースを入れます。

<div class="container-fluid">
  <div class="row justify-content-start">...</div>
  <div class="row justify-content-center">...</div>
  <div class="row justify-content-end">...</div>
  <div class="row justify-content-around">...</div>
  <div class="row justify-content-between">...</div>
</div>

.order-{n}, .order-{breakpoint}-{n} を用いてカラムの表示順序を変更することができます。{n} には 1～5 の数値を指定します。.order-first は最初、.order-last は最後を指定します。

<div class="container-fluid">
  <div class="row">
    <div class="col order-3 my-box">A</div>
    <div class="col order-2 my-box">B</div>
    <div class="col order-1 my-box">C</div>
  </div>
</div>

.offset-{n}, .offset-{breakpoint}-{n} は、n カラム分のオフセット(隙間)をあけます。{n} には 0～11 の数値を指定します。

<div class="container-fluid">
  <div class="row">
    <div class="col-1 my-box">1</div>
       :
    <div class="col-1 my-box">12</div>
  </div>
  <div class="row">
    <div class="col-1 my-box">1</div>
    <div class="col-1 offset-3 my-box">2</div>
  </div>
</div>

.ms-{n}, .me-{n} を用いて開始方向(左側)、終了方向(右側)にマージンを設けることができます。.ms-auto, .me-auto を用いると最大のマージンをとることが可能で、コンテンツを左端と右端に表示する場合に便利です。

<div class="container-fluid my-box-light">
  <div class="row my-box-light">
    <div class="col-3 my-box">Left</div>
    <div class="col-5 ms-auto my-box">Right</div>
  </div>
</div>

.gx-{n} はカラムの子要素間の隙間を制御します。カラム間の隙間ではなく、カラムの子要素間の隙間を調整していることに注意してください。下記の個々のボックスはカラムではなく、カラムの子要素です。{n} には 0～5 を指定します。.gx-0 は隙間を 0 にします。デフォルトでは .gx-4 の隙間が開けられます。

<div class="container-fluid">
  <div class="row gx-0">
    <div class="col"><div class="my-box">.gx-0</div></div>
    <div class="col"><div class="my-box">.gx-0</div></div>
    <div class="col"><div class="my-box">.gx-0</div></div>
  </div>
  <div class="row gx-3">
    <div class="col"><div class="my-box">.gx-3</div></div>
    <div class="col"><div class="my-box">.gx-3</div></div>
    <div class="col"><div class="my-box">.gx-3</div></div>
  </div>
  <div class="row gx-4">
    <div class="col"><div class="my-box">.gx-4</div></div>
    <div class="col"><div class="my-box">.gx-4</div></div>
    <div class="col"><div class="my-box">.gx-4</div></div>
  </div>
  <div class="row gx-5">
    <div class="col"><div class="my-box">.gx-5</div></div>
    <div class="col"><div class="my-box">.gx-5</div></div>
    <div class="col"><div class="my-box">.gx-5</div></div>
  </div>
</div>

.gy-{n} は垂直方向のガター（カラムコンテンツ間の隙間）を設定します。{n} には 0～5 の数値を指定します。

<div class="container-fluid">
  <div class="row gy-2">
    <div class="col-12"><div class="my-box">.gy-2</div></div>
    <div class="col-12"><div class="my-box">.gy-2</div></div>
  </div>
</div>

.g-{n} は水平方向および垂直方向のガター（カラムコンテンツ間の隙間）を設定します。{n} には 0～5 の数値を指定します。

<div class="container-fluid">
  <div class="row gy-2">
    <div class="col-12"><div class="my-box">.gy-2</div></div>
    <div class="col-12"><div class="my-box">.gy-2</div></div>
  </div>
</div>