Navbar items disappearing on screen width lower than 992px

Question

I am playing with bootstrap and i used a navbar but when the screen width is lower than 992px the navbar items disappear and i can't find out why.

    <nav class="navbar navbar-expand navbar-light bg-light">
      <a class="navbar-brand" href="#">Ariel Art</a>
      <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav ml-auto">
          <a class="nav-item nav-link active" href="#">Home</a>
          <a class="nav-item nav-link" href="#">Work</a>
          <a class="nav-item nav-link" href="#">Contact</a>
        </div>
      </div>
    </nav>

Here is the jsfiddle: https://jsfiddle.net/Sodel/uynj1kcs/

Answer 1

.collapse {
  display: none;
}

...is what hides your navbar.

@media (min-width: 992px) {
  .navbar-expand .navbar-collapse {
    display: flex !important;
  }
}

...is what makes it show from 992px up.

Note: I don't know this because I know Bootstrap v4. I just pressed Ctrl + Shift + I in Chrome and looked at what properties apply to the elements.