back to blog overview

Turning a Bootstrap Navbar into a Pug Template

How to transform a Bootstrap Navbar into a Pug template for using it with Node.js and Express? This is an often-asked question - and here is a solution.

Bootstrap is widely solution for basic website layout and design due to its easy and simple to use layout and component system. But wait! Simple to use? Well, if you exactly follow the specification yes, otherwise it will not work or produce some strange problems. Just to explain this: For implementing the components and other stuff, Bootstrap has to rely on a defined input from you. If there are deviations from this, Bootstrap runs into trouble to make something good-looking out of it. If you want to transfer boostrap stuff to a Pug template for using it for Example with Node.js and Express, you have to carefully pay attention to the expected structure. Let’s do this Boostrap HTML to Pug transformation with a Bootstrap 5 Navbar.

The Boostrap Navbar

I took the code below from the Boostrap docs, but changed the classes for nav to a dark menu. The basic structure consists of a nav incorporating a div. This includes the “Home”-Link and a toggler for the burger menu. This is followed by two div holding the menu items als links. The active page has the additional class active. Note two things: There are ARIA-roles, which are not necessary for the functionality, but they provide accessibility information. Don’t remove them.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" 
    data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" 
    aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-link active" aria-current="page" href="#">Home</a>
        <a class="nav-link" href="#">Features</a>
        <a class="nav-link" href="#">Pricing</a>
      </div>
    </div>
  </div>
</nav>

The full width Navbar looks like shown in the picture below.

Bootstrap Navbar

The collapsed state with the burger looks like this.

Bootstrap Navbar collapsed

Tranforming the Bootstrap Navbar into a Pug template

For the transformation we will work through every line of the code shown above and turn it into a Pug description. To show how every line transforms, I simply write the Pug code below each line. The attributes of an element are transfered into the bracket after each element. For the .container-fluid we can omit the div and simply write down the class, which automatically generates a div.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
nav(class="navbar navbar-expand-lg navbar-dark bg-dark")    
  <div class="container-fluid">
  .container-fluid
    <a class="navbar-brand" href="#">Navbar</a>
    a(class="navbar-brand" href="#") Navbar
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" 
    data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" 
    aria-expanded="false" aria-label="Toggle navigation">
    button(class="navbar-toggler" type="button" data-bs-toggle="collapse" 
    data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" 
    aria-expanded="false" aria-label="Toggle navigation")
    <span class="navbar-toggler-icon"></span>
        span(class="navbar-toggler-icon")
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    div(class="collapse navbar-collapse" id="navbarNavAltMarkup")
      <div class="navbar-nav">
      div(class="navbar-nav")    
        <a class="nav-link active" aria-current="page" href="#">Home</a>
        a(class="nav-link active" aria-current="page" href="#") Home
        <a class="nav-link" href="#">Features</a>
        a(class="nav-link" href="#") Features
        <a class="nav-link" href="#">Pricing</a>
        a(class="nav-link" href="#") Pricing
      </div>
    </div>
  </div>
</nav>

This results in the following Pug template. Please note, that everything in the brackets of Pug elements goes in one line, e.g. the bracket content of the button.

    nav(class="navbar navbar-expand-lg navbar-dark bg-dark")
      .container-fluid
        a(class="navbar-brand" href="#") Navbar
        button(class="navbar-toggler" type="button" 
            data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" 
            aria-controls="navbarNavAltMarkup" aria-expanded="false" 
            aria-label="Toggle navigation")
          span(class="navbar-toggler-icon")
        div(class="collapse navbar-collapse" id="navbarNavAltMarkup")
          div(class="navbar-nav")
            a(class="nav-link active" aria-current="page" href="#") Home
            a(class="nav-link" href="#") Features
            a(class="nav-link" href="#") Pricing
February 24, 2021
Words: 500 | Reading Time: 3 min

back to blog overview

back to home page