in

Extended Bootstrap 4 menu with a bunch of utilities

Extended Bootstrap 4 menu with a bunch of utilities 1

Bsnav adds features to the Bootstrap 4 navbar element.

See the demo

How to use it

To start using it, include the css and js files.

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/fitodac/[email protected]/dist/bsnav.min.css">

Then, before your closing <body> tag add:

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/fitodac/[email protected]/dist/bsnav.min.css">

 Where you want to show the menu, you must include the following code:

<div class="navbar navbar-expand-lg bsnav bsnav-light">

  <a class="navbar-brand" href="#">bsnav</a>

  <button class="navbar-toggler toggler-spring"><span class="navbar-toggler-icon"></span></button>

  <div class="collapse navbar-collapse justify-content-md-end">
    <ul class="navbar-nav navbar-mobile mr-0">
      <li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
      <li class="nav-item"><a class="nav-link" href="#">About Us</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Gallery</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
    </ul>
  </div>
</div>

In the demo you can find other styles for navabars.  

Mobile navbar

Bsnav includes a mobile sidebar menu. To work, you must include the following html code before closing the <body> tag, then, the bsnav javascript will be responsible for cloning the menu to use it for mobile versions.

<div class="bsnav-mobile">
  <div class="bsnav-mobile-overlay"></div>
  <div class="navbar"></div>
</div>

Info & Download

jQuery step wizard plugin with Bootstrap support. 4

jQuery step wizard plugin with Bootstrap support.

Stream Dashboard UI Kit - A beautiful Open Source Bootstrap 4 Dashboard UI Kit 5

Stream Dashboard UI Kit – A beautiful Open Source Bootstrap 4 Dashboard UI Kit