My bootstrap code works in codeply the online compiler but does not work in VS code-CodePudding

<nav >
        <a  href="">Tindog</a>
        <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
            <span ></span>
        </button>
        <div  id="navbarTogglerDemo01">
            <ul >
                <li >
                    <a  href="">Contact</a>
                </li>
                <li >
                    <a  href="">Pricing</a>
                </li>
                <li >
                    <a  href="">Download</a>
                </li>
            </ul>
        </div>
    </nav>

CodePudding user response：

Be certain that you include bootstrap either as CDN (like I did in the example below) or locally by linking to the bootstrap.css file which you would do in the header.

For certain elements in the navbar, you will need to also include the bootstrap js on the bottom of your page. Again either as CDN (I also put it in) or again localy linking the bootstrap.js file

I hope the snippet helps

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X R7YkIZDRvuzKMRqM OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">

<nav >
  <a  href="">Tindog</a>
  <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
            <span ></span>
        </button>
  <div  id="navbarTogglerDemo01">
    <ul >
      <li >
        <a  href="">Contact</a>
      </li>
      <li >
        <a  href="">Pricing</a>
      </li>
      <li >
        <a  href="">Download</a>
      </li>
    </ul>
  </div>
</nav>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>

CodePudding user response：

you need to link bootsrap or any other cdns you use in local machine..

try this..

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X R7YkIZDRvuzKMRqM OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">

<nav >
  <a  href="">Tindog</a>
  <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
            <span ></span>
        </button>
  <div  id="navbarTogglerDemo01">
    <ul >
      <li >
        <a  href="">Contact</a>
      </li>
      <li >
        <a  href="">Pricing</a>
      </li>
      <li >
        <a  href="">Download</a>
      </li>
    </ul>
  </div>
</nav>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>