Se puede ver que las opciones de la barra de navegación colapsan en un icono cuando se reduce el tamaño del navegador.
Esto se consigue con la clase navbar-expand-md aplicada a la barra de navegación.
Por supuesto, existen diferentes opciones para colapsar a diferentes anchuras:
navbar-expand-xl Extra largenavbar-expand-lg Largenavbar-expand-md Mediumnavbar-expand-sm SmallSe añade al navegador un botón, un toggler, al que se aplica la clase navbar-toggler y a este mismo botón se añaden las propiedades: data-toggle="collapse" data-target="#collapsibleNavbar". La primera indica que al apretar el botón se extenderá la lista de enlaces del navegador; la segunda indica qué elemento se mostrará, en este caso, el div que contiene la lista de enlaces, el cuál se ha marcado con el código class="collapse navbar-collapse" id="collapsibleNavbar".
Por su parte, el desplegado, Dropdown, se consigue añadiendo la clase dropdown al li que se quiere desplegar, y en el ancla correspondiente se añade class="nav-link dropdown-toggle" data-toggle="dropdown". Después, no hay más que añadir a la lista que contiene los elementos que se quieren desplegar, dropdown-menu. Si se desea, como en este caso, se puede añadir a cada li que se quiere mostrar la clase dropdown-item, aunque esto es solo para alinear ya que sin ella también se mostraría.