Bootstrap Navbar in Drupal 8 with 4 easy template changes

I am teaching myself Drupal 8 theming. Rather than starting with a contrib theme, I am starting with an empty folder, using core's Stable theme as my base theme. This is a great way to learn to the ins and outs of the new Drupal theming system, and getting it to conform to your wishes.

For a few years now, I have successfully used the Bootstrap framework in my personal and professional projects. This article will explain how I implement the Bootstrap Navbar in a way that is far simpler in Drupal 8 than it was in Drupal 7.

You can use the base Bootstrap Navbar styling, a Bootstrap theme, or your own custom Bootstrap theme. The classes should be all the same. All we need to do is change the following 4 templates, make sure two blocks are in the "Page Header" region, and add menu items and we are good to go.

Here are the step by step instructions:

1. page.html.twig

If you have a "Page Header" region, wrap it in a container-fluid div, which is wrapped in a navbar nav. This is the base container for the Bootstrap Navbar.

2. Upload your logo in the UI at /admin/appearance/settings/theme_name and edit block--system-branding-block.html.twig to:

On /admin/structure/block make sure the "Site branding" block and the "Main navigation" are in your header region. This template change configures your Site branding block and includes the Bootstrap .navbar-toggle button.

3. Override the Main Menu Block with block--THEME_NAME-main-menu.html.twig with the following:

Basically we need to remove the normal block wrapper(s) and add Bootstrap's.

4. Override the menu--main.html.twig template and add class="nav navbar" to the ul's

This adds the final piece to the menu. Add your menu items to you Drupal 8 Main navigation menu and you will see them populate into your traditional Bootstrap Navbar.