ドロップダウン：dropdown-menu
button要素を使用したドロップダウン：dropdownとdata-toggle
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
ドロップダウン
</button>
<!-- ドロップダウンメニュー -->
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">メニュー01</a>
<a class="dropdown-item" href="#">メニュー02</a>
<a class="dropdown-item" href="#">メニュー03</a>
</div>
</div>
ボタングループに設定するドロップダウン：btn-group
<!-- ボタングループにすると、ドロップダウンメニューのデザインが変わる -->
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
ドロップダウン
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">メニュー01</a>
<a class="dropdown-item" href="#">メニュー02</a>
<a class="dropdown-item" href="#">メニュー03</a>
</div>
</div>
メニュー項目にbuttonを使用する：dropdown-menu
<div class="dropdown">
<!-- 切り替えボタン -->
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
ドロップダウン
</button>
<!-- ドロップダウンメニュー -->
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<button class="dropdown-item" type="button">メニュー01</button>
<button class="dropdown-item" type="button">メニュー02</button>
<button class="dropdown-item" type="button">メニュー03</button>
</div>
</div>
メニューの位置をボタンと右寄せにする：dropdown-menu-right
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
メニューの位置を右寄せにしたドロップダウン
</button>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">メニュー01</button>
<button class="dropdown-item" type="button">メニュー02</button>
<button class="dropdown-item" type="button">メニュー03</button>
</div>
</div>
切り替えボタンにaタグ要素を使用したドロップダウン：dropdown-toggle
<div class="dropdown">
<!-- 切り替えボタン -->
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
ドロップダウン
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">メニュー01</a>
<a class="dropdown-item" href="#">メニュー02</a>
<a class="dropdown-item" href="#">メニュー03</a>
</div>
</div>
メニュー項目にアクティブの状態を設定する：active
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">ドロップダウン</button>
<!-- ドロップダウンメニュー -->
<div class="dropdown-menu">
<a class="dropdown-item" href="#">メニュー01</a>
<a class="dropdown-item disabled" href="#">メニュー02（無効）</a>
<a class="dropdown-item active" href="#">メニュー03（アクティブ）</a>
</div>
</div>
左側表示のドロップメニュー：dropleft
<div class="container py-5 d-flex justify-content-center">
<!-- 左方向へのドロップ -->
<div class="btn-group dropleft">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">左方向へのドロップ</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">メニュー01</a>
<a class="dropdown-item" href="#">メニュー02</a>
<a class="dropdown-item" href="#">メニュー03</a>
</div>
</div>
</div>
右側表示のドロップメニュー：dropright
<div class="container py-5 d-flex justify-content-center">
<!-- 右方向へのドロップ -->
<div class="btn-group dropright">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">右方向へのドロップ</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">メニュー01</a>
<a class="dropdown-item" href="#">メニュー02</a>
<a class="dropdown-item" href="#">メニュー03</a>
</div>
</div>
</div>
上側表示のドロップメニュー：dropup
<div class="container py-5 d-flex justify-content-center">
<!-- 上方向へのドロップ -->
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">上方向へのドロップ</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">メニュー01</a>
<a class="dropdown-item" href="#">メニュー02</a>
<a class="dropdown-item" href="#">メニュー03</a>
</div>
</div>
</div>
オーバーフロー（枠から飛び出す）を制約する設定：data-boundary
<div class="bg-info text-center" style="width:250px;height:250px;overflow:scroll;">
<br><br><br>
<div class="dropdown">
<!-- ata-boundary="scrollParent"-->
<button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown"
data-boundary="scrollParent">ドロップダウンボタン</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">スクロールウィンドウ幅で制約されるドロップダウンメニュー</a>
<a href="#" class="dropdown-item">スクロールウィンドウ幅で制約されるドロップダウンメニュー</a>
<a href="#" class="dropdown-item">スクロールウィンドウ幅で制約されるドロップダウンメニュー</a>
</div>
</div>
</div>
スペースがない場合に、反対側にドロップダウンを表示させる：data-flip
<div class="box" style="overflow: auto">
<br><br><br><br><br>
<div class="dropdown">
<!-- data-flip="true"-->
<button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-flip="true">ドロップダウンボタン</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">メニュー1</a>
<a class="dropdown-item" href="#">メニュー2</a>
<a class="dropdown-item" href="#">メニュー3</a>
</div>
</div>
</div>
ドロップダウンのオフセット値を設定する：data-offset
<div class="dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown"
data-offset="10,20" aria-haspopup="true" aria-expanded="false">ドロップダウンボタン</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">メニュー1</a>
<a class="dropdown-item" href="#">メニュー2</a>
<a class="dropdown-item" href="#">メニュー3</a>
</div>
</div>
ドロップダウンメニューにdivでテキストを配置する：text-muted
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">ドロップダウン</button>
<!-- ドロップダウンメニュー -->
<div class="dropdown-menu p-3 text-muted" style="max-width: 300px;">
<p>メニュー内のテキストその1</p>
<p class="text-danger">メニュー内のテキストその2</p>
</div>
</div>
トグルボタンでdivコンテンツに様々な要素を追加する：dropdown-toggleとdropdown-menu
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">ドロップダウン</button>
<!-- divで作成するコンテンツありのメニュー -->
<div class="dropdown-menu">
<h6 class="dropdown-header">ドロップダウンメニューのタイトル</h6>
<form class="px-4 py-3">
<div class="form-group">
<label for="email">メールアドレス</label>
<input type="email" class="form-control" id="email" placeholder="email@example.com">
</div>
<div class="form-group">
<label for="password">パスワード</label>
<input type="password" class="form-control" id="password" placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="check">
<label class="form-check-label" for="check"> ログイン情報を記憶 </label>
</div>
<button type="submit" class="btn btn-secondary">ログイン</button>
</form>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#1">初めての方</a>
<a class="dropdown-item" href="#2">パスワードをお忘れの方</a>
</div>
</div>
ドロップダウンにリンクなしの項目を追加する：dropdown-item-text
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">ドロップダウン</button>
<div class="dropdown-menu">
<!-- メニューの説明分など入れたい場合に利用 -->
<span class="dropdown-item-text">非リンクテキスト</span>
<a class="dropdown-item" href="#1">メニュー1</a>
<a class="dropdown-item" href="#2">メニュー2</a>
<a class="dropdown-item" href="#3">メニュー3</a>
</div>
</div>
ドロップダウンで用意されているJSメソッド：dropdpown('toggle')
<!-- ドロップダウン -->
<div class="dropdown">
<!-- 切り替えボタン -->
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownExample" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
ドロップダウン
</button>
<!-- 最初から選択肢を出しておく -->
<div class="dropdown-menu" aria-labelledby="dropdownExample">
<a class="dropdown-item" href="#">メニュー01</a>
<a class="dropdown-item" href="#">メニュー02</a>
<a class="dropdown-item" href="#">メニュー03</a>
</div>
</div>
<script>
$(function () {
$('#dropdownExample').dropdown('toggle');
});
</script>
ドロップダウンのオフセット値を設定する：offset
<!-- data-offset="x,y" はメニューの表示位置を右方向に x、下方向に y ずれた位置に表示します。 -->
<div class="dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">ドロップダウンボタン</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">メニュー1</a>
<a class="dropdown-item" href="#">メニュー2</a>
<a class="dropdown-item" href="#">メニュー3</a>
</div>
</div>
<script>
$(function () {
$('#dropdownMenuButton').dropdown({
offset: '10, 20'
})
});
</script>
スプリットボタン（分割ボタン）のドロップダウン：dropdown-toggle-split
<div class="btn-group">
<button type="button" class="btn btn-secondary">スプリットボタン</button>
<!-- ボタンとメニューを分割して表示する -->
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
</button>
<!-- ドロップダウンメニュー -->
<div class="dropdown-menu">
<a class="dropdown-item" href="#">メニュー01</a>
<a class="dropdown-item" href="#">メニュー02</a>
<a class="dropdown-item" href="#">メニュー03</a>
</div>
</div>