Bootstrap is not working in create-react-app

Question

I am trying to use this nav bar while it seems classes are not working: I did all the steps like it was described in the documentation. I've imported it in the index.js:

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';


ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

Then I tried to implement nav bar with its classes but seems very ugly and not working at all.:

<nav className="navbar navbar-expand-lg navbar-dark navbar-custom fixed-top">
      <div className="container">
        <a className="navbar-brand" href="#">Start Bootstrap</a>
        <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span className="navbar-toggler-icon"></span>
        </button>
        <div className="collapse navbar-collapse" id="navbarResponsive">
          <ul className="navbar-nav ml-auto">
            <li className="nav-item">
            <Link to="/">Home<span classNameName="sr-only">(current)</span></Link>
            </li>

           <li classNameNameName="nav-item">
       <Link to="/signin">Sign In</Link>
      </li>
      <li classNameNameName="nav-item">
      <Link to="/signup">Sign Up</Link>
      </li>
          </ul>
        </div>
      </div>
    </nav>

As you see in the image it was not the real nav bar that should be visible. Another point is that after generating this app there is no index.html file at all. So the only place where I import bootstrap is index.js How can I fix this to make nav bare work correctly with bootstrap?

please note that the native bootstrap use jquery, and jquery and react doesn't work together well interms of `dom` manipulations. You can try instead [React-Bootstrap](https://react-bootstrap.github.io/) or [Reactstrap](https://reactstrap.github.io/) — threeFatCat, Jul 13 '18 at 10:40
Should I use the 3rt library with materialize css as well? Since this should be a very large project we don't want to add too many libraries. — , Jul 13 '18 at 10:43
that's the downside. I read feedbacks that yeah libraries add weight to the whole code. Regarding on materialize css, that depends on the requirements and the preference but the last time I worked with Reactstrap it is using Bootstrap 4 which you can already modify/create your own css class to use it globally using `sass` or `scss`. Back to your question, I believe the navbar it didn't work well because jquery is missing and bootstrap rely on it also for positioning. — threeFatCat, Jul 13 '18 at 10:57

score 3 · Answer 1 · answered Jul 13 '18 at 11:15

Since you have installed the bootstrap package in you app module, no need to give the relative path there. you can import it by just below..

index.js

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

OR

you can import the bootstrap file in you index.css file, i.e.

index.css

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

or

import '~node_modules/bootstrap/dist/css/bootstrap.min.css';

Now you are adding a css file, so make sure you have configured a css loader in webpack configuration.

I am also trying this css file working well but bootstrap js not.so nav bar doesn't work such collapse or dropdown... — Rakibul, Feb 11 '19 at 18:22

score 2 · Answer 2 · answered Jul 13 '18 at 12:16

install bootstrap npm and install react-dom if not install. command are here

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

now add css file in your_project_name->public>index.html

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

import bootstrap module which you required in your component e.g is below

import { Button,Navbar,Nav,NavItem,NavDropdown,MenuItem } from 'react-bootstrap';

if you need a video tutorial here is link react-js bootstrap video tutorial

score 0 · Answer 3 · answered Jan 13 '22 at 16:18

0

Alternate option, I'm using Original Bootstrap Framework this way.

Add bootstrap by npm install bootstrap

in App.js imports css and js

import 'bootstrap/dist/css/bootstrap.css';
import "bootstrap"; // <-- JS File

answered Jan 13 '22 at 16:18

GMKHussain

3,342
1
21
19

Bootstrap is not working in create-react-app

3 Answers3