Bootstrapでgridの間隔を変更する方法

新規にBootstrapベースでサイトを作ることも少なくなってきたとは思いますが、既存のWordPressテーマをカスタマイズする際に必要となることは多くあると思います。

Bootstrapで最も利用頻度が高いのがgridシステムですが、最大の欠点は要素同士の間隔が固定されてしまっていること。gridは使いたいけど間隔を狭くしたい、広くしたいというときには以下のcssを追加しておくことで簡単に対応できます。

CSS

// 要素間を40pxにしたい場合
.gutter-40.row {
  margin-right: -20px;
  margin-left: -20px;
}
.gutter-40 > [class^="col-"], .gutter-40 > [class^=" col-"] {
  padding-right: 20px;
  padding-left: 20px;
}

HTML

<div class="row gutter-40">
    <div class="col-md-6"></div>
    <div class="col-md-6"></div>
</div>

.gutter-40 のようなclassを必要なサイズ分準備しておき、それをrowクラスと一緒に指定してあげるだけで、好きな場所に好きな間隔のgridを設置することができます。

CSSの指定をちゃんと見ていただければわかりますが、colの指定はclassの最初に記載するようにしてください。