As someone who doesn't work on front-end tasks frequently, I have encountered an issue while creating a navbar using Bootstrap. The problem arises when trying to add multiple buttons as it causes the spacing between them to appear strange.
Does anyone have a solution to this problem?
<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #333;">
<a class="navbar-brand" href="/">
<img src="/static/img/AdiAvi.png" width="30" height="30" class="d-inline-block align-top" alt="">
AdiAvi
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact">Contact</a>
</li>
<button type="button" id="loginButton" class="ml-2 btn btn-danger navbar-btn">
Login
</button>
<button type="button" id="registerTrigger" class="ml-2 btn btn-primary navbar-btn">
Register
</button>
</ul>
</div>
</nav>
The specific buttons causing issues are the login and register buttons.
I am utilizing BootStrap 5
An image illustrating the output of the code can be seen here:
My attempt at solving the irregular button spacing involved using position relative, but unfortunately, it did not yield the desired results. Results