View on GitHub

Gutters (ガター)

ガターはカラム間のパディングで、Bootstrap グリッドシステムのコンテンツを配置・整列させるために使います。

On this page

基本的な仕組み

ガターとは、水平方向の padding によって作られるカラムの隙間のことです。 各カラムに padding-right と padding-left を設定し、各行の最初と最後にネガティブ margin でオフセットしてコンテンツを揃えます。
ガターの初期値は 1.5rem (20px) です。 カスタムしてグリッドをパディングとマージンのスケールに合わせることができます。
ガターはレスポンシブに調整することができます。 ブレークポイント固有のガタークラスを使用して、水平、垂直、およびすべてのガターを設定できます。

水平方向のガター

.gx-* クラスを使うと、水平方向のガターを設定することができます。大きめのガターが使われている場合は、パディングユーティリティを使います。不要なオーバーフローを避けるため .container や .container-fluid を親要素に設定することもできます。たとえば、次の例では .px-4 でパディングを増やしています。

Custom column padding

<div class="container px-4">
  <div class="row gx-5">
    <div class="col">
     <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

.row を .overflow-hidden ラップする方法もあります。

Custom column padding

<div class="container overflow-hidden">
  <div class="row gx-5">
    <div class="col">
     <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

垂直方向のガター

.gy-* クラスを使うと、垂直方向のガターを設定することができます。水平方向と同様に、垂直方向のガターはページの最後にある .row の下にオーバーフローを引き起こす可能性があります。このような場合は、.row を .overflow-hidden でラップします。

Custom column padding

<div class="container overflow-hidden">
  <div class="row gy-5">
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

水平・垂直方向のガター

.g-* クラスは水平・垂直ガターを設定することができます。次の例では、より小さなガターを使用しているので、.overflow-hidden でラップする必要はありません。

Custom column padding

<div class="container">
  <div class="row g-2">
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

Row columns ガター

ガターは、row columns にも追加することができます。以下の例では、レスポンシブなカラムとレスポンシブなガタークラスを使用しています。

Row column

<div class="container">
  <div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
  </div>
</div>

ガターなし

定義済みのガタークラスは .g-0 で取り除くことができます。これにより、.row のネガティブ margin が削除され、すべての子カラムで水平方向の パディング が削除されます。

端から端までのレイアウトが必要ですか？ 親要素の .container や .container-fluid を削除してください。

実際には以下のようになります。他のすべての定義済みグリッドクラス（カラム幅、レスポンシブレベル、順序変更などを含む）でも、この方法を継続して使用できることに注意してください。

.col-sm-6 .col-md-8

.col-6 .col-md-4

<div class="row g-0">
  <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

ガターの変更

ガタークラスは $spacers を継承した $gutters Sass マップから生成されます。

$grid-gutter-width: 1.5rem;
$gutters: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);