Bootstrap 4 Navigation Bar

To create a standard navigation bar, in the nav tag add the .navbar class followed by a responsive collapsing class: .navbar-expand-xl|lg|md|sm (stacks the navbar vertically on extra large, large, medium or small screens).

To add links inside the navbar, use a <ul> element with class="navbar-nav". Then add <li> elements with a .nav-item class followed by an <a> element with a .nav-link class:

You can use any of the .bg-color classes to change the background color of the navbar (.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light)

Add a white text color to all links in the navbar with the .navbar-dark class, or use the .navbar-light class to add a black text color.

<nav class="navbar navbar-expand-sm bg-info navbar-light">
...
</nav>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
...
</nav>

Brand / Logo

The .navbar-brand class is used to highlight the brand name or logo name of your webpage.

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <a class="navbar-brand" href="#">Logo</a>
  ...
</nav>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
   <a class="navbar-brand" href="#">
    <img src="bird.jpg" alt="Logo" style="width:40px;">
  </a>
  ...
</nav>

Collapsing The Navigation Bar

Collapsing is usefull when you want to hide the navigation links and replace them with a button that should reveal menu item when clicked on.

To create a collapsible navigation bar, use a button with class="navbar-toggle", data-toggle="collapse" and data-target="#target". Then wrap the navbar content (links, etc) inside a div element with class="collapse navbar-collapse", followed by an id that matches the data-target of the button: "thetarget".

<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <a class="navbar-brand" href="#">Navbar</a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
	<span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="collapsibleNavbar">
	<ul class="navbar-nav">
	  <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> 
</nav>

Navbar With Dropdown

Navbar Forms and Buttons

Fixed Navigation Bar

The navigation bar can also be fixed at the top or at the bottom of the page. The .fixed-top class makes the navigation bar fixed at the top:

<nav class="navbar navbar-expand-md bg-dark navbar-dark fixed-top">
    <a class="navbar-brand" href="#">Navbar</a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="collapsibleNavbar">
        <ul class="navbar-nav">
            <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>
</nav>

fixed bottom

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
  ...
</nav>

Sticky top

<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
  ...
</nav>