twitter-bootstrap Migrating to Bootstrap 4 Bootstrap 4 Navbar

Example

The new Bootstrap 4 Navbar Component is improved over it’s Bootstrap 3.x predecessor. In Bootstrap 4, the Navbar is responsive by default and utilizes flexbox to make alignment of Navbar content much easier. It’s also a simple matter of using the new navbar-toggleable-* classes to change the Navbar breakpoint. Now the Navbar has 6 breakpoint sizes or “states” so that you can easily have one of the following Navbar options.

• The Navbar never collapses into the vertical mobile view, and is always horizontal.
• The Navbar is always collapsed into the vertical view, and toggled via the hamburger.
• The Navbar collapses into vertical view at one of the 4 responsive breakpoints.

Basic Bootstrap 4 Navbar

<nav class="navbar navbar-toggleable-md">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar1">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>
  <div class="collapse navbar-collapse" id="navbar1">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>
  </div>
</nav>

As you can see from the code above the navbar-header class has been removed from Bootstrap 4, and the container-fluid is no longer required for a full width Navbar.

Changing the Navbar Breakpoint

The navbar-toggleable-md class makes the above Navbar collapse vertically (and show the toggler icon) at the medium (md) breakpoint of 992px. To change this to a different breakpoint, we’d just need to swap out navbar-toggleable-md with one of these..

• navbar-toggleable = collapse on xs widths <576px
• navbar-toggleable-sm = collapse on sm widths <768px
• navbar-toggleable-lg = collapse on lg widths <1200px

Bootstrap 4 Breakpoint Navbar Demo

---

Changing the Navbar Alignment

Flexbox enables us to easily change the alignment of the Navbar and its content (brand, links, forms or text). The default Navbar content is left aligned. Of course there are many other alignment scenarios...

• Brand left (default), links center & right
• Brand center, links left & right
• Brand left and links right
• Brand, links and fill width form input
• No brand, links center & right
• Brand left, links right inside container
• Justified links (fill width) centered

Bootstrap 4 Navbar with Centered Brand, and Left/Right Links

<nav class="navbar navbar-toggleable-sm navbar-inverse bg-primary">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target=".dual-collapse">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse collapse dual-collapse">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#features">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
    <a class="navbar-brand d-flex mx-auto" href="#">Navbar 2</a>
    <div class="navbar-collapse collapse dual-collapse">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
</nav>

Bootstrap 4 Navbar with Brand Left, Links Center and Right

<nav class="navbar navbar-light navbar-toggleable-sm bg-faded justify-content-center">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#collapsingNavbar3">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a href="/" class="navbar-brand d-flex w-50 mr-auto">Brand</a>
    <div class="navbar-collapse collapse" id="collapsingNavbar3">
        <ul class="navbar-nav mx-auto w-100 justify-content-center">
            <li class="nav-item active">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
        <ul class="nav navbar-nav ml-auto w-100 justify-content-end">
            <li class="nav-item">
                <a class="nav-link" href="#">Right</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Right</a>
            </li>
        </ul>
    </div>
</nav>

Navbar Alignment Demos: http://www.codeply.com/go/qhaBrcWp3v

---

More on the Bootstrap 4 Navbar

Customizing Color, Alignment or Height