Bootstrap navigation

Bootstrap navigation is one of the most widely used navigation templates and there are a lot of practical points that help get familiar with frontend. In this post, we are going to have a close look at code structure, navigation toggling mechanism, browser rendering process, browser inspection, and more.

how navigation bar is toggled

responsive Bootstrap navigation toggling example

By default, the Bootstrap navigation bar toggles (show or hide/collapse) its links on device width changes. As seen in the example above, it shows all the links horizontally at desktop/laptop width, whereas it hides #link1 and #link2 as well as displaying the hamburger button ☰ at tablet/mobile device width.
What we want to have a particular look at is the toggling mechanism at tablet/mobile width and the following highlights the Bootstrap navigation codes where relevant.

BS-nav code

Look at the first boxed code snippet above.
The key role of the <button> element, represented as the hamburger ☰, is to toggle a target element’s display state between ‘show’ and ‘collapse’ every time user clicks ☰, and let’s check what attributes in the <button> element are set to carry out it.

• class="navbar-toggler" integrates the overall ‘toggle’ behaviors.
• type="button" defines that it’s a button element.
• data-toggle="collapse" is an attribute that enables toggling a data target between two states (‘show’ and ‘collapse’).
  What is data target? It’s the attribute data-target="#id" that takes a target element with "#id" as its value, in order to make this <button> element, represented as ☰, be able to manipulate the target element containing collapsible contents.
• data-target="#navbarNav" selects the target element with id="navbarNav" where contains the collapsible contents #link1 and #link2.

Now, let’s move on to the data target <div class="collapse navbar-collapse" id="navbarNav"> and see what elements are in it referring to the second boxed code snippet above.

<div class="collapse navbar-collapse" id="navbarNav">
  <div class="navbar-nav mr-auto">
    <div class="nav-item">
      <a class="navbar-brand nav-link" href="#">#link1</a>
    </div>
    <div class="nav-item">
      <a class="navbar-brand nav-link" href="#">#link2</a>
    </div>
  </div>
</div>

• <div class="navbar-nav mr-auto"> is a wrapper class helping collapsible contents look neat and go responsive.
• Each of the <div class="nav-item"> in <div class="navbar-nav mr-auto"> contains a collapsible content each.
  • <a class="navbar-brand nav-link" href="#">#link1</a>
  • <a class="navbar-brand nav-link" href="#">#link2</a>

Taken all together, say you are using a mobile, and Bootstrap navigation bar will display the hamburger button ☰ hiding #link1 and #link2.
Whenever you click on ☰, it toggles a display state of the data target <div id="navbarNav"> between ‘show’ and ‘collapse’ by selecting the opposite display state to current state, meaning that the collapsible contents #link1 and #link2 in the data target apply to the same effect automatically.

Browser inspection

All modern web browsers support an inspection (developer tool) that enables you to view, edit, or inspect source code of any websites within browser. FYI, you can open an inspection page of any website by typing Ctrl + Shift + i or press F12 (Windows OS).
Using Chrome’s browser inspection, we are going to inspect Bootstrap navigation source code in order to verify runtime toggling behaviors at tablet/mobile device size where hamburger button ☰ appears.

As seen in the capture below, the entire page width is less than 992px (tablet/mobile width) and, as a result, the Bootstrap navigation bar responsively shows ☰ as well as collapsing #link1 and #link2 except Home.

browser inspection (Chrome)

Now, let’s zoom into codes in <nav>; the <button> element (☰) and the target element <div> with id="navbarNav" where dynamic changes will apply on toggling ☰.
The following attributes in <button> and in the target element <div> with id="navbarNav" are where we can verify an interaction between Bootstrap HTML code and its API at runtime.

• class="navbar-toggler" and aria-expanded="false" in <button>.
• class="collapse navbar-collapse" in the target element <div> with id="navbarNav".

browser inspection (Chrome)

Look at the picture below.
On toggling ☰, the attribute aria-expanded="false" becomes aria-expanded="true" in <button>.
At the same time, the class show is added into the target element; <div class="navbar-collapse collapse show" id="navbarNav">.

browser inspection (Chrome)

On toggling ☰ again, here’s what happens in <button>

• The attribute aria-expanded="true" turns back into aria-expanded="false".
• The class collapsed is added.
  

At the same time, the existing class show is removed from the target element; <div class="navbar-collapse collapse show" id="navbarNav">.

browser inspection (Chrome)

As proved via Chorme browser inspection, the Bootstrap navigation source code instantly gets updated interacting with its API whenever a toggling is detected.

Browser rendering process

What do you think is browser rendering?
In a nutshell, when you visit a webpage, web browser reads the source code in HTML/CSS/JS and turns the codes into a viewable page in the web browser. That process is called a browser/page rendering.

Now, let’s verify how a web browser renders a page based on the source code we’ve gone thtough in the previous headings.

intex.html (full source code link)

Internal CSS code

<head>
  <!-- Bootstrap css reference -->
  <link 
    rel="stylesheet" 
    href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" 
    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" 
    crossorigin="anonymous">
    
  <!-- Bootstrap js reference -->
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

  <!-- internal css -->
  <style>
    body {
      font-family: sans-serif;
      background-color: #fff6df;
    }

    .myclass {
      background-color: #ffffff;
      width: 600px;
      height: auto;
      margin: 0 auto;
      padding: 20px;
    }

    footer {
      background-color: #fff6df;
      width: 600px;
      height: auto;
      margin: 0 auto;
      padding: 20px;
    }
  </style>
</head>

HTML codes (element signatures in <body> only)

<body>

  <div class="myclass mt-5">

    <!-- bootstrap nav -->
    <nav class="p-3 container navbar navbar-expand-lg navbar-light"></nav>

    <!-- lorem itsum placeholder -->
    <div class="text-center mt-3 mb-5"><h5></h5></div>
  
  </div>

  <!-- footer -->
  <footer class="text-center"></footer>

</body>

<div class="myclass"> within <body> is the main UI container having several UIs (inner elements) and is set with width: 600px making it fit for mobile device size, and here’s the rendered page in Chrome browser.

page rendering example in Chrome browser

As expected, the main UI container <div class="myclass"> is rendered with its width at 600px as part of the entire page width in the browser, regardless of any width changes at device level. That means, it keeps its width looking the same on all devices.

Now, let’s briefly go through the navigation toggling behavior on device size changes.
The sample source code references the Bootstrap library in <head> of index.html and only uses the navigation template in <body> without any further codes, which means the navigation toggling has nothing to do with any UI component’s width (e.g., the main container <div class="myclass">) defined in the HTML document, but has to do with the default page width in the browser by device size.

As seen on the bottom of the picture above, the navigation toggling automatically applies when the page’s max-width in the browser is at 991px by default. Consequently, the hamburger ☰ appears and the links are hidden (collapsed) as well as being toggled between ‘show’ and ‘collapse’ every time clicking on ☰ as long as the page’s max-width is less than 992px.
What we can see from these behaviors is that Bootstrap seems to deliver a tablet/mobile-first approach so that the navigation toggling can loosely be operated on all devices at average responsive level.

• sample code
• Bootstrap; Navs
• Bootstrap; Navbar
• Bootstrap; Responsive behaviors
• Bootstrap; Collapse
• Mariko Kosaka; Inside look at modern web browser
• Uday Hiwarale; How the browser renders a web page?
• mdn web docs; how browsers work
• w3schools; Responsive Web Design
• w3schools; Responsive Web Design - Media Queries
• w3schools; HTML Responsive Web Design