Bootstrap 4
  Prev Page
Next Page  
Bootstrap 4 Navbars
Bootstrap 4 navbars is a simple and powerful, responsive navigation header, the navbar. Includes branding, navigation, and other elements into a navigation header,  including support for our collapse plugin.

A standard navigation bar is created with the .navbar class, followed by a responsive collapsing class {.navbar-expand-sm | -md |-lg | -xl }. 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.
<nav class="navbar navbar-expand-sm bg-light">

  <!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 3</a>
    </li>
  </ul>

</nav>
Output :
Brand (or) Logo

The .navbar-brand class is used to highlight the brand/logo/project name of your page

<nav class="navbar navbar-expand-sm bg-light">
  <!-- Brand/logo -->
  <a class="navbar-brand" href="#">Logo</a>
  
  <!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">HTML5</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">CSS3</a>
    </li>
	<li class="nav-item">
      <a class="nav-link" href="#">Bootstrap 4</a>
    </li>
  </ul>
</nav>

<br /> <br />

<nav class="navbar navbar-expand-sm bg-light">
  <!-- Brand/logo -->
  <a class="navbar-brand" href=""><img src="http://www.freetimelearning.com/images/FTL.png" class="img-fluid" alt="Logo"></a>
  
  <!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">HTML5</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">CSS3</a>
    </li>
	<li class="nav-item">
      <a class="nav-link" href="#">Bootstrap 4</a>
    </li>
  </ul>
</nav>
Output :
Vertical Navbar

Remove the .navbar-expand-xl|lg|md|sm class to create a vertical navigation bar

<nav class="navbar bg-light">
  <!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">HTML5</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">CSS3</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Bootstrap 4</a>
    </li>
  </ul>

</nav>
Output :
Color schemes

Use the .bg-color class to change the background color of the navbar. So many background colors of navbars are .bg-dark and .bg-light, .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary.

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

<nav class="navbar navbar-expand-sm  navbar-dark bg-dark">
  <ul class="navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#">Active</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 disabled" href="#">Disabled</a>
    </li>
  </ul>
</nav>


<nav class="navbar navbar-expand-sm  navbar-light bg-light">
  <ul class="navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#">Active</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 disabled" href="#">Disabled</a>
    </li>
  </ul>
</nav>


<nav class="navbar navbar-expand-sm  navbar-dark bg-primary">
  <ul class="navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#">Active</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 disabled" href="#">Disabled</a>
    </li>
  </ul>
</nav>

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

.....
Output :
Collapsing The Navigation Bar

To create a collapsible navigation bar, use a button with class="navbar-toggle", data-toggle="collapse" and data-target="#CollapseBtn". 

<nav class="navbar navbar-expand-md bg-primary navbar-dark">
  <a class="navbar-brand" href="#">LOGO</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#CollapseBtn">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="CollapseBtn">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">HTML5</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">CSS3</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Bootstrap 4</a>
      </li>    
    </ul>
  </div>  
</nav>
Output :
Navigation Bar With Dropdowns

Dropdown menus require a wrapping element for positioning, so be sure to use separate and nested elements for .nav-item and .nav-link as shown below.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">HTML5</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">CSS3</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Bootstrap
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Bootstrap 3</a>
          <a class="dropdown-item" href="#">Bootstrap 4</a>
        </div>
      </li>
    </ul>
  </div>
</nav>
Output :
Navigation Bar With Form
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">LOGO</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarForm" aria-controls="navbarForm" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

<div class="collapse navbar-collapse" id="navbarForm">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">HTML5</a>
      </li>
	  <li class="nav-item">
        <a class="nav-link" href="#">CSS3</a>
      </li>
    </ul>
	<form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>
Output :
  Prev Page
Next Page