実例(Examples)
フレームワークのパーツを使用することから、カスタムコンポーネントやレイアウトに至るまで、例を挙げてプロジェクトをすばやく手に入れることが可能。
実例のダウンロード ソースコードのダウンロード※公式サイトの実例なのでダウンロードファイルはいずれも英語だが、以下の各ファイルで日本語のソースコードがコピー可能(グリッドの実例、チートシートを除く)。
※現在はダークモードには非対応(今後対応予定)
※"v5.2.0"での変更はv5.2.0-beta1での変更も含みます。
※"v5.3.0"での変更はv5.3.0-alpha版、v5.3.0-beta版での変更も含みます。
スニペット 8 v5.0.0新設
カスタムCSSなどを使用して既存のコンポーネントやユーティリティに基づいて構築するサイトやアプリを構築するための一般的なパターン。

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

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

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

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

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

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

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

機能ツアーからダイアログまで、あらゆる目的に役立つようにモーダルを変換。
カスタムコンポーネント 12
人々を助けるための真新しいコンポーネントとテンプレートは、Bootstrapをすぐに使い始め、フレームワークに追加するための最善の使用例を提示。

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

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

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

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

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

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

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

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

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

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

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

上部に固定されたナビゲーションバーを使用して、ビューポートの下部にフッターを取り付ける。
フレームワーク 4
Bootstrapによって提供される組み込みコンポーネントの使用の実装に焦点を当てた例。

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

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

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

アラビア語でのBootstrapコンポーネントの素材集。
ジャンボトロン 5
ジャンボトロンコンポーネントのコンテナオプションのデモ(v4のジャンボトロンのクラスがv5.0.0で削除されたため、他のユーティリティクラスを使用した設定例に変更)。

注目のコンテンツや情報に特別な注意を喚起するためのシンプルなジャンボトロンの実例。

親要素の全ての横方向の空白一杯に広がるように設定変更されたジャンボトロンの実例。

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

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

ジャンボトロンの背景を画像にした場合の実例。
ナビゲーションバー 12
ナビゲーションバーコンポーネントのすべてのレスポンシブとコンテナオプションのデモ。

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

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

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

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

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

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

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

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

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

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

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

拡張可能なナビゲーションバーをスライドオフキャンバスメニューに変更(オフキャンバスコンポーネントは不使用)。
統合 1
外部ライブラリとの統合。

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