CODEWITHSUNDEEP
reactjsbootstrap-4react-bootstrap
Mahmoud Nafea
Mahmoud Nafea

Reputation: 117

Bootstrap card in react

I'm suffering from implementing bootstrap in react. I set up bootstrap4 at the beginning but I got a bad layout then used react-bootstrap and I get the same issue. Th card body,title and button appear on the image itselfenter image description here

import React from 'react';
import { Card, Button } from 'react-bootstrap';



const WorkCard = () => {
    return (
        <div>
            <Card style={{ width: '18rem' }} >
                <Card.Img variant="top" src="holder.js/100px180" />
                <Card.Body>
                    <Card.Title>Card Title</Card.Title>
                    <Card.Text>
                        Some quick example text to build on the card title and make up the bulk of
                        the card's content.
                    </Card.Text>
                    <Button variant="primary">Go somewhere</Button>
                </Card.Body>
            </Card >
        </div>
    )
}

export default WorkCard;

Upvotes: 1

Views: 2459

Answers (1)

Mahmoud Nafea
Mahmoud Nafea

Reputation: 117

Using sass was overriding the bootstrap so I fixed that.

Upvotes: 1

Related Questions