Home > Blockchain >  Newbie with boostrap: Dropdown doesnt work
Newbie with boostrap: Dropdown doesnt work

Time:07-16

Im not sure as im starting, but I would say JS works ok (for example if i copy the accordion example it works...), but dropdown items dont work...

Probably I did something wrong while "installing" bootstrap?

I installed it using:

  1. npm i [email protected]
  2. Scss

This is the code of the index (just copied the dropdown button example):


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PRINCIPAL</title>
    <link rel="stylesheet" href="styles.css" />
</head>

<body>
    
    


  <div >
    <button  type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="true">
      Dropdown button
    </button>
    <ul  aria-labelledby="dropdownMenuButton1">
      <li><a  href="#">Action</a></li>
      <li><a  href="#">Another action</a></li>
      <li><a  href="#">Something else here</a></li>
    </ul>
  </div>
  
    

  

    <script src="node_modules/bootstrap/dist/js/bootstrap.js"></script> 
  
      
</body>

</html>

This is also my "styles.scss" file:

// Required
@import "./node_modules/bootstrap/scss/functions";
@import "./node_modules/bootstrap/scss/variables";
@import "./node_modules/bootstrap/scss/maps";
@import "./node_modules/bootstrap/scss/mixins";
@import "./node_modules/bootstrap/scss/root";

$custom-colors: (
  "tello": #7c9a5c,
  "tello-light": #bcd4ab
);

$theme-colors: map-merge($theme-colors, $custom-colors);

@import "./node_modules/bootstrap/scss/bootstrap.scss";

Thx in advance...if you need something else to know what could be going on let me know...

CodePudding user response:

SOLVED:

I forgot to add popper.js

  • Related