Creating Navigation Bar using Bootstrap
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
<!-- 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
Leave a Reply