Bootstrap 4 - Difference between Nav and Navbar classes

Bootstrap 4 - Difference between Nav and Navbar classes

I’m struggling to understand the difference between nav and navbar classes. When do I use one vs the other. It seems from my reading that navbar is a flexbox by default… if I make a navbar like the guides example -

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Site Name</a>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>

my links end up stacking vertically… my understanding is that flex containers should stack horizontally by default.

I feel like somewhere I’m missing a bit of information that might be a key to understanding it all…

anyone have any ideas?

Sorry it’s almost been two years. I have the same question and here is what I found. There are two classes that seem the same .nav and .nav-bar. I believe .nav-bar is intended for the main page navigation on top of the page and has a whole bunch of styling attributes available. The .nav class is for simple navigation and adds a display: flex; attribute to the nav ul links. I believe you can have a .nav and style it with .nav-bar attributes if you just at the .nav-bar class to the element.