Bootstrap4のコンポーネントやClassをすべて網羅したチートシート集です。

Bootstrap4はグリッドレイアウトや数多くのコンポーネントなどすごく便利なんですが、量が多いので覚えるのがすごく大変。そんなときに便利なのが1枚のPDFにすべてをまとめてあるチートシートです。

Bootstrap4を使い慣れるまではチートシートを手元に置いておくことでコードを忘れたときも安心。

Bootstrap4のチートシート集

hackerthemes

hackerthemes このサイトを見る

Bootstrap4のClass一覧が表示されており、Classをクリックするとコードとプレビューを見ることができます。formcardなどのコンポーネントの他に、ユーティリティー系Classもチェックできるのが便利です。

Bootstrap4 CheatSheet

Bootstrap4 CheatSheet このサイトを見る

Bootstrap4のコンポーネントClass一覧とプレビューを見ることができます。こちらはユーティリティー系なしですね。

Bootstrap4 CheatSheet for Beginners(pdf)

Bootstrap4 CheatSheet このサイトを見る

こちらはPDFでClassの一覧を見ることができます。コードのプレビューなどはありませんが、PDFなのでダウンロードして使えるのがいい感じ。

Bootstrap4 CheatSheet(pdf)

Bootstrap4 CheatSheet このサイトを見る

こちらもPDF。上のとは違ってコンポーネントのコードが一覧表示されています。ちょっとコード忘れた時なんかに便利かも。

まとめ

Bootstrap4の公式ドキュメントだといちいちリンク踏んでページ切り替えするのが面倒なんですが、このようなチートシートがあると一覧表示してあるので目的のものをすぐに探すことができます。

Bootstrap4以外にも、WordpressやPHPのようなプログラム言語ごとにチートシートがあるので新しく覚えたい言語があったらチートシートを探してみるといいかも。