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?

Answer 1

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, ie

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.

Answer 2

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 eg 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

Answer 3

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