The collapsed state with the burger looks like this. The full width Navbar looks like shown in the picture below. Note two things: There are ARIA-roles, which are not necessary for the functionality, but they provide accessibility information. The active page has the additional class active.

This is followed by two div holding the menu items als links. This includes the “Home”-Link and a toggler for the burger menu. The basic structure consists of a nav incorporating a div.

I took the code below from the Boostrap docs, but changed the classes for nav to a dark menu. Let’s do this Boostrap HTML to Pug transformation with a Bootstrap 5 Navbar. 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. If there are deviations from this, Bootstrap runs into trouble to make something good-looking out of it.

Just to explain this: For implementing the components and other stuff, Bootstrap has to rely on a defined input from you.

But wait! Simple to use? Well, if you exactly follow the specification yes, otherwise it will not work or produce some strange problems. 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.īootstrap is widely solution for basic website layout and design due to its easy and simple to use layout and component system. Back to blog overview Turning a Bootstrap Navbar into a Pug Template

Pug template width