How to Make a Icon + Text Navbar in Bootstrap

#bootstrap #html #webdev #css

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.

Mobile view

Large view

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 nav-justified and 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>

For each 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 (d-none d-sm-inline).

Take a closer look at each nav-item🧐...

<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 ¯_(ツ)_/¯

Demo😎
Full source🤓