2

Hi I am very new to coding with React and Bootstrap so please feel free to baby me with the explanation.

I have created a webpage using React and everything has the correct layout. I now want to add one final last section which will involve me using Bootstrap cards. I tried installing bootstrap via npm and then using the import bootstrap but it messes up the whole of my layout.

I have read through stackoverflow to find a solution and found the following article:

Import bootstrap but only into one component

I have read through it but I still do not understand what to do once customising the folder. How do I used that folder in bootstrap without using npm install.

I also found another article that said I should wrap the @imports but I dont understand where the @imports are or what less is?

Please help.... Thank you in advance :)

Maya Wright
  • 77
  • 3
  • 9

2 Answers2

0

react-bootstrap and react-strap are both libraries that can help with using Bootstrap with your react app, but neither provide the bootstrap CSS out of the box. This is outlined in the installation guides. For example, if you wanted the minimal version of Bootstrap you can perform the following commands at the command line:

npm install bootstrap

And then add this line to your index.js to activate the styles with either of the above libraries:

...
import 'bootstrap/dist/css/bootstrap.min.css';
...

The problem I have found ( and that I believe OP is running against) is that Bootstrap will superimpose itself over other styles, causing conflicts or overrides that may not be wanted (esp. if you are receiving most of your functionality from another library).

Solution: Pick / import the component sass

In my case, I wanted to use the bootstrap progress bar. I did the following to pick out only the Bootstrap styles I wanted.

I went to node_modules/bootstrap/scss/bootstrap.scss and identified a few modules that I anticipated would be dependent for the progress bar. Note the order of the imports in this file, that is important; if you receive errors in the build process below, add / remove dependencies until you identify the minimal working dependencies.

From there, I made a scss style file in my src folder. This is what my styles.scss file looked like:

# ~ is relative to `/src/node_modules`
@import "~bootstrap/scss/_functions";
@import "~bootstrap/scss/_variables";
@import "~bootstrap/scss/_mixins";
@import "~bootstrap/scss/_progress";
@import "~bootstrap/scss/_utilities";

Next, I installed node_sass (npm told me I ndded version ^4):

npm install node-sass@^4.0.0

Lastly, import the sass file into app.js:

...
import 'styles.scss';
...

And the component should be styled when you next run npm!

Additional readings / where I drew inspiration for this answer:

Harley Lang
  • 2,063
  • 2
  • 10
  • 26
  • the question was how to use it in only one component, i think OP meant preventing style leakage to other components any solution for that ? – Shamseer Ahammed Jun 30 '21 at 07:54
-2
npm install react-bootstrap bootstrap

create js file your component, let's say myComponent.js

 // you can import and use specific bootstrap component
import { Button } from 'react-bootstrap';

Good Luck :)

Besufkad Menji
  • 1,433
  • 9
  • 13