title: How can I center a dropdown-menu using Bootstrap 5?
body: <p>There are built-in classes for Bootstrap that I can add to my dropdown menu,  'dropdown-menu-end' and 'dropdown-menu-start', which are extremely close to what I want to achieve. However, I want the dropdown menu to be centered.</p>
  <p>Ref: <a href="https://getbootstrap.com/docs/5.0/components/dropdowns/#menu-alignment" rel="nofollow noreferrer">https://getbootstrap.com/docs/5.0/components/dropdowns/#menu-alignment</a></p>
  <p>The drop-down menu button is centered on the webpage using:</p>
  <pre><code>.dropdown .btn.dropdown-toggle {
      border-radius: 50px;
      position: fixed;
      z-index: 99;
      bottom: 45px;
      right: 50%;
      transform: translate(50%); 
  }
  </code></pre>
  <p>So the menu automatically opens upwards because it has no room to open downwards. I would have just added my own CSS that moves the dropdown menu into position, but there's some inline CSS that gets applied to it during runtime from Bootstrap that prevents me from overwriting it.</p>
  <p>I've made an example of the issue on jsfiddle: <a href="https://jsfiddle.net/meeky333/ve98ydkj/5/" rel="nofollow noreferrer">https://jsfiddle.net/meeky333/ve98ydkj/5/</a></p>
  <p>Does anyone know what I can do?</p>
  <p>P.S. Here is an example of how I want it to look:
  <a href="https://i.stack.imgur.com/mcaUX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mcaUX.png" alt="enter image description here" /></a></p>