My app does not recognize react-bootstrap styles - reactjs

Question

I am trying to make an app with react. I want to use react bootstrap. I downloaded bootstrap and react bootstrap in the project.
`
npm i bootstrap#5.2.3
`
`
npm install react-bootstrap bootstrap
`
this is my package.json:
enter image description here
I have imported the css in the App.js, I have also tried to import it in the index.js, but it still doesn't recognize it.
enter image description here
I have copied the link in the index.html of the public folder
enter image description here
when importing react bootstrap components I have done the imports for each component, but it doesn't recognize the styles, my 'card' looks like this : enter image description here
enter image description here
I don't know if I'm missing some import, or some npm to do. I have changed the imports of site a thousand times and it still does not work. does anyone know what could be happening?

Answer 1

1.) install bootstrap from npm package
npm install bootstrap
2.) Open your index file (Index.js) and have these two lines there like so
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import 'bootstrap/dist/css/bootstrap.min.css'; //<-- Add this
import 'bootstrap/dist/js/bootstrap.bundle.min'; // <-- Add this
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
reportWebVitals();
3.) Add button to see if Bootstrap button does show in App.js
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
<a className="btn btn-primary"
data-bs-toggle="collapse"
href="#collapseExample"
role="button"
aria-expanded="false"
aria-controls="collapseExample">
Bootstrap button
</a>
</header>
</div>
);
}
export default App;
4.) Run app with npm start and see if your bootstrap has been installed and ready to go. My case