CODEWITHSUNDEEP
reactjsbootstrap-4
dragon
dragon

Reputation: 1274

Bootstrap doesn't work properly in ReactJS application

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?

Upvotes: 0

Views: 265

Answers (1)

SuleymanSah
SuleymanSah

Reputation: 17888

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">

Upvotes: 1

Related Questions