I'm trying bootstrap but the js isn't working in nav (dropdown + mobile icon)

This is my html:

  <div class="collapse navbar-collapse" id="navbarColor02">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">TEST <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="download">Pulse <span class="caret"></span></a>
          <div class="dropdown-menu" aria-labelledby="download">
            <a class="dropdown-item" href="/">Open in JSFiddle</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="../4/pulse/bootstrap.min.css">bootstrap.min.css</a>
            <a class="dropdown-item" href="../4/pulse/bootstrap.css">bootstrap.css</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="../4/pulse/_variables.scss">_variables.scss</a>
            <a class="dropdown-item" href="../4/pulse/_bootswatch.scss">_bootswatch.scss</a>
          </div>
        </li>
    </ul>
  </div>
</nav>

Others topics for js issue with bootstrap don't help me...

I'm trying bootstrap but the js isn't working in nav (dropdown + mobile icon)

This is my html:

  <div class="collapse navbar-collapse" id="navbarColor02">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">TEST <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="download">Pulse <span class="caret"></span></a>
          <div class="dropdown-menu" aria-labelledby="download">
            <a class="dropdown-item" href="https://jsfiddle/bootswatch/0mb9487u/">Open in JSFiddle</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="../4/pulse/bootstrap.min.css">bootstrap.min.css</a>
            <a class="dropdown-item" href="../4/pulse/bootstrap.css">bootstrap.css</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="../4/pulse/_variables.scss">_variables.scss</a>
            <a class="dropdown-item" href="../4/pulse/_bootswatch.scss">_bootswatch.scss</a>
          </div>
        </li>
    </ul>
  </div>
</nav>

Others topics for js issue with bootstrap don't help me...

• javascript
• html
• css
• twitter-bootstrap

• CSS and JS should be declared in head. – aldi Commented Jul 9, 2018 at 9:30

3 Answers 3

Make Sure that you have to add all these cdn in your head section

MaxCDN provides CDN support for Bootstrap's CSS and JavaScript. You must also include jQuery:

MaxCDN:

<!-- Latest piled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/4.1.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis./ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>

<!-- Latest piled JavaScript -->
<script src="https://maxcdn.bootstrapcdn./bootstrap/4.1.0/js/bootstrap.min.js"></script>

Don't know what files you've imported in your html, but if you didn't imported bundle js file, then you need to import popper.js file too. in total you need following 4 files for the bootstrap to work:

1. bootstrap.min.css
2. jquery (latest is remended, check bootstrap doc)
3. popper.js
4. bootstrap.min.js

number 2, 3, 4 - order matters

Hope that helps...

I've never seen something like this and i'm wondering how did you e up to use bootstrap in such way. You are doing it pletely wrong, you do not import .css/.js file directly in html tag, you specify these libraries in proper places in code. You need to start from beginning and read about how to use bootstrap, example good source for it is in here: https://www.w3schools./bootstrap4/bootstrap_get_started.asp