Why Is My Bootstrap Code Not Working

Why is my Bootstrap code not working?

Are all the files in the right folders? You are using relative url:s, can be confusing if you just started to code. How is your folder structure? Are the index.html and the css folder in the same directory?

My bootstrap code for Navbar toggler is not working

Simple change HTTP to HTTPS for bootstrap.js resource. And changed version of that.

<head>  <meta charset="utf-8">  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">  <title></title>   <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>          <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script></head>
<body>  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">    <a class="navbar-brand " href="#">Logo</a>    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">    <span class="navbar-toggler-icon"> </span>  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">

      <ol class="navbar-nav ml-auto">        <li class="navbar-item">          <a class="nav-link" href="#">Contact</a>        </li>        <li class="navbar-item">          <a class="nav-link" href="#">Skills</a>        </li>        <li class="navbar-item">          <a class="nav-link" href="#">Profile</a>        </li>
      </ol></div>  </nav></body>
</html>

Why my Bootstrap code is not working

Bootstrap will be working fine, your problem is that you've copied and pasted the wrong bit of code from the bootstrap documentation.

It looks like you've just copied and pasted the code found at the top of the components.html page here.

This is done purely illustratively of what is possible. If you were wanting just this to show up, you'd want to change it too:

<ul class='dropdown-menu' role='menu' aria-labelledby='dropdownMenu' style='display: block; position: static'>

For actual useful-ness though, you want to read this section of the documentation which will tell you how to use it usefully.

JSFiddle of it correctly working

Why is my bootstrap collapse code not working?

I replaced local bootstrap link with the online ones:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

It works properly now

Bootstrap not working in my html document

Here is working code:(JSFiddle:https://jsfiddle.net/awjbm4oL/2/)

Your issuse was that you don't add div with content to toggle on click button

See here:https://getbootstrap.com/docs/4.0/components/collapse/

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>   <p>  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">    Link with href  </a>  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">    Button with data-target  </button></p><div class="collapse" id="collapseExample">  <div class="card card-body">    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.  </div></div>

Why Is My Bootstrap Code Not Working