I am trying to modify my Bootstrap navbar by adding a Login button, but I encountered an issue. When I use col-x classes inside the navbar to separate elements equally, they only cover 50% of the width and no more. However, using col-x classes outside the navbar works as expected.
Here is the code snippet:
<!-- Navigation -->
<nav class="navbar navbar-dark navbar-expand-md bg-blue sticky-top">
<div class="container-fluid">
<div class="row">
<div class="col-4">
<a class="navbar-brand" href="#">
<h1 class="display-3">Petitions</h1>
</a>
</div>
<div class="col-4">
<button type="button" class="btn btn-primary btn-lg">
Get Started
</button>
</div>
<div class="col-4">
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarResponsive"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Company Mission</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
</ul>
</div></div>
</div>
</div>
</nav>
<!-- Navigation -->