Creating Navigation Bar using Bootstrap

by

Creating Navigation Bar using Bootstrap

<!-- Example for  Navbar  -->
<html>
  <head>
		<!-- Import Section -->
		<link  href="bootstrap.min.css"  rel="stylesheet" />
		
		<!-- Script Files -->
		<script src="jquery.min.js"></script>
		<script src="popper.min.js"></script>
		<script src="bootstrap.min.js"></script>  
				
		<style>		
			#div2  img
			{			
			 width: 200px;
			 height: 140px;		
			 margin: 10px;		
			}
		</style> 
  </head> 
  <body>  
	<h3>Creating Navigation Bar using Bootstrap</h3>
	<hr/>		 
<div class="container"> 

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

	<!-- 1. Logo/Home Link -->
  <a class="navbar-brand" href="#">
	<img  src="home.png"  width="40"  height="40"  />
  </a>
  
    <!-- 2. Toggle button -->
  <button class="navbar-toggler" type="button" 	
				data-toggle="collapse" 
				data-target="#div1">
    <span class="navbar-toggler-icon"></span>
  </button>
  
    <!-- 3. NavBar  Actual Links -->
  <div class="collapse navbar-collapse" id="div1">  
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Products</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About Us</a>
      </li> 
	    <li class="nav-item">
        <a class="nav-link" href="#">Contact Us</a>
      </li>
	    <li class="nav-item">
        <a class="nav-link" href="#">Login</a>
      </li> 
    </ul>
  </div>  
</nav> 
</div>   	
	</body>	
</html>




<!-- 

  
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
       Customers
      </a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Login</a>
        <a class="dropdown-item" href="#">New Customer</a>
        <a class="dropdown-item" href="#">Update Details</a>
      </div>   
	</li>

 -->

Creating Navigation Bar using Bootstrap

<li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
       Customers
      </a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Login</a>
        <a class="dropdown-item" href="#">New Customer</a>
        <a class="dropdown-item" href="#">Update Details</a>
      </div>   
	</li>
Join Our WhatsApp Channel Join Now
Join Our Telegram Group Join Now

Leave a Comment