Is there a way to ensure that 3 cards are always displayed in a row on all device sizes? Currently, the layout breaks into another row when the screen is minimized. Thank you!
function DisplayCards() {
const [items, setItems] = useState([{}, {}, {}, {}, {}, {}]);
return (
<div class="row row-cols-1 row-cols-md-3 ">
{items.map((item, key) => (
<div class="col mb-4">
<Card className="nesto ">
<Card.Img variant="top" src="holder.js/100px160" />
<Card.Body>
<Card.Title>Card title</Card.Title>
<Card.Text>
This is a wider card with supporting text below
as a natural lead-in to additional content. This
content is a little bit longer.
</Card.Text>
</Card.Body>
<Card.Footer>
<small className="text-muted">
Last updated 3 mins ago
</small>
</Card.Footer>
</Card>
</div>
))}
</div>
);
}