next.js - React Bootstrap Card component is vertical when mapping data

Question

I am using React/NextJS and have created a component that is only showing the cards vertically on full-screen.

How can I have the Cards group horizontally rather than vertical when mapping the data (there are 4 inputs, and i'd like 3 per row.)

I have tried to use and but with no luck. Perhaps I am doing it in the wrong place?

Card Component:

import React from "react";
import { Card } from "react-bootstrap";

function VendorCard(props) {
  return (
    <Card style={{ width: "18rem" }}>
      <Card.Body>
        <Card.Title>{props.name}</Card.Title>
        <Card.Text>{props.country}</Card.Text>
      </Card.Body>
      <Card.Footer>
        <small className='text-muted'>{props.isActive}</small>
      </Card.Footer>
    </Card>
  );
}

export default VendorCard;

List Component:

function VendorList(vendor) {
  return (
    <div>
      <VendorCard
        key={vendor.id}
        name={vendor.name}
        country={vendor.country}
        classification={vendor.classification}
        riskLevel={vendor.riskLevel}
        signedDocuments={vendor.signedDocuments}
        isActive={vendor.isActive}
      />
    </div>
  );
}

export default VendorList;

HomePage:

import VendorList from "../components/vendor-list";
import vendors from "../dummy-data";
import { Container } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.css";

function Home() {
  return (
    <Container style={{ justifyContent: "center" }}>
      <div>{vendors.map(VendorList)}</div>
    </Container>
  );
}

export default Home;

Any assistance would be much appreciated!

标签： next.jsreact-bootstrap

Answer 1

In react-boostrap you must use the <Row> and <Col> components. Col with value 4 makes the card item get 1/3 of row space, then automatically accommodates 3 in each row.

Demo | Codesandbox

Home

import React from "react";
import VendorCard from "./VendorCard";
import vendors from "./dummy-data";
import { Container, Row } from "react-bootstrap";

function App() {
  return (
    <Container>
      <Row className="justify-content-md-center">
        {vendors.map((vendor) => (
          <VendorCard key={vendor.name} {...vendor} />
        ))}
      </Row>
    </Container>
  );
}

export default App;

VendorCard

import React from "react";
import { Card, Col } from "react-bootstrap";

function VendorCard(props) {
  return (
    <Col xs="4">
      <Card>
        <Card.Body>
          <Card.Title>{props.name}</Card.Title>
          <Card.Text>{props.country}</Card.Text>
        </Card.Body>
        <Card.Footer>
          <small className="text-muted">{props.isActive}</small>
        </Card.Footer>
      </Card>
    </Col>
  );
}

export default VendorCard;

Dummy data

module.exports = [
  {
    name: "Cassio",
    country: "Brazil",
    isActive: false
  },
  {
    name: "Paul",
    country: "Brazil",
    isActive: false
  },
  {
    name: "Ben",
    country: "Brazil",
    isActive: false
  },
  {
    name: "Jonnas",
    country: "Brazil",
    isActive: false
  }
];