Reactstrap — Card Columns and Carousels

Photo by ACK 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 put cards into columns and add carousels with Reactstrap.

Columns

We can group cards into columns.

For example, we can write:

import React from "react";
import {
  Card,
  Button,
  CardImg,
  CardTitle,
  CardText,
  CardColumns,
  CardSubtitle,
  CardBody
} from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
  return (
    <div className="App">
      <CardColumns>
        <Card>
          <CardImg
            top
            width="100%"
            src="http://placekitten.com/200/200"
            alt="Cat"
          />
          <CardBody>
            <CardTitle>Card title</CardTitle>
            <CardSubtitle>Card subtitle</CardSubtitle>
            <CardText>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at
              elit cursus, pellentesque dolor sed, fringilla augue. Donec
              bibendum nibh et auctor eleifend.
            </CardText>
            <Button>Button</Button>
          </CardBody>
        </Card>
        <Card>
          <CardImg
            top…