When I changed from Bootstrap v3.3.7 to 3.4.1 my dropdown menus broke

I just redid my config.json on bootstrap and downloaded the bootstrap 3.4.1 version. I was previously using 3.3.7. When I did this all my drop-down menus quit working. Any ideas on why this may have happened? I don't see anything that sticks out when I look at the difference between the original and new files, but I may just have looked at them for too long. Here's what one of my dropdowns looks like below. See "<li role="presentation" class="dropdown">"

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <div class="row row1">
          <ul class="nav navbar-nav navbar-right">
            <li role="presentation" class="phone">
              <a href="tel:+18555555555"><span class="glyphicon glyphicon-earphone"></span> 1-855-555-5555</a>
            </li>
            <li class="navdivider"></li>
            <li role="presentation">
              <a href="{{ site.baseurl }}/search.html"><span class="glyphicon glyphicon-search"></span>Search</a>
            </li>
          </ul>
        </div> <!-- /row1 -->
        <div class="row row2">
            <ul class="nav navbar-nav">
                <li role="presentation">
                  <a href="{{ site.baseurl }}/" title="Home Page">Home</a>
                </li>
                <li class="navdivider"></li>
               <li role="presentation" class="dropdown">
                  <a href="{{ site.baseurl }}/auto/" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">Insurance <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                      <li><a href="{{ site.baseurl }}/auto/" title="auto">Auto</a></li>
                      <li><a href="{{ site.baseurl }}/motorcycle/" title="motorcycle">Motorcycle</a></li>
                      <li><a href="{{ site.baseurl }}/rv/" title="RV">RV</a></li>
                      <li><a href="{{ site.baseurl }}/home-insurance/" title="Home">Homeowners</a></li>
                     </ul>
                </li>
                <li class="navdivider"></li>
                <li role="presentation">
                  <a href="{{ site.baseurl }}/customer-service/" title="Customer Service">Customer Service</a>
                </li>
            </ul>
            <ul class="nav-btn">
              <li><button type="button" class="btn btn-login btn-xs" data-href="#customer-login-topnav" data-toggle="modal" data-target="#customer-login-topnav"><span class="glyphicon glyphicon-lock" aria-hidden="true"></span> LOG IN</button></li>
              <li><button class="btn btn-primary btn-xs" type="button"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> BUY NOW</button></li>
            </ul>
        </div> <!-- / row2 -->
      </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
  </nav>

When I click "Insurance" the drop down (auto, motorcycle, RV, Homeowners) does not show up.

Solution 1:

Be sure to import all the libraries. I think you forgot the JQuery Library.

You need those two css libraries:

<link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
      integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu"
      crossorigin="anonymous"
    />

    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
      integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ"
      crossorigin="anonymous"
    />

And your need those two javascript/jquery libraries:

<script
  src="https://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
  crossorigin="anonymous"
></script>
<script
  src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
  integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
  crossorigin="anonymous"
></script>

Documentation: https://getbootstrap.com/docs/3.4/getting-started/#template