"Bootstrap 4 navbar"
Bootstrap 4.0.0 Snippet by zeeshan004

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <nav class="navbar navbar-expand-lg border"> <div class="container"> <a class="navbar-brand" href="#"></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarText"> <ul class="navbar-nav mr-auto"> <li> <a class="nav-link" href="#"><i class="fa fa-home" aria-hidden="true"></i>  Home</a></li> <li> <a class="nav-link" href="#"><i class="fa fa-file-text" aria-hidden="true"></i>  About</a></li> <li> <a class="nav-link" href="#"><i class="fa fa-sticky-note" aria-hidden="true"></i>  Historical </a> </li> <li> <a class="nav-link" href="#"><i class="fa fa-sticky-note" aria-hidden="true"></i>  Historical </a> </li> <li> <a class="nav-link" href="#"><i class="fa fa-book" aria-hidden="true"></i>  Admission</a> </li> <li> <a class="nav-link" href="#"><i class="fa fa-linode" aria-hidden="true"></i>  Facilities</a> </li> <li> <a class="nav-link" href="#"><i class="fa fa-thumbs-up" aria-hidden="true"></i>  Discipline</a> </li> <li> <a class="nav-link" href="#"><i class="fa fa-address-card" aria-hidden="true"></i>  Contact </a> </li> </ul> </div></div> </nav>
@charset "utf-8"; /* CSS Document */ .navbar { position: relative; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-align: center; align-items: center; -ms-flex-pack: justify; justify-content: space-between; padding: 0rem 0.5rem; background-color: #066BA3; } .navbar-expand-lg .navbar-nav .nav-link { padding-right:1rem; padding-left: 1rem; color: #FFF; } .navbar-nav { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; padding-left:0; margin-bottom: 0; list-style: none; } .navbar-brand { display: inline-block; padding-top: 0.3125rem; padding-bottom: 0.3125rem; margin-right: 0rem; font-size: 1.25rem; line-height: inherit; white-space: nowrap; } .navbar-nav .nav-link { padding-right: 0; padding-left: 0; } .navbar-nav .dropdown-menu { position: static; float: none; } ul { list-style: none; width:100%; } li { display: inline-block; width:12.5%; text-align:center; border-right-width: 0.15mm; border-left-width: .15mm; border-right-style: solid; border-left-style: solid; border-right-color: #eee; border-left-color: #eee; font-family: 'Oswald', sans-serif; font-size: 15px; margin-right: 1px; } @media (max-width:576px) { ul { list-style: none; width:100%; } li { display: inline-block; width:100%; padding:0; text-align:center; border-right-width: thin; border-left-width: thin; border-right-style: solid; border-left-style: solid; border-right-color: #CCC; border-left-color: #CCC; } } .navbar-light .navbar-nav .nav-link { color: #fff; } .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover { color: rgba(255, 255, 255, 0.7); } .navbar-light .navbar-nav .nav-link.disabled { color: rgba(255, 255, 255, 0.3); } .navbar-light .navbar-nav .show > .nav-link, .navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .nav-link.active { color: rgba(0, 0, 0, 0.9); } .navbar-light .navbar-toggler { color:#FFF; border-color: #FFF; } .navbar-light .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(235, 235, 235, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); font-weight: normal; } .navbar-light .navbar-text { color: rgba(0, 0, 0, 0.5); } .navbar-light .navbar-text a { color: rgba(0, 0, 0, 0.9); } .navbar-light .navbar-text a:focus, .navbar-light .navbar-text a:hover { color: rgba(0, 0, 0, 0.9); }

Related: See More


Questions / Comments: