React Bootstrap — Cards

Photo by Wolfgang Hasselmann on Unsplash

React Bootstrap is one version of Bootstrap made for React.

It’s a set of React components that have Bootstrap styles.

In this article, we’ll look at how to work with React Bootstrap cards.

Cards

Cards provide us with a flexible content container with multiple variants and options.

To use it, we can write:

import React from "react";
import Card from "react-bootstrap/Card";
import Button from "react-bootstrap/Button";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
  return (
    <>
      <Card style={{ width: "20rem" }}>
        <Card.Img variant="top" src="http://placekitten.com/200/200" />
        <Card.Body>
          <Card.Title> Title</Card.Title>
          <Card.Text>
            Some quick example text to build on the card title and make up the
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
            ultrices ac dolor nec vestibulum. Maecenas vulputate diam ut sem
            tempus, id eleifend tortor hendrerit. Sed non orci massa. Aliquam
            eget lectus a ante convallis gravida. Donec fringilla odio ut magna
            gravida aliquam. Cras molestie non ante vel dictum. Cras lacinia
            molestie lacus, in lacinia sapien imperdiet in. Sed eleifend laoreet…