title: React Bootstrap Cards and CardDeck Components - responsive layout
body: <p>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.</p>
  <p>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?</p>
  <pre><code>import React, { useState, useEffect } from &quot;react&quot;;
  import CardDeck from &quot;react-bootstrap/CardDeck&quot;;
  import Card from &quot;react-bootstrap/Card&quot;;
  import axios from &quot;axios&quot;;
  import Container from &quot;react-bootstrap/Container&quot;;
  
  const CardColumns = () =&gt; {
    const [cardInfo, setData] = useState([]);
    console.log(cardInfo);
  
    useEffect(() =&gt; {
      axios
        .get(
          &quot;https://webhooks.mongodb-realm.com/api/client/v2.0/app/cards-fvyrn/service/Cards/incoming_webhook/getAllCards&quot;
        )
        .then((response) =&gt; {
          setData(response.data);
          console.log(response.data);
        })
        .catch(function (error) {
          console.log(error);
        });
    }, []);
  
    const renderCard = (card, index) =&gt; {
      return (
        &lt;Card style={{ width: &quot;18rem&quot; }} key={index} className=&quot;box&quot;&gt;
          &lt;Card.Img variant=&quot;top&quot; src=&quot;holder.js/100px180&quot; src={card.image} /&gt;
          &lt;Card.Body&gt;
            &lt;Card.Title&gt;
              {index} - {card.manufacturer}
            &lt;/Card.Title&gt;
            &lt;Card.Text&gt;{card.player}&lt;/Card.Text&gt;
          &lt;/Card.Body&gt;
        &lt;/Card&gt;
      );
    };
  
    return &lt;CardDeck&gt;{cardInfo.map(renderCard)}&lt;/CardDeck&gt;;
  };
  export default CardColumns;
  </code></pre>