Bootstrapチートシート

Bootstrapのクラスと使用例をまとめて確認できる無料チートシート

このページでは、Bootstrap 5.3系でよく使う導入コード、レイアウト、グリッド、ユーティリティ、フォーム、コンポーネント、JavaScript連携の例を一覧で確認できます。クラス名や目的で検索し、必要なコード例をコピーして使えます。

検索や絞り込みはブラウザ内で実行されます。入力した検索語はサーバーへ送信されません。Bootstrap本体は読み込まず、チートシートとしてコード例を表示するためのページです。

使い方

1. 検索欄にクラス名、コンポーネント名、目的を入力します。
2. カテゴリで導入、グリッド、フォーム、コンポーネントなどに絞り込めます。
3. 使いたいコード例の「コピー」を押すと、サンプルコードをコピーできます。
4. 本番で使うときは、BootstrapのCSSと必要に応じてJavaScript bundleを読み込んでください。

掲載範囲

Bootstrapの公式ドキュメント構成に合わせて、導入、Layout、Content、Forms、Components、Helpers、Utilities、JavaScriptの代表例をまとめています。細かいオプションは公式ドキュメントもあわせて確認してください。

Bootstrap設計の豆知識

Bootstrapは「コンポーネント」と「ユーティリティ」を組み合わせると扱いやすくなります。カードやナビバーのような大きな部品はコンポーネントで作り、余白、色、表示切替、配置の微調整はユーティリティで足す、という分担にするとCSSが散らかりにくくなります。

また、Bootstrapはモバイルファーストです。.col-md-6 のようなクラスは「md以上で6カラム」という意味なので、小さい画面ではまず縦積みになり、必要な幅から横並びになります。崩れを直すときは、どのブレークポイントから変化させたいかを先に決めると整理しやすくなります。

利用時の注意点

• このチートシートはBootstrap 5.3系を前提にしています。Bootstrap 4以前とは一部クラス名やJavaScript属性が異なります。
• モーダル、ドロップダウン、トーストなど一部コンポーネントはBootstrapのJavaScript bundleが必要です。
• 本番環境では使用バージョンを固定し、CDNのintegrity値もバージョンに合わせて更新してください。

あわせて使えるツール

BootstrapのサンプルHTMLを確認したり、コード例を文字列化・整理したりする場合は、HTMLプレビューやテキスト系ツールと組み合わせると作業しやすくなります。