Не работает toggler меню в Bootstrap 4

#mainmenu { 
  font-size: 1.1rem; 
  background-color: #e3f2fd; 
  border-bottom: 15px solid gray; 
  box-shadow: 0px 10px 0px white; 
} 
 
.dropdown.has-megamenu { 
  position: static; 
} 
 
.dropdown-menu { 
  min-width: 200px; 
  width: 100%; 
  box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, .7); 
} 
 
.submenu2 { 
  height: 291px; 
} 
 
.dropdown-menu li a { 
  padding: 5px 15px; 
  font-weight: 300; 
} 
 
.multi-column-dropdown { 
  list-style: none; 
} 
 
.multi-column-dropdown li a { 
  display: block; 
  clear: both; 
  line-height: 1.428571429; 
  color: #333; 
  white-space: normal; 
} 
 
.multi-column-dropdown li a:hover { 
  text-decoration: none; 
  color: #262626; 
  background-color: #f5f5f5; 
} 
 
@media (max-width: 767px) { 
  .dropdown-menu.multi-column { 
    min-width: 240px !important; 
    overflow-x: hidden; 
  } 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> 
 
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> 
 
 
<nav id="mainmenu" class="navbar navbar-expand-md navbar-light bg-light "> 
 
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
  </button> 
 
  <div class="collapse navbar-collapse justify-content-end" id="mainNavbar"> 
    <ul class="navbar-nav"> 
      <li class="nav-item active"> 
        <a class="nav-link" href="#">Link1</a> 
      </li> 
      <li class="nav-item"> 
        <a class="nav-link" href="#">Link2</a> 
      </li> 
 
      <li class="nav-item dropdown has-megamenu"> 
 
        <a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown" d="navbarDropdown" role="button" aria-haspopup="true" aria-expanded="false">Link2</a> 
 
        <ul class="dropdown-menu submenu1 multi-column columns-3 "> 
 
          <div class="container-fluid "> 
            <div class="row"> 
              <div class="col-4"> 
                <ul class="multi-column-dropdown"> 
                  <li> 
                    <a class="dropdown-header" href="#"> 
                      <h5>Submenu</h5> 
                    </a> 
                  </li> 
                  <div class="dropdown-divider"></div> 
                  <li><a class="dropdown-item" href="#">Submenu</a></li> 
                  <li><a class="dropdown-item" href="#">Submenu</a></li> 
                  <li><a class="dropdown-item" href="#">Submenu</a></li> 
                  <li><a class="dropdown-item" href="#">Submenu</a></li> 
                  <li><a class="dropdown-item"="#">Submenu</a></li> 
                  <li><a class="dropdown-item" href="#">Submenu</a></li> 
 
                </ul> 
              </div> 
              <div class="col-4"> 
                <ul class="multi-column-dropdown"> 
                  <li> 
                    <a class="dropdown-header" href="#"> 
                      <h5>Submenu</h5> 
                    </a> 
                  </li> 
                  <div class="dropdown-divider"></div> 
                  <li><a class="dropdown-item" href="#">Submenu</a></li> 
                  <li><a class="dropdown-item" href="#">Submenu</a></li> 
                  <li><a class="dropdown-item" href="#">Submenu</a></li> 
                  <li><a class="dropdown-item" href="#">Submenu</a></li> 
                </ul> 
              </div> 
              <div class="col-4"> 
 
                <ul class="multi-column-dropdown"> 
                  <li> 
                    <a class="dropdown-header" href="#"> 
                      <h5> 
                        Submenu</h5> 
                    </a> 
                  </li> 
 
                  <div class="dropdown-divider"></div> 
                  <li><a class="dropdown-item" href="#">Submenu</a></li> 
 
                  <li><a class="dropdown-item" href="#">Submenu</a></li> 
                  <li><a class="dropdown-item" href="#">Submenu</a></li> 
                </ul> 
              </div> 
            </div> 
          </div> 
        </ul> 
      </li> 
 
 
      <li class="nav-item dropdown has-megamenu"> 
        <a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown" d="navbarDropdown" role="button" aria-haspopup="true" aria-expanded="false">Link4</a> 
 
        <ul class="dropdown-menu submenu2 multi-column columns-3 "> 
 
          <div class="container-fluid "> 
            <div class="row"> 
              <div class="col-5"> 
                <ul class="multi-column-dropdown"> 
                  <li> 
                    <a class="dropdown-header" href="#"> 
                      <h5>Submenu</h5> 
                    </a> 
                  </li> 
                  <div class="dropdown-divider"></div> 
                  <li><a class="dropdown-header" href="#">Submenu</a></li> 
 
                </ul> 
              </div> 
              <div class="col-5"> 
                <ul class="multi-column-dropdown"> 
                  <li> 
                    <a class="dropdown-item" href="#"> 
                      <h5>Submenu</h5> 
                    </a> 
                  </li> 
                  <div class="dropdown-divider"></div> 
                  <li><a class="dropdown-item" href="#">Submenu</a></li> 
                </ul> 
              </div> 
              <div class="col-2"> 
              </div> 
            </div> 
          </div> 
        </ul> 
      </li> 
      <li class="nav-item"> 
        <a class="nav-link" href="#">Link5</a> 
      </li> 
      <li class="nav-item"> 
        <a class="nav-link" href="#">Link6</a> 
      </li> 
    </ul> 
  </div> 
</nav>