Bootstrap in your React project

Bootstrat has a predefine css code wich save developers more time. Knowing how to integrate bootstrap in your project might save you some time for css make up.

First navigate to React Js bootstrap in you browse

Installation

The best way to consume React-Bootstrap is via the npm package which you can install with npm (or yarn if you prefer).

Run the follow in your terminal :   
       npm install react-bootstrap bootstrap.

Stylesheets

Next depending on the lasts version of bootstrat you want to use , you insert it in your app

Public
index.html
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous"
/>

de After running you server npm start you must import bootstrap in the component where you are planning to use bootstrap feature. A best practice is to import individual components like: react-bootstrap/Button rather than the entire library. Doing so pulls in only the specific components that you use, which can significantly reduce the amount of code you end up sending to the client. Like in App : import Button from 'react-bootstrap/Button';

Or import { Button } from 'react-bootstrap';

Now if you add bootstrap button syntax from https://react-bootstrap.github.io/components/buttons/ it should work as you want it .