CODEWITHSUNDEEP
reactjstwitter-bootstrapreact-bootstrap
SahilN
SahilN

Reputation: 65

How do I use Bootstrap grid with components in react?

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

Upvotes: 0

Views: 642

Answers (1)

FlushBG
FlushBG

Reputation: 281

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.

Upvotes: 1

Related Questions