React JS Bootstrap Column layout not working

October 24, 2022

I have a simple card using Mui mui/material. I want to layout the content using bootstrap col-xs-12 col-sm-6 col-md-3. I’ve already installed bootstrap to my project using npm install –save bootstrap, however the columns layout is not working. Can someone let me know if I did something wrong?

<div className="container gallery-container">
  <div className="tz-gallery">
    <div className="row">
      <div className="col-xs-12 col-sm-6 col-md-3">
        {products.map((item) => (
          <Card>
            <CardActionArea>
              <CardMedia
                component="img"
                height="140"
                image={item.imageUrl}
                alt="green iguana"
              />
              <CardContent>
                <Typography gutterBottom variant="h5" component="div">
                  {item.pricePerUnit}
                </Typography>
                <Typography variant="body2" color="text.secondary">
                  {item.productDescription}
                </Typography>
              </CardContent>
            </CardActionArea>
            <CardActions>
              <Button size="small" color="primary">
                Add to Cart
              </Button>
            </CardActions>
          </Card>
        ))}
      </div>
    </div>
  </div>
</div>

Thank you so much.

>Solution :

If you use MUI for your react.js project, you don’t need to use bootstrap for column layout.
I recommend you to use Grid system supported by MUI instead of Bootstrap.
please check this one.
https://mui.com/material-ui/react-grid/