title: Why my dropdown menu doesn't work properly?
body: <p>I wonder why my dropdown menu in the navbar doesn't work properly. When I click on the portfolio button, it does not response, here is my code:</p>
  <pre><code>/*PUG*/
  doctype html
  html
    head 
    title Matsu
    link(rel='stylesheet' href='/bower_components/bootstrap/dist/css/bootstrap.css')
    link(rel='stylesheet' href='/css/style.css')
  body
    nav.navbar.navbar-expand-lg.navbar-dark.bg-dark
      a.navbar-brand(href='#') Website
      button.navbar-toggler(type='button' data-toggle='collapse' data-target='#navbarNavDropdown' aria-controls='navbarNavDropdown' aria-expanded='false' aria-label='Toggle navigation')
        span.navbar-toggler-icon
    #navbarNavDropdown.collapse.navbar-collapse
      ul.navbar-nav.mr-auto.mt-2.mt-lg-0 
        li.nav-item.active 
          a.nav-link(href='/') Home 
        li.nav-item
          a.nav-link(href='/about') About
        li.nav-item.dropdown
          a#navbarDropdownMenuLink.nav-link.dropdown-toggle(href='#', role='button', data-toggle='dropdown', aria-haspopup='true', aria-expanded='false')
            | Portfolio
          .dropdown-menu(aria-labelledby='navbarDropdownMenuLink')
            a.dropdown-item(href='/1') 1
            a.dropdown-item(href='/2') 2
            a.dropdown-item(href='/3') 3
            a.dropdown-item(href='/4') 4
  block content
  footer
    p Copyright &amp;copy; 2020
  
  script(src='/bower_components/jquery/dist/jquery.js')  
  script(src='/bower_components/bootstrap/dist/js/bootstrap.js')
  script(src='/js/main.js') 
  </code></pre>
  <p>I am not sure if I should provide other code or not. I've looked up bootstrap navbar explanation and transfer the html code into pug step by step, but I still cannot solve this pug, thank you.</p>
  <p><a href="https://i.stack.imgur.com/oGNIG.jpg" rel="nofollow noreferrer">Navbar Picture</a>
  <a href="https://i.stack.imgur.com/x25IN.jpg" rel="nofollow noreferrer">Project Directory</a></p>