Navbar collapse button does not show items for bootstrap 4.5.0 and Nextjs 9.4.4

user_5873698 0
Viewed 866

I am trying to create a very simple nextjs demo project using bootstrap for styling. I am able to use the basic styling very easily by first installing bootstrap using npm and then including it in my app.js

import 'bootstrap/dist/css/bootstrap.min.css'

I created a navbar and it worked fine but when I tried to make it collapse when my screen size shrinks does not seem to work.

I tried to find my way through it and came to know that it requires popperjs and jquery in particular order, here, and I did the same. I included the 2 in my app.js file. My import is the below.

import 'jquery/dist/jquery.min.js'
import '@popperjs/core/dist/umd/popper.min.js'
import 'bootstrap/dist/css/bootstrap.min.css'

But still my toggle button does not pop the navbar items when clicked. I can see not errors on my browser console and the dev console from where I run my project.

Here is a section of dependencies from my package.json

"dependencies": {
    "@popperjs/core": "^2.4.2",
    "bootstrap": "^4.5.0",
    "jquery": "^3.5.1",
    "next": "9.4.4",
    "react": "16.13.1",
    "react-bootstrap": "^1.0.1",
    "react-dom": "16.13.1"
  }

I can see similar questions on SO but all of them are for older bootstrap version with different class names for bootstrap components.

Here is my component


/**
 * className to create the navbar using bootstrap, TODO, intial version
 */
export default class NavBar extends Component {
  render() {
    return (
      <div id="rootdiv">
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
          <button
            class="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarTogglerDemo01"
            aria-controls="navbarTogglerDemo01"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
            <a class="navbar-brand" href="#">
              Hidden brand
            </a>
            <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
              <li class="nav-item active">
                <a class="nav-link" href="#">
                  Home <span class="sr-only">(current)</span>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">
                  Link
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link disabled" href="#">
                  Disabled
                </a>
              </li>
            </ul>
          </div>
        </nav>
      </div>
    );
  }
}```
bootstrap-4 next.js reactjs css
1 Answers

I don't know why it did not work with native bootstrap but I was able to get it to work after switching to react-bootstrap. I hope this will help some one in future.

Also there is no need to manually import popper and jquery in the app.js file. I only imported the bootstrap min file.

import 'bootstrap/dist/css/bootstrap.min.css'

import Navbar from "react-bootstrap/Navbar";
import Nav from "react-bootstrap/Nav";
import React from "react";

const RBNavBar = () => {
  return (
    <Navbar bg="light" expand="lg" id="myNavbar">
      <Navbar.Brand href="#home"><img src="/logo_lpb_small.png"></img></Navbar.Brand>
      <Navbar.Toggle aria-controls="basic-navbar-nav" />
      <Navbar.Collapse id="basic-navbar-nav">
        <Nav className="ml-auto" id="myNavItem">
          <Nav.Link href="/" id="myNavItem">Home</Nav.Link>
          <Nav.Link href="contact" id= "myNavItem">Contact</Nav.Link>
          <Nav.Link href="about" id= "myNavItem">About Us</Nav.Link>
        </Nav>
      </Navbar.Collapse>
    </Navbar>
  );
};

export default RBNavBar;
user_58736980
Related