Is there a bug with Bootstrap 5.0 dropdown-menu-end alignment?-CodePudding

I am unable to get dropdown-menu-end from Bootstrap 5.0 to work on in Angular even though I replicated the exact same code from https://www.w3schools.com/bootstrap5/bootstrap_dropdowns.php.

The html appearance using my code from vsc is as follows: site appearance

Hence, I would like to check whether is there a known bug with dropdown-menu-end? Or is there something wrong with my code? Thanks all.

P.S. I did install Bootstrap and imported "node_modules/bootstrap/dist/css/bootstrap.min.css" into angular.json under styles.

  <h2>Dropdowns</h2>
  <p>Add the .dropdown-menu-end class to .dropdown-menu to right-align the dropdown menu.</p>

  <div >
    <button type="button"  data-bs-toggle="dropdown">
      Wide dropdown button to demonstrate this example
    </button>
    <ul >
      <li><a  href="#">Link 1</a></li>
      <li><a  href="#">Link 2</a></li>
      <li><a  href="#">Link 3</a></li>
    </ul>
  </div>
</div>

CodePudding user response：

Wrong Apply Class Name

<div > to <ul >

 <div >
    <button type="button"  data-bs-toggle="dropdown">
      Wide dropdown button to demonstrate this example
    </button>
    <ul > /***Add Here***/
      <li><a  href="#">Link 1</a></li>
      <li><a  href="#">Link 2</a></li>
      <li><a  href="#">Link 3</a></li>
    </ul>
  </div>
</div>

CodePudding user response：

With reference to Tadhani's comments, I amended the code but the dropdown list appears to be the same: site appearance.