Bootstrap 4 Navbars: Understanding Mobile Collapse

Intro

The documentation for Bootstrap 4 navbars is surprisingly poor when it comes to explaining how the mobile menu collapse works. So today we are going to take a bit of a deep dive into this subject. What exactly do each of these navbar classes do? How do we separate our mobile and desktop menus? Letโ€™s get started.

The <nav> element is not a Bootstrap CSS class. This is a native HTML element. This will be obvious to many, but because it looks so similar to the following CSS classes I thought it was worth mentioning to avoid confusion. This is simply a specific type of <div> wrapper meant to denote that the contents are used for navigation. It imparts no properties of itโ€™s own. This is mostly helpful for screen readers.

This is the first class that will always be added to the