フォームなしメニュー
メニュー部分中央寄せ
メニュー部分右寄せ
ドロップダウン付きメニュー
ナビバー基本
<nav class="navbar navbar-expand-md navbar-light bg-light">
<!--ブランド名・ロゴを入れる-->
<a class="navbar-brand" href="#">ブランド</a>
<!--レスポンシブの際のハンバーガーメニューのボタン-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!--ナビバー内のメニュー-->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">メニュー1 <span class="sr-only">(カレント)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">メニュー2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">メニュー3</a>
</li>
</ul>
<!--ナビバー内の検索フォーム-->
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-secondary my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
フォームなしメニュー
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">ブランド名</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">メニュー1 <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">メニュー2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">メニュー3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">メニュー4</a>
</li>
</ul>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">ブランド名</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">メニュー <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">メニュー</a>
<a class="nav-item nav-link" href="#">メニュー</a>
<a class="nav-item nav-link" href="#">メニュー</a>
</div>
</div>
</nav>メニュー部分中央寄せ
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">ブランド名</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav1" aria-controls="navbarNav1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center" id="navbarNav1">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">メニュー1 <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">メニュー2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">メニュー3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">メニュー4</a>
</li>
</ul>
</div>
</nav>
メニュー部分右寄せ
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">ブランド名</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav2" aria-controls="navbarNav2" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav2">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">メニュー1 <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">メニュー2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">メニュー3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">メニュー4</a>
</li>
</ul>
</div>
</nav>
ドロップダウン付きメニュー
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<!--ブランド名・ロゴを入れる-->
<a class="navbar-brand" href="#">ブランド</a>
<!--レスポンシブの際のハンバーガーメニューのボタン-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!--ナビバー内のメニュー-->
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">メニュー <span class="sr-only">(カレント)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">メニュー</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">メニュー</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
ドロップダウン
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">ドロップダウンメニュー1</a>
<a class="dropdown-item" href="#">ドロップダウンメニュー2</a>
<a class="dropdown-item" href="#">ドロップダウンメニュー3</a>
</div>
</li>
</ul>
</div>
</nav>