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.