Just when I thought I had the answer for every possible Navbar scenario in Bootstrap 4, up pops another StackOverflow question, on "How can I make a Navbar that... ?"
In this case I want to make a Navbar that has icons & text. The text will be centered below each icon, and on mobile only the icons will display.
For the icons I used Font Awesome, but of course there are many other alternatives including the new icons from Bootstrap😏. The Navbar structure is standard, with the exception of using the
w-100 classes to on the
navbar-nav to make items space evenly on the page:
<nav class="navbar navbar-dark navbar-expand justify-content-center"> <div class="container"> <ul class="navbar-nav nav-justified w-100 text-center"> ... (repeat nav items here) </ul> </div> </nav>
nav-item, I used flexbox (
d-flex flex-column) to make the icon & text stack vertically. Using Bootstrap's responsive display classes, the text is hidden on mobile (
Take a closer look at each
<li class="nav-item"> <a href="#" class="nav-link d-flex flex-column"> <i class="fab fa-bootstrap"></i> <span class="d-none d-sm-inline">home</span> </a> </li>
And that's all there is to it ¯_(ツ)_/¯