Bootstrap 5 Dropdown not working

[Vimz92]

Hey guys, i imported bootstrap 5 to VScode in react.

Tried to include Navbar in homepage from Bootstrap 5… But the dropdown is not working for me. Checked the browser for Javascript enable option. It is enabled.

Please let me know what am i doing wrong ?

import React from 'react';

const Navbar = () => {

    return ( <>

        <nav className="navbar navbar-expand-lg navbar-light bg-light">

        <div classNameName="container-fluid">

          <a className="navbar-brand" href="#">Navbar</a>

          <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

            <span className="navbar-toggler-icon"></span>

          </button>

          <div className="collapse navbar-collapse" id="navbarSupportedContent">

            <ul className="navbar-nav me-auto mb-2 mb-lg-0">

              <li className="nav-item">

                <a className="nav-link active" aria-current="page" href="#">Home</a>

              </li>

              <li className="nav-item">

                <a className="nav-link" href="#">Link</a>

              </li>

              <li className="nav-item dropdown">

                <a className="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">

                  Dropdown

                </a>

                <ul className="dropdown-menu" aria-labelledby="navbarDropdown">

                  <li><a className="dropdown-item" href="eslint-disable-next-line">Action</a></li>

                  <li><a className="dropdown-item" href="#">Another action</a></li>

                  <li><hr className="dropdown-divider" /></li>

                  <li><a className="dropdown-item" href="#">Something else here</a></li>

                </ul>

              </li>

              <li className="nav-item">

                <a className="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>

              </li>

            </ul>

            <form className="d-flex">

              <input className="form-control me-2" type="search" placeholder="Search" aria-label="Search" />

              <button className="btn btn-outline-success" type="submit">Search</button>

            </form>

          </div>

        </div>

      </nav>

 </>

    );

};

export default Navbar;

========================================
I get this Error in my Terminal :

jsx-a11y/blob/master/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

===================================

Initialise:

import React from 'react';

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

import "../node_modules/bootstrap/dist/js/bootstrap.bundle";

import Home from './Home';

import About from './About';

import Service from './Service';

import Contact from './Contact';

import Navbar from './Navbar';

import { Route, Switch, Redirect } from 'react-router';

Please help

[lasjorg]

Your code works in a plain HTML version. Did you include the bootstrap JS file?

https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js

---

I would suggest using a component library like React Bootstrap instead.

[Vimz92]

But i dont want to include CDN , I am trying to manage the native bootstrap 5. Also imported them:

import “…/node_modules/bootstrap/dist/css/bootstrap.min.css”;

import “…/node_modules/bootstrap/dist/js/bootstrap.bundle”;

Just curious why it isn’t working!!

Also, thank you for sharing React Bootstrap instead. I will check this too. Please also help me for the above issue.

[lasjorg]

Does this work?

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min';

---

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).