実例（Examples）
フレームワークのパーツを使用することから、カスタムコンポーネントやレイアウトに至るまで、例を挙げてプロジェクトをすばやく手に入れることが可能。
ソースコードのダウンロード 実例のダウンロード※公式サイトの実例なのでダウンロードファイルはいずれも英語だが、以下の各ファイルで日本語のソースコードがコピー可能。
カスタムコンポーネント 12
人々を助けるための真新しいコンポーネントとテンプレートは、Bootstrapをすぐに使い始め、フレームワークに追加するための最善の使用例を提示。
アルバムv4.4.0設定変更
写真ギャラリー、ポートフォリオなどのためのシンプルな1ページテンプレート。
価格設定案内v4.1.3設定変更
カードで構築され、カスタムのヘッダーとフッターを備えた価格設定ページの実例。
精算フォームv4.1.3設定変更
フォームコンポーネントとその入力検証機能を示すカスタム精算フォーム。
製品紹介v4.1.3設定変更
豊富なグリッドと画像を使用した、製品に焦点を絞ったマーケティング・ページ。
カバー
シンプルで美しいホームページを構築するための1ページのテンプレート。
カルーセル
ナビゲーションバーとカルーセルをカスタマイズし、新しいコンポーネントを追加。
ブログv4.4.0設定変更
ヘッダー、ナビゲーション、おすすめコンテンツ付き雑誌のようなブログテンプレート。
ダッシュボードv4.5.0設定変更
固定サイドバーとナビゲーションバーを備えた基本的な管理ダッシュボードシェル。
サインインページ
シンプルなログインフォーム用のカスタムフォームレイアウトとデザイン。
等幅ナビゲーションバーv4.4.0設定変更
等幅のリンクを持つカスタムのナビゲーションバーを作成。
フッタを画面下部に固定v4.4.0設定変更
コンテンツがビューポートより短い場合は、フッタをビューポートの下部に貼り付ける。
固定ナビゲーションバーでフッタを画面下部に固定v4.4.0設定変更
上部に固定されたナビゲーションバーを使用して、ビューポートの下部にフッターを取り付ける。
フレームワーク 2
Bootstrapによって提供される組み込みコンポーネントの使用の実装に焦点を当てた例。
スターターテンプレート
基本は何もない：コンテナと一緒にCSSとJavaScriptをコンパイル。
グリッドの実例 v4.4.0一部追加
5つの階層、入れ子などのグリッドレイアウトの複数の実例。
ジャンボトロン 5
ジャンボトロンコンポーネントのコンテナオプションのデモ。
基本のジャンボトロン
注目のコンテンツや情報に特別な注意を喚起するためのシンプルなジャンボトロンの実例。
幅一杯にジャンボトロン
親要素の全ての横方向の空白一杯に広がるように設定変更されたジャンボトロンの実例。
コンテンツ付きジャンボトロン
ナビゲーションバーといくつかの基本的なグリッドの列をジャンボトロンの周りに構築。
狭小ジャンボトロンv4.4.0設定変更
デフォルトのコンテナとジャンボトロンを絞り込んで、さらにカスタムページを作成。
背景が画像のジャンボトロン
ジャンボトロンの背景を画像にした場合の実例。
ナビゲーションバー 8
ナビゲーションバーコンポーネントのすべてのレスポンシブとコンテナオプションのデモ。
幅一杯にナビゲーションバー
メニューがビューポートの両端に広がったナビゲーションバーの実例。
サイトの本体と同じ幅のナビゲーションバー
サイトの本体の両端と揃ったナビゲーションバーの実例。
メニューのみがサイトの本体と同じ幅のナビゲーションバー
メニュー部分のみがサイトの本体の両端と揃ったナビゲーションバーの実例。
レスポンシブ・ナビゲーションバー v4.4.0一部追加
ナビゲーションバーの様々な配置のバリエーション。
静的トップナビゲーションバー
いくつかの追加コンテンツを持つ単一の静的なナビゲーションバーの実例。
トップ固定のナビゲーションバー
いくつかの追加コンテンツを持つ固定されたトップナビゲーションバーの実例。
ボトム固定のナビゲーションバー
いくつかの追加コンテンツを持つ固定されたボトムナビゲーションバーの実例。
最上部に達すると固定されるナビゲーションバー
スクロールして最上部に達すると固定されるナビゲーションバーの実例。
実験 2
将来のフレンドリーな機能やテクニックに焦点を当てた例。
フローティングラベルv4.5.1設定変更
インプット入力にフローティングラベルが付いた美しくシンプルなフォーム。
オフキャンバスv4.3.0設定変更
拡張可能なナビゲーションバーをスライドオフキャンバスメニューに変更。
Sassオプション 4
カスタム変数ファイルにある一部のSass変数の設定をカスタマイズした例。
box-shadow スタイルを有効にする
Bootstrap4の $enable-shadows を有効にした場合に変更されるCSSをピックアップ。
グラデーションを有効にする
Bootstrap4の $enable-gradients を有効にした場合に変更されるCSSをピックアップ。
レスポンシブ・フォントサイズを有効にするv4.3.0新設
Bootstrap4の $enable-responsive-font-sizes を有効にした場合に変更される見出しのスタイル。
border-radius スタイルを無効にする
Bootstrap4の $enable-rounded を無効にした場合に変更されるCSSをピックアップ。
Javascript 1
JSサンプル集
Bootstrap4のJavaScriptプラグインのオプションなどのサンプル。