I need to create a dropdown menu similar to the one shown in this image:
https://i.sstatic.net/SXDgy.png https://i.sstatic.net/wVbnd.png
I attempted to use code from the following URL: https://getbootstrap.com/docs/4.0/components/dropdowns/, but unfortunately, it did not work as expected even though I have installed Bootstrap.
"bootstrap": "^5.3.1",
Here is the HTML code I used:
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="34565b5b40474046554474011a041a04">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bcdfd3ced9fc8e9285928e">[email protected]</a>/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1d7f7272696e696f7c6d5d28332d332c">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<div class="btn-group">
<button
type="button"
class="btn btn-danger dropdown-toggle"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Action
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
However, the result I achieved looks like this:
https://i.sstatic.net/9Zarn.png
Can someone guide me on how to write my TypeScript code for this? Much appreciated!