Bootstrap4レシピ集~つど更新予定~

Bootstrap4のレシピ集です。

Bootstrap4でウェブサイトを実装する上で、これは使えると思ったものについてご紹介していきます。

Navbar

Bootstrap4のNavbarのレイアウトについてです。

Navbarの右寄せ

justfy-content-end」にて、Navbarを右寄せにできます。

デフォルト
justify-content-endを付与後

フレックスコンテナ

Flexユーティリティを活用すると、アイテムを比較的簡単に移動させることができます。

Flexの適用なし

Flexユーティリティを使用するには、動かしたいアイテムの親要素にd-flexを付与するだけです。先ほどのボタンを真ん中寄せにするためにjustify-content-centerを付与した状態で確認してみましょう。

d-flex justify-content-center

flex-row-reverseをjustify-content-centerの代わりに付与してみましょう。

d-flex flex-row-reverse

コメントを残す