Navbar is not collapsing in bootstrap 3.3.7

Issue

I'm using bootstrap 3.3.7 and my navbar is not collapsing on smaller devices. Navbar does appear, but clicking on the navbar-toggle button does not bring any options up.

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav-demo" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="index.html" class="navbar-brand">
        <div class="orange"><i class="fas fa-football-ball"></i> Fantasy</div>
      </a>
    </div>
    <div class="collapse navbar-collapse" id="bs-nav-demo">
      <ul class="nav navbar-nav">
        <li><a class="active" href="index.html">Home</a></li>
        <li><a href="history.html">History</a></li>
        <li><a href="picks.html">Picks & Busts of the Week</a></li>
        <li><a href="news.html">Important Dates/Announcements</a></li>
        <li><a href="blog.html">Chat/Blog</a></li>
      </ul>
    </div>
  </div>
</nav>

Solution

It does appear, but clicking on it does not bring any options up

The problem might be mainly due to the fact that you are not loading the required JavaScript files properly. You can grab the CDN via documentation. Don't forget to add the Jquery CDN since you are using version 3.3.7 and it is not mentioned properly in the documentation. . Add these script tags to your HTML

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<!--Latest Jquery CDN-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Here is a working example.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav-demo" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
      <a href="index.html" class="navbar-brand">
        <div class="orange"><i class="fas fa-football-ball"></i> Fantasy</div>
      </a>
    </div>
    <div class="collapse navbar-collapse" id="bs-nav-demo">
      <ul class="nav navbar-nav">
        <li><a class="active" href="index.html">Home</a></li>
        <li><a href="history.html">History</a></li>
        <li><a href="picks.html">Picks & Busts of the Week</a></li>
        <li><a href="news.html">Important Dates/Announcements</a></li>
        <li><a href="blog.html">Chat/Blog</a></li>
      </ul>
    </div>
  </div>
</nav>
<!--Latest Jquery CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Answered By - Rifky Niyas