CODEWITHSUNDEEP
cssreactjsreact-bootstrap
Mat
Mat

Reputation: 129

How to align react Boostrap cards

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:

enter image description here

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.

enter image description here

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.

Upvotes: 0

Views: 618

Answers (1)

thedavidhackett
thedavidhackett

Reputation: 21

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;

Upvotes: 1

Related Questions