Bootstrap 5 — More Navbar Customizations

Bootstrap 5 is in alpha when this is written and it’s subject to change.

Bootstrap is a popular UI library for any JavaScript apps.

In this article, we’ll look at how to customize navbars with Bootstrap 5.

Text

We can add text to our navbars.

For example, we can write:

<nav class="navbar navbar-light bg-light">  
  <div class="container-fluid">  
    <span class="navbar-text">  
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
    </span>  
  </div>  
</nav>

to add the text.

We add the navbar-text class to style the text to fit the navbar.

Also, we can mix and match other utility classes as we wish:

<nav class="navbar navbar-expand-lg navbar-light bg-light">  
  <div class="container-fluid">  
    <a class="navbar-brand" href="#">App</a>  
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">  
      <span class="navbar-toggler-icon"></span>  
    </button>  
    <div class="collapse navbar-collapse" id="navbarText">  
      <ul class="navbar-nav mr-auto mb-2 mb-lg-0">  
        <li class="nav-item">  
          <a class="nav-link active" href="#">Home</a>  
        </li>  
        <li class="nav-item">  
          <a class="nav-link" href="#">Profile</a>  
        </li>  
        <li class="nav-item">  
          <a class="nav-link" href="#">Settings</a>  
        </li>  
      </ul>  
      <span class="navbar-text">  
        more text  
      </span>  
    </div>  
  </div>  
</nav>

We have a navbar with a brand and nav item.

We add the mr-auto to add right margin to our nav.

And we have the mb-2 and mb-lg-0 classes to change the bottom margin depending on the width of the screen.

If it’s large, then there’s no bottom margin.

Color Schemes

The color schemes of navbar can also change.

We can add the navbar-dark and bg-dark classes to make the navbar dark.

navbar-dark and bg-primary classes make the navbar blue.

We can also apply our own styles.

For example, we can write:

<nav class="navbar navbar-dark bg-dark">  
  <div class="container-fluid">  
    <a class="navbar-brand" href="#">App</a>  
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">  
      <span class="navbar-toggler-icon"></span>  
    </button>  
    <div class="collapse navbar-collapse" id="navbarText">  
      <ul class="navbar-nav mr-auto mb-2 mb-lg-0">  
        <li class="nav-item">  
          <a class="nav-link active" href="#">Home</a>  
        </li>  
        <li class="nav-item">  
          <a class="nav-link" href="#">Profile</a>  
        </li>  
        <li class="nav-item">  
          <a class="nav-link" href="#">Settings</a>  
        </li>  
      </ul>  
    </div>  
  </div>  
</nav>

to add a dark navbar.

The classes are applied to the root navbar element.

We can also apply our own navbar color:

<nav class="navbar navbar-light" style="background-color: lightblue">  
  <div class="container-fluid">  
    <a class="navbar-brand" href="#">App</a>  
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">  
      <span class="navbar-toggler-icon"></span>  
    </button>  
    <div class="collapse navbar-collapse" id="navbarText">  
      <ul class="navbar-nav mr-auto mb-2 mb-lg-0">  
        <li class="nav-item">  
          <a class="nav-link active" href="#">Home</a>  
        </li>  
        <li class="nav-item">  
          <a class="nav-link" href="#">Profile</a>  
        </li>  
        <li class="nav-item">  
          <a class="nav-link" href="#">Settings</a>  
        </li>  
      </ul>  
    </div>  
  </div>  
</nav>

We added the style attribute to do that.

Containers

We can add a container class to center the nav bar on the page.

For example, we can write:

<div class="container">  
  <nav class="navbar navbar-expand-lg navbar-light bg-light">  
    <div class="container-fluid">  
      <a class="navbar-brand" href="#">App</a>  
    </div>  
  </nav>  
</div>

Then we’ll get some margins around the page.

Also, we can use any responsive containers to change the width of the navbar:

<nav class="navbar navbar-expand-lg navbar-light bg-light">  
  <div class="container-md">  
    <a class="navbar-brand" href="#">App</a>  
  </div>  
</nav>

We added the navbar-expand-lg class to make it expand when the screen hits the lg breakpoint or wider.

Placement

The placement of the navbar can also be changed.

For example, we can write:

<nav class="navbar fixed-top navbar-light bg-light">  
  <div class="container-fluid">  
    <a class="navbar-brand" href="#">Fixed Navbar</a>  
  </div>  
</nav>

Then we have the fixed-top class to make the navbar stick to the top.

To keep the navbar at the bottom of the screen, we can write:

<nav class="navbar fixed-bottom navbar-light bg-light">  
  <div class="container-fluid">  
    <a class="navbar-brand" href="#">Fixed Navbar</a>  
  </div>  
</nav>

The fixed-bottom class keeps the navbar at the bottom.

We can also use the sticky-top class to make it stick to the top:

<nav class="navbar sticky-top navbar-light bg-light">  
  <div class="container-fluid">  
    <a class="navbar-brand" href="#">Fixed Navbar</a>  
  </div>  
</nav>

Conclusion

We can place our navbar and its content the way we want with various classes.