【Bootstrap】ヘッダーロゴは左端、メニューは右端　とする方法

Bootstrapでヘッダーを作りたい。

ロゴが左端、メニューリストが右端、というよくあるパターンを実装したい。

でも、Bootstrapのナビゲーションバーのテンプレートを見ていると、

下記のように、ロゴ（Navbar）のすぐ隣にメニューがある、こんなテンプレばかりですね。

ロゴ　メニュー1　メニュー2　メニュー3

やりたいのは、ロゴが左端、メニューリストが右端。

ロゴ（左端）　　　　　　　　（右端）　メニュー1　メニュー2　メニュー3

これを解決します。

解決コード

Bootstrapの便利なところは、HTMLに、目的のクラスを記述すれば、CSSの効果が反映されるところですね。

ですので、メニュー群を囲っている<div>に justify-content-end　のクラスを追加してあげましょう。

他にも方法がありますので、詳しく知りたい方はこちらもどうぞ。
navbarの一部を右寄せにする方法

flexで実装する場合はこちらをどうぞ。