React Bootstrap Cards and CardDeck Components - responsive layout

user_1699434 0
Viewed 6962

I'm using React Bootstrap and am pulling data from an API using Axios. I'm trying to display the data from that API in bootstrap Card / CarDeck components. I have most of it working using the code below but I'm having problems with the layout.

I'd like to be able to have the card deck be responsive and show a flexible number of cards per row depending on the screen size. At the moment if there are lots of items in the response each card is ridiculously thin and can't be viewed. What is the correct way to do this?

import React, { useState, useEffect } from "react";
import CardDeck from "react-bootstrap/CardDeck";
import Card from "react-bootstrap/Card";
import axios from "axios";
import Container from "react-bootstrap/Container";

const CardColumns = () => {
  const [cardInfo, setData] = useState([]);
  console.log(cardInfo);

  useEffect(() => {
    axios
      .get(
        "https://webhooks.mongodb-realm.com/api/client/v2.0/app/cards-fvyrn/service/Cards/incoming_webhook/getAllCards"
      )
      .then((response) => {
        setData(response.data);
        console.log(response.data);
      })
      .catch(function (error) {
        console.log(error);
      });
  }, []);

  const renderCard = (card, index) => {
    return (
      <Card style={{ width: "18rem" }} key={index} className="box">
        <Card.Img variant="top" src="holder.js/100px180" src={card.image} />
        <Card.Body>
          <Card.Title>
            {index} - {card.manufacturer}
          </Card.Title>
          <Card.Text>{card.player}</Card.Text>
        </Card.Body>
      </Card>
    );
  };

  return <CardDeck>{cardInfo.map(renderCard)}</CardDeck>;
};
export default CardColumns;
react-bootstrap bootstrap-4 reactjs
3 Answers

In the end this is the solution I went with the below. Key I think were:

  1. Wrapping the cardDeck in <Container> and then wrapping the cards with <Col className="container-fluid mt-4">:

`

const renderCard = (card, index) => {
return (`
  <Col className="container-fluid mt-4">
    {/* <Card key={index} className="box"> */}
    <Card style={{ width: "18rem" }} key={index} className="box">
      <Card.Header>
        {card.brand} - {card.series}
      </Card.Header>
      <Card.Img variant="top" src={card.front_image} fluid />
      <Card.Body>
        <Card.Title>
          {card.player} (#
          {card.card_number.$numberDouble}) {card.variation}
        </Card.Title>
        {/* <Card.Text className="d-flex">{card.player}</Card.Text> */}
        {/* <Card.Text>{card.player}</Card.Text> */}
      </Card.Body>
      <ListGroup className="list-group-flush">
        <ListGroupItem>
          Print Run - {card.print_run.$numberDouble}
        </ListGroupItem>
        <ListGroupItem>Career Stage - {card.career_stage} </ListGroupItem>
        <ListGroupItem>For Trade - {card.forTrade}</ListGroupItem>
      </ListGroup>
      <Card.Footer className="text-muted">{card.team}</Card.Footer>
    </Card>
  </Col>

  //{/* </Col> */}
);
  };

  return (
<Container>
  <Button variant="primary">Filter By Brand</Button>{" "}
  <Button variant="primary">Filter By Player</Button>{" "}
  <Button variant="primary">Filter By Team</Button>
  <CardDeck>{cardInfo.map(renderCard)}</CardDeck>
</Container>
);`
user_16994340

Here are my suggestions for this issue:

  1. Each card should have a min-width to ensure that they do not shrink below a certain amount. So instead of width: "18rem" try min-width: "18rem". If your CSS is properly set up it should cause other cards to overflow to the next row.
  2. You can make use of media-queries or grid layout as mentioned to determine how many cards you want to show for various screen types based on their varying widths say see this link media-query-breakpoints react-bootstrap-grid
  3. Also you can try using CSS flexbox layout, I have an article on this CSS Flex Box
user_56208480

Try to use a col-'n' to each card instead of a fix width.

...
import { Card, Col } from 'react-bootstrap';
...
    <Col md="n"> // n must be your desired width like
        <Card key={index} className="box">
            ...
    </Col>

You can see more at: Bootstrap Card Sizing

user_104819750
Related