カラム両脇の空白を無くす(no-gutters)

Bootstrapの各カラムは左右に15pxの余白がデフォルト、この余白を0にしたい場合はBootstrap4では新クラス「.no-gutters」を使います。「row」にクラス追加するのがポイント。

HTMLサンプル

内容は下記ですがCSS記載の必要はありません。

 

カラム両脇の空白を少しにする

ゼロは駄目だけどページ全体の空白を少し詰めたい、そんな時は「no-gutters」を改造しても実現できます。

Bootstrap CSS よりも後に上記CSSを追加して「no-gutters」を上書き。

HTMLサンプル

 

カラム両脇の空白を細かく設定したい

そんな場合は下記記事を参考にしてください。

Bootstrap4、Bootstrap3でガター幅(余白/カラムの隙間)を調整する

スポンサーリンク