Understanding Bootstrap Vertical NavBar Code

Understanding Bootstrap Vertical NavBar Code


What is the purpose of the following code for vertical menus?

<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  <span class="visible-xs navbar-brand">Sidebar menu</span>

What does this code snippet do?

That code is for creating a responsive navbar, what’s often called a “hamburger button” when the navbar collapses on smaller screens. Collapsing is tripped by a button that has the class of .navbar-toggle, then features two data elements. The first, data-toggle, is used to tell the JavaScript what to do with the button, and the second, data-target, indicates which element to toggle. The class .icon-bar is what actually creates the hamburger button. This will toggle the elements that are in the .nav-collapse div that follows this section of code.
The span class “visible-xs navbar-brand” means the brand will only be displayed on extra small devices (<768 pixels).