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>
Leave a Reply