I am trying to use flexbox to customize a bootstrap 4 navbar. I want the nav-items to fill the full height of the navbar div while keeping their contents centered vertically and the spacing between the 3 horizontally links consistent (using justify-content-around). I have not been successful using the code below. Is it possible?
Any help would be appreciated.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<nav id="mainNav" class="navbar navbar-expand-md navbar-light bg-primary pt-0 pb-0">
<a class="navbar-brand d-none d-sm-block mr-auto my-2" href="#"><img class="img-fluid" src="https://via.placeholder.com/139x60"></a>
<div class="collapse navbar-collapse mx-5" id="navbarCollapse">
<!-- Stetch these virticall -->
<ul class="navbar-nav nav-fill w-100 align-items-start">
<li class="nav-item active">
<a class="nav-link bg-danger" href="#">Shop Now<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Why Buy From Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
<form class="form-inline mt-2 mt-md-0 mr-auto mr-sm-0 mx-md-auto">
<div class="input-group">
<input class="form-control form-control-sm" type="text" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<span class="input-group-text"><i class="far fa-search"></i></span>
</div>
</div>
</form>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
2
Answers
It appears that in order to get bootstrap navbar links to fill the full height of the navbar and center the text vertically, I needed to add a targetable container inside the .nav-link class to apply align-self: center to.
I used a span tag and decided to use CSS rather than inline classes to keep the code cleaner and in my case limited it to only the #mainNav ID.
Wondering if there is an even cleaner way to do this without the extra span tag.
Try add class “my-0 p-0” in your brand image
Then, add approximately “height: 3.7em” to your links and add the “py-3” class to them