Bootstrap doesn't work properly in ReactJS application - reactjs

Question

I learn a course with bootstrap and to practice it I wanted to use it in ReactJS. The app is very small, is just a practice, not a real project.
I guess that I do something wrong, because I don't see on my screen the 4 columns. This is what I get
screenshot
So I created a react app
npx create-react-app my-app
and I installed bootstrap and use it.
npm install --save bootstrap
In index.js
import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
I have the App.js
import React, { Component } from 'react';
import './App.css';
import CardList from './componets/card-lists/card-list';
class App extends Component {
state = {
cards: []
}
componentDidMount() {
fetch('https://jsonplaceholder.typicode.com/users')
.then((response) => response.json())
.then(users => this.setState({ cards: users }))
.catch((error) => {
console.log('Fetch users error ', error)
})
}
render() {
return (
<div className="App">
{this.state.cards.map((card) => {
return <CardList card={card} key={card.id} />
})}
</div>
)
}
}
export default App;
And from here I pass props to card-list.js component.
const cardList = ({ card }) => {
return (
<div>
<div className="container">
<div className="row">
<div className="col-sm-4 col-md-4 col-lg-4 card-list">
<button className="btn btn-danger">click</button>
<h1>{card.name}</h1>
<p>{card.email}</p>
</div>
</div>
</div>
</div>
);
};
export default cardList;
In the css I have just a few lines:
.card-list {
background-color: yellow;
border: 1px solid red;
margin: 10px;
}
Someone please tell me, what I'm doing wrong?

Answer 1

You need to move divs with classes container and row to the App.js.
App.js
render() {
return (
<div className="App">
<div className="container">
<div className="row">
{this.state.cards.map(card => {
return <CardList card={card} key={card.id} />;
})}
</div>
</div>
</div>
);
}
Cardlist
const cardList = ({ card }) => {
return (
<div>
<div className="col-sm-4 col-md-4 col-lg-4 card-list">
<button className="btn btn-danger">click</button>
<h1>{card.name}</h1>
<p>{card.email}</p>
</div>
</div>
);
};
Also please not that Bootstrap grid system uses 12 column, and you are using 4 in classNames, so you have 12 /4 =3 columns, if you want to have 4 columns, you need to use 3 in your components like <div className="col-sm-3 col-md-3 col-lg-3 card-list">