実例（Examples）

Bootstrapのコンパイル済みCSSとJavaScriptをjsDelivr CDN経由で即座に取り込むことができる。

StackBlitzで編集

npmを使用してBootstrapのSassとAutoprefixer、Stylelint、バンドルされているJavaScriptをインポートしてコンパイルする。

StackBlitzで編集

BootstrapのSassをAutoprefixerとStylelintでインポートしてコンパイルし、ESM shimでソースのJavaScriptをコンパイルする。

StackBlitzで編集

BootstrapのSassをStylelintでインポートしてコンパイルし、Bootstrapのカラーモードが使えるようにする。

StackBlitzで編集

BootstrapのSassをStylelint、PurgeCSSでBootstrap IconsのWebフォントと一緒にインポートしてコンパイルする。

StackBlitzで編集

BootstrapのソースのSassとJavaScriptをParcelでインポートしてバンドルする。

StackBlitzで編集

BootstrapのソースであるSassとJavaScriptをReact、Next.js、React Bootstrapでインポートしてバンドルする。

StackBlitzで編集

ヘッダ

これらのヘッダコンポーネントを使用して、ブランド、ナビゲーション、検索などを表示。

ヒーロー

明確な行動を促すフレーズを特徴とするヒーローで、ホームページに舞台を設定。

注目事項

マーケティングコンテンツの機能、利点、その他の詳細を説明。

サイドバー

オフキャンバスや複数列のレイアウトに最適な一般的なナビゲーションパターン。

フッタ

大小を問わず、すばらしいフッタですべてのページを強力に仕上げる。

ドロップダウン

フィルタ、アイコン、カスタムスタイルなどを使用して、ドロップダウンを強化。

リストグループ

任意のコンテンツのユーティリティとカスタムスタイルを使用してリストグループを拡張。

モーダル

機能ツアーからダイアログまで、あらゆる目的に役立つようにモーダルを変換。

バッジ

カスタムの内部HTMLと新しい外観でバッジを機能させる。

パンくずリスト

カスタムアイコンを統合し、ステッパーコンポーネントを作成できる。

ボタン

ユーティリティであらゆるユースケースに対応したカスタムボタンが作成できる。

ジャンボトロン

従来のBootstrapコンポーネントを最新バージョンで作成。

アルバム

写真ギャラリー、ポートフォリオなどのためのシンプルな1ページテンプレート。

価格設定案内

カードで構築され、カスタムのヘッダーとフッターを備えた価格設定ページの実例。

精算フォーム

フォームコンポーネントとその入力検証機能を示すカスタム精算フォーム。

製品紹介

豊富なグリッドと画像を使用した、製品に焦点を絞ったマーケティング・ページ。

カバー

シンプルで美しいホームページを構築するための1ページのテンプレート。

カルーセル

ナビゲーションバーとカルーセルをカスタマイズし、新しいコンポーネントを追加。

ブログ

ヘッダー、ナビゲーション、おすすめコンテンツ付き雑誌のようなブログテンプレート。

ダッシュボード

固定サイドバーとナビゲーションバーを備えた基本的な管理ダッシュボードシェル。

サインインページ

シンプルなログインフォーム用のカスタムフォームレイアウトとデザイン。

等幅ナビゲーションバー

等幅のリンクを持つカスタムのナビゲーションバーを作成。

フッタを画面下部に固定

コンテンツがビューポートより短い場合は、フッタをビューポートの下部に貼り付ける。

固定ナビゲーションバーでフッタを画面下部に固定

上部に固定されたナビゲーションバーを使用して、ビューポートの下部にフッターを取り付ける。

コンテンツ付きジャンボトロン

ナビゲーションバーといくつかの基本的なグリッドの列をジャンボトロンの周りに構築。

狭小ジャンボトロン

デフォルトのコンテナとジャンボトロンを絞り込んで、さらにカスタムページを作成。

スターターテンプレート

基本は何もない：コンテナと一緒にCSSとJavaScriptをコンパイル。

グリッドの実例

6つの階層、入れ子などのグリッドレイアウトの複数の実例。

チートシート

Bootstrapコンポーネントの素材集。

RTL版チートシート

右書き（アラビア語）でのBootstrapコンポーネントの素材集。

幅一杯にナビゲーションバー

メニューがビューポートの両端に広がったナビゲーションバーの実例。

メニューのみがサイトの本体と同じ幅のナビゲーションバー

サイトの本体の両端と揃ったナビゲーションバーの実例。

サイトの本体と同じ幅のナビゲーションバー

メニュー部分のみがサイトの本体の両端と揃ったナビゲーションバーの実例。

レスポンシブ・コンテナを使用したナビゲーションバー

ビューポートサイズに応じて両端の位置が変化するナビゲーションバーの実例。

レスポンシブ・ナビゲーションバー

ナビゲーションバーの様々な配置のバリエーション。

オフキャンバス付きナビゲーションバー

オフキャンバスコンポーネントを使用したナビゲーションバーの実例。

静的トップナビゲーションバー

いくつかの追加コンテンツを持つ単一の静的なナビゲーションバーの実例。

トップ固定のナビゲーションバー

いくつかの追加コンテンツを持つ固定されたトップナビゲーションバーの実例。

ボトム固定のナビゲーションバー

いくつかの追加コンテンツを持つ固定されたボトムナビゲーションバーの実例。

最上部に達すると固定されるナビゲーションバー

スクロールして最上部に達すると最上部に固定されるナビゲーションバーの実例。

最下部に達するまで固定されるナビゲーションバー

スクロールして最下部に達するまで最下部に固定されるナビゲーションバーの実例。

オフキャンバスナビゲーションバー

拡張可能なナビゲーションバーをスライドオフキャンバスメニューに変更（オフキャンバスコンポーネントは不使用）。

Masonry（カードカラム）

BootstrapグリッドとMasonryレイアウトの威力を組み合わせ。