Home > Software engineering >  Bootstrap navbar toggler is not working in reactjs
Bootstrap navbar toggler is not working in reactjs

Time:08-08

My version of Bootstrap is 5.2.

navbar.jsx

import React, { Component } from "react";
import { NavLink, Link } from "react-router-dom";
class Navbar extends Component {
  state = {};
  render() {
    return (
      <nav className="navbar navbar-dark mb-2 navbar-expand-lg bg-dark">
        <div className="container">
          <Link className="navbar-brand" to="#">
            Vidly
          </Link>
          <button
            className="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarNavAltMarkup"
            aria-controls="navbarNavAltMarkup"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span className="navbar-toggler-icon" />
          </button>
          <div className="collapse navbar-collapse" id="navbarNav">
            <ul className="navbar-nav ms-auto">
              <li className="nav-item">
                <NavLink className="nav-link" aria-current="page" to="/movies">
                  Movies
                </NavLink>
              </li>
              <li className="nav-item">
                <NavLink className="nav-link" to="/rentals">
                  Rentals
                </NavLink>
              </li>
              <li className="nav-item">
                <NavLink className="nav-link" to="/customers">
                  Customers
                </NavLink>
              </li>
              <li className="nav-item">
                <NavLink className="nav-link" to="/login">
                  Login
                </NavLink>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    );
  }
}

export default Navbar;

Above is my code here on top navbar-toggle is not working.

I tried more things and read more documents about it but I'm unable to find a solution - kindly need your help.

Thanks in advance <3

CodePudding user response:

I think "bootstrap" and "react-bootstrap" are different.

you can refer to this link https://react-bootstrap.github.io

  • Related