dropdown-menu-end
bootstrap5.css
bootstrap5.css
.dropdown-menu-end {
/* bootstrap4:dropdown-menu-right */
--bs-position: end;
right: 0 /* rtl:ignore */;
left: auto /* rtl:ignore */;
}
html bootstrap5 Sample
js メニューの位置をボタンと右寄せにする:dropdown-menu-end
<div class="btn-group">
<!-- btn-info要素で色の変更 -->
<button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
メニューの位置を右寄せにしたドロップダウン
</button>
<div class="dropdown-menu dropdown-menu-end">
<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>