How to align react Boostrap cards - css

Question

I have cards with different images and texts that make them bigger/smaller, I couldn't find any React-Bootstrap specific answer, but every css and normal Bootstrap alternative that i tried didn't work. The only thing that put a patch in the problem is setting a max height in the cards, but still the cards that have a larger image or text have their image higher or lower and is really bad for rows that have some medium sized images and one larger one. For example:
I tried adapting the top three answers of this answer: Link and it didn't work, for example using d-flex align-items-stretch
import React from "react";
import Product from "./product";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
const Flexbox = (props) => {
return (
<Container>
<Row>
<Col className="d-flex align-items-stretch">
<Product product={props.productList[0]}></Product>
</Col>
<Col className="d-flex align-items-stretch">
<Product product={props.productList[1]}></Product>
</Col>
<Col className="d-flex align-items-stretch">
<Product product={props.productList[2]}></Product>
</Col>
</Row>
</Container>
);
};
export default Flexbox;
The result is every card having their own size.
Using h-100 nothing changes, container code:
import React from "react";
import Product from "./product";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
const Flexbox = (props) => {
return (
<Container fluid className="content-row">
<Row>
<Col>
<Product product={props.productList[0]}></Product>
</Col>
<Col>
<Product product={props.productList[1]}></Product>
</Col>
<Col>
<Product product={props.productList[2]}></Product>
</Col>
</Row>
</Container>
);
};
export default Flexbox;
Card code:
import React from "react";
import "../App.css";
import "../stylesheets/product.css";
import Rating from "./rating";
import Card from "react-bootstrap/Card";
const Product = (props) => {
console.log(props.product);
return (
<div>
<Card className="card rounded shadow-sm border-0 h-100">
<Card.Body className="card-body p-4">
<img src={props.product.img} class="img-fluid d-block mx-auto mb-3" />
</Card.Body>
<Card.Footer>
<h5>{props.product.name}</h5>
<Rating></Rating>
</Card.Footer>
</Card>
</div>
);
};
export default Product;
And using d.flex and flex-fill also nothing changes, container:
import React from "react";
import Product from "./product";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
const Flexbox = (props) => {
return (
<Container fluid>
<Row>
<Col className="col-sm d-flex">
<Product product={props.productList[0]}></Product>
</Col>
<Col className="col-sm d-flex">
<Product product={props.productList[1]}></Product>
</Col>
<Col className="col-sm d-flex">
<Product product={props.productList[2]}></Product>
</Col>
</Row>
</Container>
);
};
export default Flexbox;
Card:
import React from "react";
import "../App.css";
import "../stylesheets/product.css";
import Rating from "./rating";
import Card from "react-bootstrap/Card";
const Product = (props) => {
console.log(props.product);
return (
<div>
<Card className="card rounded shadow-sm border-0">
<Card.Body className="p-4 flex-fill">
<img src={props.product.img} class="img-fluid d-block mx-auto mb-3" />
</Card.Body>
<Card.Footer>
<h5>{props.product.name}</h5>
<Rating></Rating>
</Card.Footer>
</Card>
</div>
);
};
export default Product;
I'm losing my mind and i don't know what to do, i tried everything and nothing changes.

Answer 1

I think if you remove the div around the card and add back h-100 as a class it should align:
const Product = (props) => {
console.log(props.product);
return (
<Card className="card rounded shadow-sm border-0 h-100">
<Card.Body className="p-4 flex-fill">
<img src={props.product.img} class="img-fluid d-block mx-auto mb-3" />
</Card.Body>
<Card.Footer>
<h5>{props.product.name}</h5>
<Rating></Rating>
</Card.Footer>
</Card>
);
};
export default Product;