-2

I have 6 cards now and I want to align 3 cards on the row so we will have 2 rows total.

My code is here https://codesandbox.io/s/card-tykr9?file=/src/App.js

Can someone stop by for help?

Sunny
  • 123
  • 1
  • 3
  • 13

2 Answers2

1

You can use flexbox instead of grid layout to achieve the same result.

import React from "react";
import "./styles.css";

import {
  Card,
  CardImg,
  CardText,
  CardBody,
  CardTitle,
  CardFooter
} from "reactstrap";

const css = {
  grid: {
    display: "flex",
    flexWrap: "wrap",
    justifyContent: "center"
  }
};

export default function App() {
  const data = [
    {
      avatar: "https://placehold.it/269x200",
      text: "Last updated 1 ago",
      title: "3D",
      cardText: "web applicatio"
    },
    {
      avatar: "https://placehold.it/269x200",
      text: "Last updated 4 ago",
      title: "3D",
      cardText: "web applicatio"
    },
    {
      avatar: "https://placehold.it/269x200",
      text: "Last updated 6 ago",
      title: "3D",
      cardText: "web applicatio"
    },
    {
      avatar: "https://placehold.it/269x200",
      text: "Last updated 1 ago",
      title: "3D",
      cardText: "web applicatio"
    },
    {
      avatar: "https://placehold.it/269x200",
      text: "Last updated 4 ago",
      title: "3D",
      cardText: "web applicatio"
    },
    {
      avatar: "https://placehold.it/269x200",
      text: "Last updated 6 ago",
      title: "3D",
      cardText: "web applicatio"
    },
    {
      avatar: "https://placehold.it/269x200",
      text: "Last updated 4 ago",
      title: "3D",
      cardText: "web applicatio"
    },
    {
      avatar: "https://placehold.it/269x200",
      text: "Last updated 6 ago",
      title: "3D",
      cardText: "web applicatio"
    }
  ];
  return (
    <div style={css.grid}>
      {data.map(({ avatar, title, text, cardText }, index) => (
        <div style={{ margin: 0, width: "33%" }}>
          <Card style={{ margin: 5 }}>
            <CardImg top width="100%" src={avatar} alt="Card image cap" />
            <CardBody style={{ padding: 15 }}>
              <CardTitle style={{ fontWeight: "bold" }}>{title}</CardTitle>
              <CardText>{cardText}</CardText>
            </CardBody>
            <CardFooter style={{ padding: 15 }}>
              <small className="text-muted">{text}</small>
            </CardFooter>
          </Card>
        </div>
      ))}
    </div>
  );
}

Code Sandbox

Ketan Ramteke
  • 10,183
  • 2
  • 21
  • 41
  • thanks for your help. However, how can I retrieve an image from the local folder into the "avatar" instead of the link? – Sunny Nov 17 '20 at 20:07
  • You can save the required images in the project folder and provide the relative path of those images in place of avatar link. – Ketan Ramteke Nov 17 '20 at 20:13
  • I have tried but it does not work, could you have a look here https://codesandbox.io/s/card-forked-fbt1f?file=/src/App.js ? – Sunny Nov 17 '20 at 20:15
  • save your images into the public folder, there seems to be some problem with reactjs environment variable or something, also we have to remove `````` from ```index.js``` – Ketan Ramteke Nov 17 '20 at 21:07
  • Working example: https://codesandbox.io/s/card-forked-xlym6?file=/src/App.js – Ketan Ramteke Nov 17 '20 at 21:11
0

Check out this code. I implement this code in bootstrap4.

    <div class="container">
    <div class="row ">
        <h4>we can use "card-deck" for same height and "card-group" to remove margins and padding between cards</h4>
        <div class="card col-xl-4 col-lg-4 col-md-4 col-sm-4 col-4 m">
            <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
        </div>

        <div class="card col-xl-4 col-lg-4 col-md-4 col-sm-4 col-4">
            <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
        </div>

        <div class="card col-xl-4 col-lg-4 col-md-4 col-sm-4 col-4">
            <div class="card-body">
                <h5 class="card-title" id="harry">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
        </div>

        <div class="card col-xl-4 col-lg-4 col-md-4 col-sm-4 col-4">
            <div class="card-body">
                <h5 class="card-title" id="harry">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
        </div>

        <div class="card col-xl-4 col-lg-4 col-md-4 col-sm-4 col-4">
            <div class="card-body">
                <h5 class="card-title" id="harry">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
        </div>

        <div class="card col-xl-4 col-lg-4 col-md-4 col-sm-4 col-4">
            <div class="card-body">
                <h5 class="card-title" id="harry">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
        </div>
    </div>
</div>

Result: Output of the above code

AhsanRao
  • 13
  • 5