Adding Bootstrap Navbar to create-react-app project

Question

I have a brand new project created with create-react-app. I have added bootstrap:

npm install --save bootstrap@3

And I've imported it at my root index.js:

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

Now I've added the Navbar example from the Bootstrap documentation to the top of the default App.js jsx and I get an unformatted mess.

I know that bootstrap is working in this file because I also added a button that is being styled properly via bootstrap. But the navbar isn't working at all.

Here is my App.js:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <nav className="navbar navbar-toggleable-md navbar-light bg-faded">
          <button className="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span className="navbar-toggler-icon"></span>
          </button>
          <a className="navbar-brand" href="#">Navbar</a>
          <div className="collapse navbar-collapse" id="navbarNav">
            <ul className="navbar-nav">
              <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="#">Features</a>
              </li>
              <li className="nav-item">
                <a className="nav-link" href="#">Pricing</a>
              </li>
              <li className="nav-item">
                <a className="nav-link disabled" href="#">Disabled</a>
              </li>
            </ul>
          </div>
        </nav>
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <button className="btn">Button</button>
      </div>
    );
  }
}

export default App;

issue can be related to that you are using v4 bootstrap example with bootstrap v3. — bennygenel
– bennygenel, Commented Sep 5, 2017 at 19:06
If you can't recreate the problem in a JSFiddle then it's more than likely something in your setup. What happens when you inspect the navbar? Is the html even showing up? Create-react-app uses service workers for caching, so you may need to restart your server and do a hard refresh to see your changes. — Chase DeAnda
– Chase DeAnda, Commented Sep 5, 2017 at 19:51
@bennygenel This is the correct answer. As soon as I updated my npm package to the latest ([email protected]) it worked. If you'd like to reiterate this as an answer I'll accept it. — MarkyDD
– MarkyDD, Commented Sep 5, 2017 at 20:15

bennygenel · Accepted Answer · 2017-09-05 20:21:24Z

2

Problem is using Bootstrap v3 with Bootstrap v4 example. Updating the code with v3 Navbar or the bootstrap version to v4 should solve the problem.

answered Sep 5, 2017 at 20:21

bennygenel

24.8k7 gold badges68 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mikael · Accepted Answer · 2017-09-05 19:13:31Z

0

Don't use Bootstrap that way. Use react-bootstrap instead. Here's a link:

React Bootstrap

An example code:

const NavDropdownExample = React.createClass({
  handleSelect(eventKey) {
    event.preventDefault();
    alert(`selected ${eventKey}`);
  },

  render() {
    return (
      <Nav bsStyle="tabs" activeKey="1" onSelect={this.handleSelect}>
        <NavItem eventKey="1" href="/home">NavItem 1 content</NavItem>
        <NavItem eventKey="2" title="Item">NavItem 2 content</NavItem>
        <NavItem eventKey="3" disabled>NavItem 3 content</NavItem>
        <NavDropdown eventKey="4" title="Dropdown" id="nav-dropdown">
          <MenuItem eventKey="4.1">Action</MenuItem>
          <MenuItem eventKey="4.2">Another action</MenuItem>
          <MenuItem eventKey="4.3">Something else here</MenuItem>
          <MenuItem divider />
          <MenuItem eventKey="4.4">Separated link</MenuItem>
        </NavDropdown>
      </Nav>
    );
  }
});

ReactDOM.render(<NavDropdownExample />, mountNode);

answered Sep 5, 2017 at 19:13

Mikael

5649 silver badges24 bronze badges

2 Comments

MarkyDD Over a year ago

I see this documented in the create-react-app guide, but I'd like to know why this is preferred. I find for readability, sticking to well-known conventions like using bootstrap in className is better. Also, when bootstrap updates, we can't be sure that the creators of react-bootstrap will keep it up to date.

Mikael Over a year ago

From my experience, using className simply don't work. It's also interesting to have in mind that there is some JS related to collapsing things, like menus, and showing modals.

Collectives™ on Stack Overflow

Adding Bootstrap Navbar to create-react-app project

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related