Bootstrap 4 Navbar Breakpoint
Examples to change the breakpoint, never collapse or always use the vertical mobile navbar
New: This article was updated in 2018 for Bootstrap 4.1
The new Bootstrap 4 Navbar Component is a big improvement over it’s 3.x predecessor.
The 3.x Navbar collapsed into its vertical mobile layout when the viewport width (breakpoint) was 768 pixels or less. It was possible to change this Navbar breakpoint via the `grid-float-breakpoint` LESS variable, or using this custom CSS override hack. Not ideal for quick responsive design.
Hello Bootstrap 4
In Bootstrap 4, the Navbar is responsive by default and utilizes flexbox to make alignment of Navbar content much easier. It’s also a simple matter of using the new navbar-expand-* classes to change the Bootstrap 4 Navbar breakpoint. Now the Navbar has 6 breakpoint sizes or “states” so that you can easily have one of the following Navbar options..
— The Navbar never collapses into the vertical mobile view, and is always horizontal.
— The Navbar is always collapsed into the vertical view, and toggled via the hamburger.
— The Navbar expands into horizontal mode at one of the 4 responsive breakpoints.
The Default Bootstrap 4 Navbar
<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 with one of these..
navbar-expand= never collapses vertically (remains horizontal)navbar-expand-sm= collapses below sm widths <576pxnavbar-expand-md= collapses below md widths <768pxnavbar-expand-lg= collapses below lg widths <992pxnavbar-expand-xl= collapses below xl widths <1200px
Check out this Codeply to see the different Navbar breakpoints:
There are 2 other states for the 4.x Navbar. Always mobile and never mobile.
Always collapsed (mobile), and use hamburger to toggle
Since the Bootstrap 4 Navbar is responsive by default, we can simply remove the navbar-expand-* class to prevent it from ever showing the horizontal desktop view. In this way our Navbar will always be collapsed into the vertical mobile layout.
Never vertical (mobile), always horizontal (non-responsive)
There also may be use cases where you never want to use the vertical mobile menu and have the Navbar remain horizontal. For this case we simply add the navbar-expand class so that the Navbar doesn’t collapse.
So there it is! A deep-dive on the changing the Bootstrap 4 Navbar breakpoint. You may also want to take a look at customizing the Bootstrap 4 Navbar content, height, colors and alignment.
Follow-up — one more option!
Eventhough Bootstrap 4 has six very flexible Navbar breakpoint options, there are cases when many menu items won’t fit without wrapping. Here is another responsive solution: Put the extra (overflowing) menu items into a Navbar dropdown menu.
