Reactstrap Bootstrap Navbar not working in react app

Question

I created a react app with 'create react-app'.

I am trying now to add a navbar from Reactstrap. I do copy-paste from Reactstrap (I am adding this as one react component) website:

import React from 'react';
import {
  Collapse,
  Navbar,
  NavbarToggler,
  NavbarBrand,
  Nav,
  NavItem,
  NavLink,
  UncontrolledDropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem } from 'reactstrap';

export default class Example extends React.Component {
  constructor(props) {
    super(props);

    this.toggle = this.toggle.bind(this);
    this.state = {
      isOpen: false
    };
  }
  toggle() {
    this.setState({
      isOpen: !this.state.isOpen
    });
  }
  render() {
    return (
      <div>
        <Navbar color="light" light expand="md">
          <NavbarBrand href="/">reactstrap</NavbarBrand>
          <NavbarToggler onClick={this.toggle} />
          <Collapse isOpen={this.state.isOpen} navbar>
            <Nav className="ml-auto" navbar>
              <NavItem>
                <NavLink href="/components/">Components</NavLink>
              </NavItem>
              <NavItem>
                <NavLink href="https://github.com/reactstrap/reactstrap">GitHub</NavLink>
              </NavItem>
              <UncontrolledDropdown nav inNavbar>
                <DropdownToggle nav caret>
                  Options
                </DropdownToggle>
                <DropdownMenu right>
                  <DropdownItem>
                    Option 1
                  </DropdownItem>
                  <DropdownItem>
                    Option 2
                  </DropdownItem>
                  <DropdownItem divider />
                  <DropdownItem>
                    Reset
                  </DropdownItem>
                </DropdownMenu>
              </UncontrolledDropdown>
            </Nav>
          </Collapse>
        </Navbar>
      </div>
    );
  }
}

and it does not work. I am getting this in my react app:

I had similar problems with Bootstrap, React and Navbar before but I am really surprised it is happening in Reactstrap. Do you know why is it so?

you need to import the css `import 'bootstrap/dist/css/bootstrap.min.css';` as stated in the docs https://reactstrap.github.io/ — Sebastiaan van Arkens, Feb 04 '19 at 16:29
Thanks! This works. I added bootstrap too. I was not aware I should do it additionally while using Reactstrap. Thanks for the help! — Talita, Feb 04 '19 at 16:34

score 18 · Accepted Answer · edited May 02 '19 at 10:39

18

You need also bootstrap, and react-dom:

npm install --save bootstrap
npm install --save reactstrap react react-dom

import 'bootstrap/dist/css/bootstrap.css';
import { Button } from 'reactstrap';

edited May 02 '19 at 10:39

Matthijs

2,483
5
22
33

answered May 02 '19 at 10:01

Andrew Kazanin

196
1
2

score 6 · Answer 2 · edited Apr 17 '20 at 09:52

6

You should make sure you have

import 'bootstrap/dist/css/bootstrap.css';

imported into the index.js file created automatically when you create react app.

edited Apr 17 '20 at 09:52

Simon.S.A.

6,240
7
22
41

answered Apr 16 '20 at 21:18

Josh Eshleman

61
1
3

score 2 · Answer 3 · answered Mar 31 '19 at 12:08

2

You can do this.

import { NavLink } from 'reactstrap';
import { NavLink as ReactLink } from 'react-router-dom';

<NavLink tag={ReactLink} to="/home" activeClassName="active" >Home</NavLink>

answered Mar 31 '19 at 12:08

cptiwari20

442
1
7
18

score 0 · Answer 4 · answered Feb 15 '21 at 15:17

While it's not documented, you have to use as follows with react-router:

<NavLink tag={Link} to="/somewhere">

IE:

import React from 'react';
import { Link } from 'react-router';
import { NavLink } from 'reactstrap';

const Example = (props) => {
  return (
    <NavLink tag={Link} to="/somewhere">
      {props.item.name}
    </NavLink>
  );
};

score 0 · Answer 5 · answered Aug 20 '23 at 13:06

just install

npm install bootstrap
npm install jquery

then import them in index.js

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

it worked for me while i am fail to toggle.

for more fetures you can install popper as well

Reactstrap Bootstrap Navbar not working in react app

5 Answers5