Reactstrap — Cards and Groups

Photo by Clarissa Carbungco on Unsplash

Reactstrap is a version Bootstrap made for React.

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

In this article, we’ll look at how to customize cards with Reactstrap.

Outline Variants

Cards have outlined variants

The borders have colors, but the rest don’t.

For example, we can add the outlines by adding the outline prop:

import React from "react";
import { Card, Button, CardTitle, CardText } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
  return (
    <div className="App">
      <Card body color="primary" outline>
        <CardTitle>Title</CardTitle>
        <CardText>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at
          elit cursus, pellentesque dolor sed, fringilla augue. Donec bibendum
          nibh et auctor eleifend. Vestibulum ante ipsum primis in faucibus orci
          luctus et ultrices posuere cubilia curae; Mauris ultrices justo quis
          sapien faucibus ultricies.
        </CardText>
        <Button color="secondary">Button</Button>
      </Card>
      <Card body color="success" outline>
        <CardTitle>Title</CardTitle>
        <CardText>
          Lorem ipsum dolor sit amet, consectetur…