How do I use Bootstrap grid with components in react?

Question

I want to get at least 2 cards on the same row but since the data is getting mapped one by one, I have no idea how to do so. I am using a custom component named 'Content' and returning data here

import React from "react";
import { Card, CardGroup, Col, Row } from "react-bootstrap";
import { ListGroup, ListGroupItem } from "react-bootstrap";
const Content=({name, image, type, vegan, cuisines})=>{
    
    return(
        <div>
        <CardGroup>
        <Col xs={12} sm={6} md={4} lg={4}>
            <Card>
                <Card.Img variant="top" src={image} />
                <Card.Body>
                    <Card.Title>{name}</Card.Title>
                    <Card.Text>
                        <ListGroup>
                            <ListGroupItem>Type: {type}</ListGroupItem>
                            <ListGroupItem>Vegan: {vegan}</ListGroupItem>
                            <ListGroupItem>Cuisines: {cuisines.cuisines.join(", ")}</ListGroupItem>
                        </ListGroup>
                    </Card.Text>
                </Card.Body>
            </Card>
        </Col>
        </CardGroup>
          </div>
    )
}
export default Content

FlushBG · Accepted Answer · 2022-01-05 21:46:25Z

1

I believe you aren't using the Row component to wrap your columns.
Try replacing <CardGroup> with <Row> as shown in this section of the docs.

answered Jan 5, 2022 at 21:46

FlushBG

3011 gold badge3 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

SahilN Over a year ago

I tried that too but it won't work

FlushBG Over a year ago

@SahilN I don't see a map function in here. Is the <Content> component supposed to represent a single card, or the entire collection of cards?

SahilN Over a year ago

Single card. As the api limit is 10, Content gets called 10 times on the page

FlushBG Over a year ago

In that case, leave only the <Card> tree inside your <Content> component, and then put all <Content> components inside a <Row> or a <CardGroup>

SahilN Over a year ago

Yes! I did that and it worked! Thank you

Collectives™ on Stack Overflow

How do I use Bootstrap grid with components in react?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related