VWang VWang - 4 months ago 29
CSS Question

Unable to apply Bootstrap or React-Bootstrap styles to app created with create-react-app

As the title says, I followed the installation steps as per the Bootstrap and React-Bootstrap docs after using

create-react-app
:

npm install --save react-bootstrap bootstrap@4.0.0-alpha.6


Then included a link to the bootstrap CDN in index.html just in case:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">


Here is the very beginning of my react app which does not apply the styles properly:

MyNavbar.jsx:

import React, { Component } from 'react';
import {Navbar} from 'react-bootstrap';
import {Nav} from 'react-bootstrap';
import {NavItem} from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.css';

class MyNavbar extends Component {
render() {
return(
<div>
<Navbar>
<Navbar.Header>
<Navbar.Brand>
<a href="#"> grood </a>
</Navbar.Brand>
</Navbar.Header>
<Nav>
<NavItem eventKey={2} href="#"> For Eateries </NavItem>
</Nav>
</Navbar>
</div>
)
}
}

export default MyNavbar;


App.js:

import React, { Component } from 'react';
import MyNavbar from './MyNavbar.jsx'
import 'bootstrap/dist/css/bootstrap.css';

class App extends Component {
render() {
return (
<div className="App">
<MyNavbar />
</div>
);
}
}

export default App;


Both MyNavbar and App are in the same src file

Answer Source

react-bootstrap is build for Bootstrap 3 - not 4.

Install package bootstrap 3 into your project and import css from there.

There is a project for React & Bootstrap 4 though: reactstrap.