horizontal cards react bootstrap
To create horizontal cards in React Bootstrap, you can use the Card
component along with the CardDeck
component. Here's an example of how you can achieve this:
import React from 'react';
import { Card, CardDeck } from 'react-bootstrap';
const HorizontalCard = () => {
return (
<CardDeck>
<Card>
<Card.Img variant="top" src="image1.jpg" />
<Card.Body>
<Card.Title>Card 1</Card.Title>
<Card.Text>
This is the content of Card 1.
</Card.Text>
</Card.Body>
</Card>
<Card>
<Card.Img variant="top" src="image2.jpg" />
<Card.Body>
<Card.Title>Card 2</Card.Title>
<Card.Text>
This is the content of Card 2.
</Card.Text>
</Card.Body>
</Card>
<Card>
<Card.Img variant="top" src="image3.jpg" />
<Card.Body>
<Card.Title>Card 3</Card.Title>
<Card.Text>
This is the content of Card 3.
</Card.Text>
</Card.Body>
</Card>
</CardDeck>
);
}
export default HorizontalCard;
In this example, the CardDeck
component is used to group the Card
components together. Each Card
component represents a horizontal card. You can customize the content and appearance of each card by modifying the Card.Title
, Card.Text
, and Card.Img
components.
Remember to install React Bootstrap and import the necessary components before using them in your code.