twitter bootstrap collapse nav bar not working

Question

I'm new to bootstrap, i'm working with the last version. I want to do a simple site, to get to know bootstrap, but already have a problem, that I can't solve. The navbar and the icon appears to be ok, but when I click, nothing happend. I have put my complete code bellow.

<!-- <!DOCTYPE html>
 <html>
 <head>
         <meta charset="utf-8">
         <title>Getting started with Bootstrap</title>
         <link rel="stylesheet" href="css/bootstrap.css">
         <link rel="stylesheet" href="css/bootstrap-responsive.css">

 <script src="js/bootstrap.js"></script>
 </head>
 <body>-->


<div class="navbar">
   <div class="navbar-inner">
     <div class="container">

      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </a>

        <!-- Be sure to leave the brand out there if you want it shown -->
        <a class="brand" href="#">Site name</a>

        <!-- Everything you want hidden at 940px or less, place within here -->
        <nav class="nav-collapse collapse">
          <!-- .nav, .navbar-search, .navbar-form, etc -->
            <ul class="nav">
                  <li class="active"><a href="#">Home</a></li>
                  <li><a href="#">Link</a></li>
                  <li><a href="#">Link</a></li>
            </ul>

        </nav>

    </div>
  </div>
</div>

Always provide a demo for HTML, CSS, JS related questions & answers: [JS Bin](http://jsbin.com/) | [jsFiddle](http://jsfiddle.net/) — Web_Designer, Mar 15 '13 at 04:51
i'd commented out, otherwise stackoverflow, doesn't show that part. — Fede, Mar 15 '13 at 04:55
I solved it! i forgot to include the jquery library :P jaja. sorry. — Fede, Mar 15 '13 at 05:00
I was just about to say the same thing after reading [this post](http://stackoverflow.com/questions/11526594/does-twitter-bootstrap-include-jquery). Here's a working demo on JS Bin: http://jsbin.com/atudex/1/edit — Web_Designer, Mar 15 '13 at 05:03
Don't forget to set the viewport meta tag if you use the fluid grid. — Brainfeeder, Mar 15 '13 at 09:54

score 0 · Answer 1 · answered Jun 17 '20 at 16:56

I am somewhat new to using Bootstrap as well and I think I may have found some answer to your problem. It looks like you downloaded all the libraries but you may not have included all the jquery, JS, and Popper.js links in your head.

 <!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

It happened to me too because I didn't link all the libraries. So check to see if there aren't any libraries you didn't refer to in your head.

PS: Sorry I don't use the downloaded version of the libraries so I can't tell you specifically which files and libraries to select.

Hope it helps still ;)

twitter bootstrap collapse nav bar not working

1 Answers1