Navbar

      <nav class="navbar navbar-expand-lg navbar-light bg-white">
      <div class="container">
      <a class="navbar-brand fw-bold" href="#"><i class="fab fa-btc text-primary"></i>
      SKIN 
      <span class="ps-1 text-primary">PRO</span> </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#defaultnavbarSupportedContent" aria-controls="defaultnavbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
      <span class="navbar-toggler-icon"></span> </button>
      <div class="collapse navbar-collapse" id="defaultnavbarSupportedContent"> 
      <ul class="navbar-nav ms-auto">
      <!--list Components Begin--> 
      <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#"  role="button" data-bs-toggle="dropdown" aria-expanded="false"> Components </a>
      <div class="dropdown-menu animate slideIn">
      <div class="row no-gutters py-3">
      <div class="col-lg-4">
      <a class="dropdown-item" href="#">Alerts</a> 
      <a class="dropdown-item" href="#"> Badge</a> 
      <a class="dropdown-item" href="#">Breadcrumb</a> 
      <a class="dropdown-item" href="#">Buttons <span class="badge rounded-pill bg-warning pulse fs-11 ms-2">New</span></a> 
      <a class="dropdown-item" href="#">Button group</a> 
      <a class="dropdown-item" href="#"> Card </a> 
      <a class="dropdown-item" href="#"> Carousel </a> 
      </div>
      <div class="col-lg-4"> 
      <a class="dropdown-item" href="#"> Collapse </a>     
      <a class="dropdown-item" href="#"> Dropdowns <span class="badge bg-primary rounded-pill fs-11 pulse ms-2">Hot</span></a> 
      <a class="dropdown-item" href="#">  Forms </a>  
      <a class="dropdown-item" href="#">Jumbotron</a> 
      <a class="dropdown-item" href="#"> List group</a> 
      <a class="dropdown-item" href="#"> Media object</a> 
      <a class="dropdown-item" href="#">Modal</a>
      </div>
      <div class="col-lg-4">
      <a class="dropdown-item" href="#"> Navigations</a>
      <a class="dropdown-item" href="#"> Pagination</a>
      <a class="dropdown-item" href="#">Popovers</a>
      <a class="dropdown-item" href="#">Progress</a>
      <a class="dropdown-item" href="#">Scrollspy</a>
      <a class="dropdown-item" href="#">Spinners <span class="badge bg-primary rounded-pill fs-11 pulse ms-2">Hot</span></a>
      <a class="dropdown-item" href="#">Tooltips</a> 
      </div>
      </div>
      </div>
      </li>
      <!--list Components End-->
      <!--list Section Begin-->
      <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#"  role="button" data-bs-toggle="dropdown" aria-expanded="false">Section</a>
      <div class="dropdown-menu animate slideIn">
      <div class="row no-gutters">
      <div class="col-lg-4 py-3">
      <a class="dropdown-item" href="#">Table</a> 
      <a class="dropdown-item" href="#">Form</a> 
      <a class="dropdown-item" href="#"> creative Button</a>  
      <a class="dropdown-item" href="#">Services Price</a> 
      </div>
      <div class="col-lg-4 py-3">
      <a class="dropdown-item" href="#">Photo Gellary</a> 
      <a class="dropdown-item" href="#">Services </a> 
      <a class="dropdown-item" href="#">Account</a>  
      <a class="dropdown-item" href="#">Contact Us</a> 
      </div>
      <div class="col-lg-4">
      <img src="images/card-3.jpg" class="img-fluid" alt="card" title="card">
      </div>
      </div>
      </div>
      </li>
      <!--list Section End-->
      <!--list Home Begin-->
      <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#"  role="button" data-bs-toggle="dropdown" aria-expanded="false">
      Home
      </a>
      <div class="dropdown-menu dropdown-menu-sm animate slideIn">
      <a class="dropdown-item" href="#">Home v 1.1</a>
      <a class="dropdown-item" href="#">Home v 1.2</a>
      <a class="dropdown-item" href="#">Home v 1.3</a>
      </div>
      </li>
      <!--list Home End-->
      <!--list Page Begin-->
      <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#"  role="button" data-bs-toggle="dropdown" aria-expanded="false">
      Pages
      </a>
      <div class="dropdown-menu dropdown-menu-sm animate slideIn">
      <a class="dropdown-item" href="#">About Page</a>
      <a class="dropdown-item" href="#">Contact Page</a>
      <a class="dropdown-item" href="#">Service Page</a>
      <a class="dropdown-item" href="#">Price Page</a>
      <a class="dropdown-item" href="#">Sign In</a>
      <a class="dropdown-item" href="#">Sign Up</a>
      <a class="dropdown-item" href="#">404 Page</a>
      </div>
      </li>
      <!--list Page End-->
      <!--list Documentation Begin-->
      <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
      Documentation</a>
      <div class="dropdown-menu dropdown-menu-sm animate slideIn">
      <a class="dropdown-item" href="#">
      Documentation
      <small class="fst-italic">Customizing and building</small>
      </a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">
      Supports <br>
      <small class="fst-italic">Fast response</small>
      </a>
      </div>
      </li>
      <!--list Documentation End-->
      </ul>
      <form class="d-flex" role="search">
      <a href="#" class="btn btn-primary btn-sm ms-5 d-none d-sm-block">Contact us</a>
      </form>
      </div>
      </div>
      </nav>
                                     

   
      <nav class="navbar navbar-expand-sm navbar-light bg-white justify-content-center">
      <div class="container">
      <a class="navbar-brand fw-bold" href="#"><i class="fab fa-btc text-primary"></i>
      SKIN 
      <span class="ps-1 text-primary">PRO</span> </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#centerednavbarSupportedContent" aria-controls="centerednavbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
      <span class="navbar-toggler-icon"></span> </button>
      <div class="collapse navbar-collapse" id="centerednavbarSupportedContent"> 
      <ul class="navbar-nav ms-auto">
      <!--list Components Begin--> 
      <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#"  role="button" data-bs-toggle="dropdown" aria-expanded="false"> Components </a>
      <div class="dropdown-menu animate slideIn">
      <div class="row no-gutters py-3">
      <div class="col-lg-4">
      <a class="dropdown-item" href="#">Alerts</a> 
      <a class="dropdown-item" href="#"> Badge</a> 
      <a class="dropdown-item" href="#">Breadcrumb</a> 
      <a class="dropdown-item" href="#">Buttons <span class="badge rounded-pill bg-warning pulse fs-11 ms-2">New</span></a> 
      <a class="dropdown-item" href="#">Button group</a> 
      <a class="dropdown-item" href="#"> Card </a> 
      <a class="dropdown-item" href="#"> Carousel </a> 
      </div>
      <div class="col-lg-4"> 
      <a class="dropdown-item" href="#"> Collapse </a>     
      <a class="dropdown-item" href="#"> Dropdowns <span class="badge bg-primary rounded-pill fs-11 pulse ms-2">Hot</span></a> 
      <a class="dropdown-item" href="#">  Forms </a>  
      <a class="dropdown-item" href="#">Jumbotron</a> 
      <a class="dropdown-item" href="#"> List group</a> 
      <a class="dropdown-item" href="#"> Media object</a> 
      <a class="dropdown-item" href="#">Modal</a>
      </div>
      <div class="col-lg-4">
      <a class="dropdown-item" href="#"> Navigations</a>
      <a class="dropdown-item" href="#"> Pagination</a>
      <a class="dropdown-item" href="#">Popovers</a>
      <a class="dropdown-item" href="#">Progress</a>
      <a class="dropdown-item" href="#">Scrollspy</a>
      <a class="dropdown-item" href="#">Spinners <span class="badge bg-primary rounded-pill fs-11 pulse ms-2">Hot</span></a>
      <a class="dropdown-item" href="#">Tooltips</a> 
      </div>
      </div>
      </div>
      </li>
      <!--list Components End-->
      <!--list Section Begin-->
      <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#"  role="button" data-bs-toggle="dropdown" aria-expanded="false">Section</a>
      <div class="dropdown-menu animate slideIn">
      <div class="row no-gutters">
      <div class="col-lg-4 py-3">
      <a class="dropdown-item" href="#">Table</a> 
      <a class="dropdown-item" href="#">Form</a> 
      <a class="dropdown-item" href="#"> creative Button</a>  
      <a class="dropdown-item" href="#">Services Price</a> 
      </div>
      <div class="col-lg-4 py-3">
      <a class="dropdown-item" href="#">Photo Gellary</a> 
      <a class="dropdown-item" href="#">Services </a> 
      <a class="dropdown-item" href="#">Account</a>  
      <a class="dropdown-item" href="#">Contact Us</a> 
      </div>
      <div class="col-lg-4">
      <img src="images/card-3.jpg" class="img-fluid" alt="card" title="card">
      </div>
      </div>
      </div>
      </li>
      <!--list Section End-->
      <!--list Home Begin-->
      <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#"  role="button" data-bs-toggle="dropdown" aria-expanded="false">
      Home
      </a>
      <div class="dropdown-menu dropdown-menu-sm animate slideIn">
      <a class="dropdown-item" href="#">Home v 1.1</a>
      <a class="dropdown-item" href="#">Home v 1.2</a>
      <a class="dropdown-item" href="#">Home v 1.3</a>
      </div>
      </li>
      <!--list Home End-->
      <!--list Page Begin-->
      <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#"  role="button" data-bs-toggle="dropdown" aria-expanded="false">
      Pages
      </a>
      <div class="dropdown-menu dropdown-menu-sm animate slideIn">
      <a class="dropdown-item" href="#">About Page</a>
      <a class="dropdown-item" href="#">Contact Page</a>
      <a class="dropdown-item" href="#">Service Page</a>
      <a class="dropdown-item" href="#">Price Page</a>
      <a class="dropdown-item" href="#">Sign In</a>
      <a class="dropdown-item" href="#">Sign Up</a>
      <a class="dropdown-item" href="#">404 Page</a>
      </div>
      </li>
      <!--list Page End-->
      <!--list Documentation Begin-->
      <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
      Documentation</a>
      <div class="dropdown-menu dropdown-menu-sm animate slideIn">
      <a class="dropdown-item" href="#">
      Documentation <br>
      <small class="fst-italic">Customizing and building</small>
      </a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">
      Supports <br>
      <small class="fst-italic">Fast response</small>
      </a>
      </div>
      </li>
      <!--list Documentation End-->
      </ul>
      <form class="d-flex" role="search">
      <a href="#" class="btn btn-primary btn-sm ms-5 d-none d-sm-block">Contact us</a>
      </form>
      </div>
      </div>
      </nav>