I want bootstrap 4.1 navbar links to be vertically aligned to bottom of the navbar. The links are currently aligned centered vertically. I have given height of 150px to navbar and given padding of 100px to the navbar-nav and I am able to get them at the bottom but its look distorts when the navbar collapses. Here is the fiddle :
https://jsfiddle.net/ctk60df7/1/
Please help me
You'll want to use a media query so that the 150px height is only applied before the Navbar collapses into the "mobile" vertical mode. For navbar-expand-lg, the Navbar collapses at 992px so that media query would be:
@media (min-width:992px) {
.navbar {
height: 150px;
}
}
Then use align-items-end to align the nav links at the bottom.
<nav class="navbar navbar-expand-lg navbar-dark bg-dark align-items-end">
<div class="container">
</div>
</nav>