VWang VWang - 10 months ago 61
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


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:


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() {
<a href="#"> grood </a>
<NavItem eventKey={2} href="#"> For Eateries </NavItem>

export default MyNavbar;


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

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download