Bootstrapでcontainerやcolの余白を消す方法を解説！

Bootstrapには、グリッドシステムというレイアウト指定を便利にするシステムがあります。

以下のように、.containerと.rowと.colを組み合わせることでページの分割を簡単に実現することができます。

なお、この記事ではこれらのクラスが適用された要素自体をcontainer（コンテナ）、row（ロー）、col（カラム）と表記しています。

しかし、上記のコードでは、.rowの要素内に入っていないh1要素には左右に謎の隙間が生まれてしまっています。さらに、画面幅によっては.row内の要素についても左右に余白が生じます。（プレビュー下のボタンで画面幅を広げると余白が確認できます。）

実はこの２つの余白はそれぞれ違う原因で発生しています。そこで、原因別にこれらの余白を無くす方法をいくつか紹介します。

余白を消す方法について、余白のうまれた原因別に解説していきます。

画面幅によってcontainerの外に生じる空白は、containerの特性によるものです。

この特性とは、画面幅によって段階的にcontainerの幅が変化する、というものです。

具体的には、.containerが適用された要素は、画面幅576px未満では常にwidth: 100%であり、576px以上ではwidth: 540px、768px以上ではwidth: 720px、992px以上ではwidth: 960px、1200px以上ではwidth: 1140pxが適用されます。

Bootstrapには.container以外にもcontainerを作成するクラスが用意されています。

.container-fluidを代わりに適用することで、段階的にではなく常にwidth: 100%としてcontainerの幅が表示されます。

よって、.container-fluidを適用することで左右の空白をいずれの画面幅においてもなくすことができます。

上記のプレビューでは、.container-fluidを適用しており、画面幅を変更しても赤色の要素の左右にスペースがなくなっていることが確認できます。

しかし、黄色の要素の左右にはまだスペースが空いています。次はこちらについてみていきましょう。

グリッドシステムはcontainerとrow、colから成っています。

実はBootstrapでは、.containerには左右のpadding: 15pxが指定されており、.rowには左右のmargin: -15pxが指定されています。したがって、これらが組み合わさると打ち消し合ってうまく画面いっぱいに広がって表示されるのです。

ですから、containerだけ作成してrowを作成せずにh1要素などを記述した場合、意図せず15pxのpaddingが適用されてしまいます。

よって、先程の例ではh1要素をrowで囲むことで左右の余白を消すことができます。

ただし、グリッドレイアウトとはcontainer、row、colから成るものですから、rowだけでなくcolでも囲むべきです。

しかし、そうするとまた余白がうまれてしまいます。（プレビューの表示をスクロールすると確認できます。）

.colには、左右にpadding: 15pxが指定されているため、先程のようにcol内に配置した要素には左右に余白が発生していまいます。

すなわち、colの余白を無くすには、padding: 0を指定すればよく、Bootstrapでは.px-0を適用することで左右のpaddingを0pxにできます。

プレビューをスクロールして確認すると、col内のh1要素も左右の余白が無くなっていることがわかります。

今回はBootstrapで用意されているクラスを使用して余白を無くす方法を解説しましたが、BootstrapのCSSファイルをダウンロードして自分でpaddingなどを変更したり、独自に作成したCSSファイルを読み込んだりして余白を調整することも可能です。

ただし、その場合は同じクラスを適用しているすべての箇所に変更が適用されることに注意しましょう。