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

Bootstrap4のレシピ集です。

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

Navbar

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

Navbarの右寄せ

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

フレックスコンテナ

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

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

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