Dropdown menu is out of the screen - html

Question

I want to add a dropdown menu to my navbar but the menu is always out of the page.
Here is my code :
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<nav class="navbar navbar-dark bg-dark">
<a class="navbar-brand" href="#">PEL</a>
<div class="btn-group">
<button
type="button"
class="btn btn-secondary dropdown-toggle mr-3"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">${pseudo}</button>
<div class="dropdown-menu dropdown-menu-right">
<button
class="dropdown-item dropdown-menu-right"
type="button">Action</button>
<button
class="dropdown-item dropdown-menu-right"
type="button">Another action</button>
<button
class="dropdown-item dropdown-menu-right"
type="button">Something else here</button>
</div>
</div>
</nav>
Dropdown works good but it is always out of the right side of my screen...
A little space is created by my dropdown menu on the right side of the page.

Answer 1

According to the v4.0 doc :
https://getbootstrap.com/docs/4.0/components/dropdowns/#menu-alignment
Heads up! Dropdowns are positioned thanks to Popper.js (except when they are contained in a navbar).
Two options :
Upgrade your bootstrap version. It's working fine with v4.6
Use custom classes instead of bootstrap navbar
[EDIT 1] Here is a working example with bootstrap v4.6. Also i have removed the mr-3 class for better rendering.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<nav class="navbar navbar-dark bg-dark">
<a class="navbar-brand" href="#">PEL</a>
<div class="btn-group">
<button
type="button"
class="btn btn-secondary dropdown-toggle"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">${pseudo}</button>
<div class="dropdown-menu dropdown-menu-right">
<button
class="dropdown-item"
type="button">Action</button>
<button
class="dropdown-item"
type="button">Another action</button>
<button
class="dropdown-item"
type="button">Something else here</button>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>