Dev Notes

Software Development Resources by David Egan.

Bootstrap 4 Navbar


Bootstrap, Bootstrap 4
David Egan

There are quite a few changes in Bootstrap 4 (it’s SASS rather than LESS for a start!).

One of these changes is the navbar. Here’s the markup for the basic navbar on this page:

<header id="top">
  <div class="container">
    <h1><a href="/">Web Development Notes</a></h1>
    <h4>Various Cheat Sheets and Resources by David Egan/Carawebs.</h4>
    <section id="main-nav">
      <nav class="navbar">
        <ul class="nav navbar-nav">
          <li class="nav-item"><a href="http://carawebs.com" class="btn nav-link">Carawebs Main Site</a></li>
          <li class="nav-item"><a href="/" class="btn nav-link">Dev-Notes Home</a></li>
          <li class="nav-item"><a href="/linux/" class="btn nav-link">Linux</a></li>          
          <li class="nav-item"><a href="/wordpress/" class="btn nav-link">WordPress</a></li>         
          <li class="nav-item"><a href="/tools/" class="btn nav-link">Tools</a></li>          
          <li class="nav-item"><a href="/contact" class="btn nav-link">Contact</a></li>          
        </ul>
      </nav>
    </section>
  </div>
</header>

New in Bootstrap 4

  • nav-item class on the li elements
  • nav-link class on the nav links themselves

I’m still digging in to Bootstrap - I intend to add more navbar fragments as I build them.

One thing to note is that the navbar doesn’t yet collapse at mobile views.

Liquid/Jekyll Markup

This is a Jekyll site, so I build the navbar shown above like this:

<header id="top">
  <div class="container">
    <h1><a href="{{site.baseurl}}/">{{ site.name }}</a></h1>
    <h4>{{ site.description }}</h4>
    <section id="main-nav">
      <nav class="navbar">
        <ul class="nav navbar-nav">
          <li class="nav-item">
            <a href="http://carawebs.com" class="btn nav-link">Carawebs Main Site</a>
          </li>
          {% for node in site.navigable-pages %}
          {% if page.url == node.url/ %}
          <li class="nav-item">
            <a href="{{site.baseurl}}{{ node.url }}" class="btn nav-link active">{{ node.title }}</a>
          </li>
          {% else %}
          <li class="nav-item">
            <a href="{{site.baseurl}}{{ node.url }}" class="btn nav-link">{{ node.title }}</a>
          </li>
          {% endif %}
          {% endfor %}
        </ul>
      </nav>
    </section>
  </div>
</header>

Jekyll will then render the final HTML as shown above.

comments powered by Disqus