Create-react-app: Document how to add React Bootstrap

[gaearon]

This comes up fairly often.

Unlike React Router, it is not immediately obvious how to add React Bootstrap because it needs its own CSS. So I think it’s worth documenting this here (even though we won’t document adding e.g. the router) because this is a super common use case for beginners.

[manavsehgal]

Here's how I got React Bootstrap working at https://github.com/manavsehgal/react-eshop (Create React App scaffolded app).

Step 1. Install React Bootstrap and Bootstrap from NPM.

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

Step 2. Import Bootstrap CSS and optionally Bootstrap theme CSS in the index.js file.

import './index.css';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';

Step 3. Import required React Bootstrap components within App.js file or your custom component file.

import React, { Component } from 'react';
import { Navbar, Jumbotron, Button } from 'react-bootstrap';

Now you are ready to use the imported React Bootstrap components within your component hierarchy defined in the render method. Here is an example App.js redone using React Bootstrap.

[gaearon]

Nice, would you like to contribute this to template/README.md?

[manavsehgal]

Thx, will do.

[tonyfreelance]

Thanks @manavsehgal! It worked smoothly!

[Oxyrus]

The provided App.js doesn't show how to work with bootstrap anymore.

[tbillington]

@Oxyrus I think it's on purpose, there is a section of the readme that covers how to add it.

[gaearon]

Adding Bootstrap

[ShashankaNataraj]

@gaearon How about yarn instructions? Are they reqd? Or just overkill?

[gaearon]

@ShashankaNataraj I don't think we need Yarn instructions everywhere. I would suggest any Yarn user to also learn the same npm commands.

[camachon18]

Extremely helpful for beginners! Thanks @manavsehgal 👍

[MuneebJS]

greate work like a charm...
thank you so much

[Meghajit]

Wow..It worked

[Atlas7]

Life saver. Thank you! This Medium article has also helped me out with Webpack config in conjunction to react-bootstrap setup.

[ldelossa]

Can anyone help me (noob here) understand why the css imports have to be done in index.js ? Why does it not work in App.js?

[saranshbansal]

The method described by @manavsehgal only works for bootstrap v3 not v4.
Can anyone provide a solution to run bootstrap v4 with react 16?

[john-src]

@saranshbansal I'd recommend locking bootstrap on 3.3.7 to unblock yourself

[ghost]

Module not found: Can't resolve 'bootstrap/dist/css/bootstrap-theme.css' in 'C:\reactApps\loginpage\src'

[kaoussi]

@Arpeetgautam that's because Bootstrap version four doesn't have the bootstrap theme css included when downloaded via npm

[andrewlamyw]

The method described by @manavsehgal only works for bootstrap v3 not v4.
Can anyone provide a solution to run bootstrap v4 with react 16?

The documentation has been updated with Bootstrap v4
https://facebook.github.io/create-react-app/docs/adding-bootstrap