CODEWITHSUNDEEP
twitter-bootstrapreactjs
Yaniv Peretz
Yaniv Peretz

Reputation: 1168

bootstrap & navbar collapse don't work react (create-react-app)

I'm trying to use: bootstrap 4 navbar and it wouldn't collapse on react. https://getbootstrap.com/docs/4.0/components/navbar/#supported-content

could someone explain why? I'm assuming this could be because will need to amend to components to change states? but it is just my guess. 

import React from "react";
import ReactDOM from "react-dom";

import registerServiceWorker from "./registerServiceWorker";
// styles
import "../node_modules/jquery/dist/jquery.min.js";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

ReactDOM.render(
<nav className="navbar navbar-expand-lg navbar-light bg-light">
  <a className="navbar-brand" href="#">Navbar</a>
  <button  className="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
      <li  className="nav-item active">
        <a  className="nav-link" href="#">Home <span  className="sr-only">(current)</span></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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div  className="dropdown-menu" aria-labelledby="navbarDropdown">
          <a  className="dropdown-item" href="#">Action</a>
          <a  className="dropdown-item" href="#">Another action</a>
          <div  className="dropdown-divider"></div>
          <a  className="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li  className="nav-item">
        <a  className="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form  className="form-inline my-2 my-lg-0">
      <input  className="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"/>
      <button  className="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>
, document.getElementById("root"));
registerServiceWorker();

Upvotes: 5

Views: 20647

Answers (5)

Harshil Sharma
Harshil Sharma

Reputation: 21

For me, it worked by including these scripts before the head tag in my layout file:

Refer point 2 "Include Bootstrap’s CSS and JS" here: Link

Upvotes: 0

za-ek
za-ek

Reputation: 475

If you use react be sure that NavbarToggle and NavbarCollapse are inside the Navbar tag

<Navbar expand="lg">
    <NavbarToggle aria-controls="basic-navbar-nav" />
    <NavbarOffcanvas>
        <Nav>
            <Nav.Item>
                <Nav.Link eventKey={TPL_TABS.ACCEPTED} href="/">Accepted</Nav.Link>
            </Nav.Item>
            <Nav.Item>
                <Nav.Link eventKey={TPL_TABS.ARCHIVE} href="/">Archive</Nav.Link>
            </Nav.Item>
        </Nav>
    </NavbarOffcanvas>
</Navbar>

Upvotes: 0

HMaziad
HMaziad

Reputation: 199

The best solution for me was to import only the bootstrap collapse.js script in the navbar component to prevent mixing js scripts.

Include this at the top of your navbar.jsx component:

import "bootstrap/js/src/collapse.js";

Upvotes: 11

Merim
Merim

Reputation: 1363

If it is Bootstrap v3, maybe try to change class navbar-toggler to navbar-toggle.

On npm page Bootstrap 3.3.7 is latest version..

Upvotes: 0

margaretkru
margaretkru

Reputation: 2781

Try adding bootstrap.js in your imports after you import jquery:

import "../node_modules/jquery/dist/jquery.min.js";
import "../node_modules/bootstrap/dist/js/bootstrap.min.js";

Upvotes: 15

Related Questions