CODEWITHSUNDEEP
cssreactjsbootstrap-4
Matija Milicevic
Matija Milicevic

Reputation: 41

How to always display 3 cards in row

How to always display 3 card in row on xs,sm,md,lg,xl devices? Now when I minimize the screen it breaks into another row. Thanks

function Cards() {
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>
);

}

Upvotes: 0

Views: 2026

Answers (2)

Javaid
Javaid

Reputation: 375

You can use col-4 instead of col mb-4

function Cards() {
     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>
);

Upvotes: 2

Viet
Viet

Reputation: 12807

You can use React Bootstrap grid system

  <Container>
    <Row>
      <Col xs={4}>One of three columns</Col>
      <Col xs={4}>One of three columns</Col>
      <Col xs={4}>One of three columns</Col>
    </Row>
  </Container>

Create a row inside a container, each column in the row will take 4/12 (=1/3) length of the Row. Since we specified xs={4} the column will always take 1/3 on bigger screen size. See working sample: https://codesandbox.io/s/react-bootstrap-grid-example-forked-g18st?file=/src/index.js. Here I mapped each item to an element inside , after three items it will automatically transfer to a new line and repeat.

Upvotes: 1

Related Questions