Bootstrap4のグリッドだけ使う方法

どうも、スエヒロです。

 

Bootstrap便利ですよね。

クラス名をちょちょっと追加するだけで、簡単にレイアウトが組めて、レスポンシブにも対応させてくれます。

 

しかし実際のWeb制作では、Bootstrapの部品は使わずに、グリッドだけを使いたいという場合の方が多いと思います。

 

グリッドだけを使おうとしたときに、不要なCSSもあるせいで、デザインがずれてしまうことがありますよね。

 

そこで今回は、BootstrapでグリッドのCSSだけを使う方法を解説します。

Bootstrapのダウンロード

CDNでBootstrapを使っている方もいるでしょうが、グリッドCSSだけを使うためには、フォルダをダウンロードする必要があります。

 

Compiled CSS and JSのダウンロードボタンを押すとダウンロードされます。

グリッドCSSの抜き出し

ダウンロードしたCSSフォルダの中にはたくさんファイルがありますが、bootstrap-grid.cssだけ残して、あとは全部消します。

 

JSフォルダも不要です。

 

bootstrap-grid-min.cssだけでもOKですが、コードの見やすさから、前者を残すことをオススメします。

 

実際にグリッドCSSを使う

あとは普通のcssファイルと同様に、<link>でファイルを読み込んで使いましょう。

 

ファイル読み込みの際には、自作cssの前に設置するように注意してください。