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