Currently, I am experimenting with ExpressJS and EJS rendering. I have noticed that the Bootstrap float-right class is not working properly on the navbar. I even attempted using d-flex, but the issue persists. I am unsure if I am missing something in my code. Here is the snippet:
_header.ejs
<header>
<nav class="navbar navbar-expand-md navbar-dark bg-success">
<a class="navbar-brand" href="/urls">TinyApp</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="/urls">URLs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/urls/new">New URL</a>
</li>
</ul>
<li class="flaot-right"> <!-- Should be "float-right" instead of "flaot-right" -->
<button class="btn btn-outline-danger me-2">
Logout
</button>
</li>
</div>
</div>
</nav>
</header>
This is the button I tried to float to the right
<li class="flaot-right"> <!-- Should be "float-right" instead of "flaot-right" -->
<button class="btn btn-outline-danger me-2">
Logout
</button>
</li>
No changes are reflected.