I want to align my dropdown menu (responsively) on the right side of the page while keeping the "Create Event" button on the left. The docs call for adding .dropdown-menu-end to the ul class--which didn't work--so I've added it to every class for my dropdown and still no luck.
What's going on with my code?
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
</head>
<body>
<div>
<a class="btn btn-primary mb-2" href="/events/new">Create event</a>
<span class="dropdown dropdown-menu-end">
<a class="btn btn-outline-primary dropdown-toggle bi bi-filter mb-2 dropdown-menu-end" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
Events
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuLink">
<li><a class="dropdown-item" href="/events">All Events</a></li>
<li><a class="dropdown-item" href="/events/?future=true">Upcoming Events</a></li>
<li><a class="dropdown-item" href="/events/?past=true">Past Events</a></li>
</ul>
</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>You can use Bootstrap's flex utilities to justify the buttons with space between them. I've added d-flex and justify-content-between to the parent element.
The reason your approach didn't work is because that documentation refers to dropdown alignment with respect to the button, not the button with respect to the page (or parent element).
I've also converted your surrounding span to a div. Spans are usually associated with inline content. If nothing else it makes your markup more intuitive to the reader. It also makes the code auto-format a bit more cleanly. Compare your snippet to mine--I used the Tidy button on both.
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
</head>
<body>
<div class="d-flex justify-content-between">
<a class="btn btn-primary mb-2" href="/events/new">Create event</a>
<div class="dropdown dropdown-menu-end">
<a class="btn btn-outline-primary dropdown-toggle bi bi-filter mb-2 dropdown-menu-end" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
Events
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuLink">
<li><a class="dropdown-item" href="/events">All Events</a></li>
<li><a class="dropdown-item" href="/events/?future=true">Upcoming Events</a></li>
<li><a class="dropdown-item" href="/events/?past=true">Past Events</a></li>
</ul>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>