javascript - Bootstrap 4.1 js not working - Stack Overflow

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

Share Follow edited Jul 9, 2018 at 10:33 Alf Moh 7,43755 gold badges4343 silver badges5050 bronze badges asked Jul 9, 2018 at 9:17 PierreDPierreD 96322 gold badges1414 silver badges3232 bronze badges 1

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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

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