navbar collapse breakpoints code example

Example: changing the bootstrap navbar break point

<nav class="navbar navbar-light navbar-expand-md">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar1">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbar1">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>
  </div>
</nav>

<!---- As you can see from the code above, the navbar-expand-md class in the nav would make this Navbar collapse vertically (and show the toggler icon) at the medium (md) breakpoint of 768px.
To change to a different breakpoint, we’d just need to swap out navbar-expand-md
to any of these navbar-expand = never collapses vertically (remains horizontal)
navbar-expand-sm = collapses below sm widths <576px
navbar-expand-md = collapses below md widths <768px
navbar-expand-lg = collapses below lg widths <992px
navbar-expand-xl = collapses below xl widths <1200px ----!>