Bootstrap 4 Navbar Tutorials

bootstrap 4 navbar

Hello friends today in this article we will learn how to create navbar using Bootstrap 4 and Free Bootstrap Navbar Templates.

Bootstrap 4 Navbar create with .navbar class, followed by a responsive collapsing class: .navbar-expand-xl|lg|md|sm.

For  <ul> element with class="navbar-nav". Then add <li> elements with a .nav-item class and <a> element with a .nav-link class:

Bootstrap 4 Basic Navbar

<nav class="navbar navbar-expand-sm bg-light">
   <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>

Vertical Navbar

<nav class="navbar bg-dark">
  <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>

Bootstrap 4 Centered Navbar

To Create centered navbar just ass  .justify-content-center class to center the navigation bar.

To change navbar background just add class .bg-dark .bg-light .bg-danger

<nav class="navbar navbar-expand-sm bg-dark justify-content-center">
  <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>

Bootstrap 4 Navbar With Logo

To Create Navbar with Brand and logo just add class .navbar-brand under <nav></nav>

<nav class="navbar navbar-expand-sm bg-light">
 <a class="navbar-brand" href="#"><img src="logo-(2).png" /></a>
  <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>

Bootstrap 4 Colored Navbar

To Add navbar background just add class .bg-dark .bg-light .bg-danger .bg-success .bg-danger

<nav class="navbar navbar-expand-sm bg-success">
   <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>
<nav class="navbar navbar-expand-sm bg-danger">
   <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>

Bootstrap 4 Collapsing Navbar

In Bootstrap 4 Collapsing navbar when we open website in mobile its hide link and show button group and open nav on click.

<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <!-- Brand -->
  <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="#">My Link-1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">My Link-2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">My Link-3</a>
      </li>
    </ul>
  </div>
</nav>

You May Also Like 

Bootstrap Admin Panel  ,  Bootstrap Responsive Login Page  ,  Bootstrap Registration Form 

Leave a Reply

Your email address will not be published. Required fields are marked *