Category: JavaScript

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 add close buttons and cards with Reactstrap.

Close Icon

We can add the close prop to add a close icon.

For example, we can write:

import React from "react";
import {
  Button,
  Card,
  CardBody,
  CardText,
  CardGroup,
  CardTitle
} from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <Card>
        <CardBody>
          <CardTitle>
            <Button close />
          </CardTitle>
          <CardText>close icon</CardText>
        </CardBody>
      </Card>
    </>
  );
}

We added the close prop to show the close button.

Also, we can define custom content for the close button:

import React from "react";
import {
  Button,
  Card,
  CardBody,
  CardText,
  CardGroup,
  CardTitle
} from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <Card>
        <CardBody>
          <CardTitle>
            <Button close>
              <span>&ndash;</span>
            </Button>
          </CardTitle>
          <CardText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </CardText>
        </CardBody>
      </Card>
    </>
  );
}

We use the – HTML entity to add the dash.

Button Toggle

We can add a toggleable button with the ButtonToggle component.

For example, we can write:

import React from "react";
import { ButtonToggle } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <ButtonToggle color="primary" className="mr-2">
        primary
      </ButtonToggle>
      <ButtonToggle color="secondary" className="mr-2">
        secondary
      </ButtonToggle>
      <ButtonToggle color="success" className="mr-2">
        success
      </ButtonToggle>
      <ButtonToggle color="info" className="mr-2">
        info
      </ButtonToggle>
      <ButtonToggle color="warning" className="mr-2">
        warning
      </ButtonToggle>
      <ButtonToggle color="danger">danger</ButtonToggle>
    </>
  );
}

We have the ButtonToggle component. It takes the color prop to change the button toggle color.

Card

Cards are containers for content.

We add the Card component to add cards.

For example, we can write:

import React from "react";
import {
  Card,
  CardImg,
  CardText,
  CardBody,
  CardTitle,
  CardSubtitle,
  Button
} from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <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. Donec ut
            arcu lacinia, condimentum sapien et, molestie eros. Nulla a molestie
            ante, vitae scelerisque odio.
          </CardText>
          <Button>Button</Button>
        </CardBody>
      </Card>
    </>
  );
}

to add the card with some content inside.

CardImg has the card image.

The width can be changed with the image.

CardBody has the card body.

CardTitle has the card title.

CardSubtitle has the subtitle.

CardText has the card body text.

We can also place a Button at the bottom of the card.

Sizing

We can change the card sizes by putting them cards into columns.

For example, we can write:

import React from "react";
import { Card, CardText, CardTitle, Button, Row, Col } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <Row>
        <Col sm="6">
          <Card body>
            <CardTitle>Title</CardTitle>
            <CardText>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut
              arcu lacinia, condimentum sapien et, molestie eros. Nulla a
              molestie ante, vitae scelerisque odio.
            </CardText>
            <Button>Go</Button>
          </Card>
        </Col>
        <Col sm="6">
          <Card body>
            <CardTitle> Title</CardTitle>
            <CardText>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut
              arcu lacinia, condimentum sapien et, molestie eros. Nulla a
              molestie ante, vitae scelerisque odio.
            </CardText>
            <Button>Go</Button>
          </Card>
        </Col>
      </Row>
    </>
  );
}

We add the Col components in the Row to add some layout to the page.

Then we put the Card inside the Col to make them fit within the column.

The body prop is also required to fit the card inside the Col .

Text Alignment

We can change the text alignment with some classes.

To do that, we use the classes from Bootstrap.

For example, we can write:

import React from "react";
import { Card, CardText, CardTitle, Button, Row, Col } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <Card body>
        <CardTitle>Title</CardTitle>
        <CardText>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut arcu
          lacinia, condimentum sapien et, molestie eros. Nulla a molestie ante,
          vitae scelerisque odio.
        </CardText>
        <Button>Go somewhere</Button>
      </Card>
      <Card body className="text-center">
        <CardTitle>Title</CardTitle>
        <CardText>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut arcu
          lacinia, condimentum sapien et, molestie eros. Nulla a molestie ante,
          vitae scelerisque odio.
        </CardText>
        <Button>Go somewhere</Button>
      </Card>
      <Card body className="text-right">
        <CardTitle>Title</CardTitle>
        <CardText>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut arcu
          lacinia, condimentum sapien et, molestie eros. Nulla a molestie ante,
          vitae scelerisque odio.
        </CardText>
        <Button>Go somewhere</Button>
      </Card>
    </>
  );
}

We have the text-center class to center the text.

text-right right aligns the text.

Conclusion

We can add close buttons and cards with Reactstrap.

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 add carousels and collapse components with Reactstrap.

Carousel Using a Tag and Class Name

We can change the tag and the class name that’s rendered in a carousel item.

For example, we can write:

import React from "react";
import {
  Carousel,
  CarouselItem,
  CarouselControl,
  CarouselIndicators,
  CarouselCaption
} from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

const items = [
  {
    id: 1,
    altText: "Slide 1",
    caption: "Slide 1"
  },
  {
    id: 2,
    altText: "Slide 2",
    caption: "Slide 2"
  },
  {
    id: 3,
    altText: "Slide 3",
    caption: "Slide 3"
  }
];

export default function App() {
  const [activeIndex, setActiveIndex] = React.useState(0);
  const [animating, setAnimating] = React.useState(false);

  const next = () => {
    if (animating) return;
    const nextIndex = activeIndex === items.length - 1 ? 0 : activeIndex + 1;
    setActiveIndex(nextIndex);
  };

const previous = () => {
    if (animating) return;
    const nextIndex = activeIndex === 0 ? items.length - 1 : activeIndex - 1;
    setActiveIndex(nextIndex);
  };

  const goToIndex = newIndex => {
    if (animating) return;
    setActiveIndex(newIndex);
  };

  const slides = items.map(item => {
    return (
      <CarouselItem
        className="custom-tag"
        tag="div"
        key={item.id}
        onExiting={() => setAnimating(true)}
        onExited={() => setAnimating(false)}
      >
        <CarouselCaption
          className="text-warning"
          captionText={item.caption}
          captionHeader={item.caption}
        />
      </CarouselItem>
    );
  });

  return (
    <div>
      <style>
        {`.custom-tag {
          max-width: 100%;
          height: 500px;
          background: black;
        }`}
      </style>
      <Carousel activeIndex={activeIndex} next={next} previous={previous}>
        <CarouselIndicators
          items={items}
          activeIndex={activeIndex}
          onClickHandler={goToIndex}
        />
        {slides}
        <CarouselControl
          direction="prev"
          directionText="Previous"
          onClickHandler={previous}
        />
        <CarouselControl
          direction="next"
          directionText="Next"
          onClickHandler={next}
        />
      </Carousel>
    </div>
  );
}

We have the items array to generate the slides from it.

CarouselCaption has the caption.

We set the className to style the text.

CarouselItem also has the className and tag to set the class name and render the slide element with the given tag.

Collapse

We can use the Collapse component to make a toggleable component.

For example, we can write:

import React from "react";
import { Collapse, Button, CardBody, Card } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  const [isOpen, setIsOpen] = React.useState(false);

  const toggle = () => setIsOpen(!isOpen);

  return (
    <div>
      <Button color="warning" onClick={toggle} style={{ marginBottom: "1rem" }}>
        Toggle
      </Button>
      <Collapse isOpen={isOpen}>
        <Card>
          <CardBody>
            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.
          </CardBody>
        </Card>
      </Collapse>
    </div>
  );
}

We set the color prop to the style we want on the button.

The content is in the Collapse component, which takes the isOpen prop set to the isOpen state.

We have a toggle function to toggle the Collapse component when it’s clicked.

Events

Collapse takes more props.

The onEntering prop that’s run when it’s being shown.

onEntered runs when the collapse component is displayed.

onExiting runs when the collapse component is toggling off.

onExited runs when the collapse component is toggled off.

For example, we can write:

import React from "react";
import { Collapse, Button, CardBody, Card } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  const [collapse, setCollapse] = React.useState(false);
  const [status, setStatus] = React.useState("Closed");

  const onEntering = () => setStatus("Opening");

  const onEntered = () => setStatus("Opened");

  const onExiting = () => setStatus("Closing");

  const onExited = () => setStatus("Closed");

  const toggle = () => setCollapse(!collapse);

  return (
    <div>
      <Button color="primary" onClick={toggle} className="mb-1">
        Toggle
      </Button>
      <p>Current state: {status}</p>
      <Collapse
        isOpen={collapse}
        onEntering={onEntering}
        onEntered={onEntered}
        onExiting={onExiting}
        onExited={onExited}
      >
        <Card>
          <CardBody>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at
            elit cursus, pellentesque dolor sed, fringilla augue. Donec bibendum
            nibh et auctor eleifend.
          </CardBody>
        </Card>
      </Collapse>
    </div>
  );
}

We pass in functions to all those props to display set the status state so that we can display it.

Uncontrolled Collapse

If we only need a collapsible component without the need to control the toggling programmatically, then we can use the UncontrolledCollapse component.

For example, we can write:

import React from "react";
import { UncontrolledCollapse, Button, CardBody, Card } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <div>
      <Button color="primary" id="toggler" className="mb-2">
        Toggle
      </Button>
      <UncontrolledCollapse toggler="#toggler">
        <Card>
          <CardBody>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at
            elit cursus, pellentesque dolor sed, fringilla augue. Donec bibendum
            nibh et auctor eleifend.
          </CardBody>
        </Card>
      </UncontrolledCollapse>
    </div>
  );
}

As long as the ID of the button matches the selector in the toggler prop of the UncontrolledCollapse component, the toggling will be done by the button.

Conclusion

We can add carousels as an uncontrolled component.

Also, we can add a collapse component to add a toggleable container.

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 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="info" 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="warning" 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="danger" 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>
    </div>
  );
}

We just put the outline prop with the color prop to add the borders we want.

Groups

We can put multiple cards into a container with the CardGroup component.

For instance, we can write:

import React from "react";
import {
  Card,
  Button,
  CardImg,
  CardTitle,
  CardText,
  CardGroup,
  CardSubtitle,
  CardBody
} from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <div className="App">
      <CardGroup>
        <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
            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
            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>
      </CardGroup>
    </div>
  );
}

We have multiple Card components in the CardGroup .

Then they’re placed side by side responsively.

They’ll be placed without margins between them.

Decks

Reactstrap also comes with the CardDeck component to group cards with margins.

For example, we can write:

import React from "react";
import {
  Card,
  Button,
  CardImg,
  CardTitle,
  CardText,
  CardDeck,
  CardSubtitle,
  CardBody
} from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <div className="App">
      <CardDeck>
        <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
            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
            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>
      </CardDeck>
    </div>
  );
}

We use the CardDeck component to place the cards side by side with margins between them.

Conclusion

We can group cards with card decks and card groups.

Also, we can add border colors to cards.

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.

Header and Footer

We can add headers and booters to cards.

For example, we can write:

import React from "react";
import {
  Card,
  Button,
  CardHeader,
  CardFooter,
  CardBody,
  CardTitle,
  CardText
} from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <div className="App">
      <Card>
        <CardHeader>Header</CardHeader>
        <CardBody>
          <CardTitle>Special Title Treatment</CardTitle>
          <CardText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </CardText>
          <Button>Go somewhere</Button>
        </CardBody>
        <CardFooter>Footer</CardFooter>
      </Card>

      <Card>
        <CardHeader tag="h3">Featured</CardHeader>
        <CardBody>
          <CardTitle>Special Title Treatment</CardTitle>
          <CardText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </CardText>
          <Button>Go somewhere</Button>
        </CardBody>
        <CardFooter className="text-muted">Footer</CardFooter>
      </Card>
    </div>
  );
}

We have the CardHeader and CardFooter components to display the header and footer.

Image Caps

We can add images with the CardImg component.

Then we can align them with the top and bottom props.

For example, we can write:

import React from "react";
import {
  Card,
  Button,
  CardHeader,
  CardFooter,
  CardBody,
  CardTitle,
  CardText,
  CardImg
} from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <div className="App">
      <Card>
        <CardImg
          top
          width="100%"
          src="http://placekitten.com/200/200"
          alt="Cat"
        />
        <CardBody>
          <CardTitle>Special Title Treatment</CardTitle>
          <CardText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </CardText>
          <Button>Go somewhere</Button>
        </CardBody>
        <CardFooter>Footer</CardFooter>
      </Card>

      <Card>
        <CardHeader tag="h3">Featured</CardHeader>
        <CardBody>
          <CardTitle>Special Title Treatment</CardTitle>
          <CardText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </CardText>
          <Button>Go somewhere</Button>
        </CardBody>
        <CardImg
          bottom
          width="100%"
          src="http://placekitten.com/200/200"
          alt="Cat"
        />
      </Card>
    </div>
  );
}

The CardImg can be placed on the card.

The top and bottom props place make the images flush to the edges.

Image Overlays

We can place images below the text with the CardImgOverlay component.

For example, we can write:

import React from "react";
import { Card, CardImgOverlay, CardTitle, CardText, CardImg } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <div className="App">
      <Card inverse>
        <CardImg width="100%" src="http://placekitten.com/200/200" alt="Cat" />
        <CardImgOverlay>
          <CardTitle>Card 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. Phasellus vitae urna in mi euismod
            sagittis ac non nunc.
          </CardText>
          <CardText>
            <small className="text-muted">Last updated 10 mins ago</small>
          </CardText>
        </CardImgOverlay>
      </Card>
    </div>
  );
}

We have the inverse prop to change the text color to white.

All the content is placed into the CardImgOverlay so that they’re placed above the image.

Background Variants

We can change the style variants of the cards.

To do that, we set the color 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
        inverse
        style={{ backgroundColor: "#333", borderColor: "#333" }}
      >
        <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>Button</Button>
      </Card>
      <Card body inverse color="primary">
        <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 inverse color="success">
        <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 inverse color="info">
        <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 inverse color="warning">
        <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 inverse color="danger">
        <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>
    </div>
  );
}

We set the color prop to the color we want.

We add the body prop to set the card to the body.

inverse change the content color to white.

Conclusion

We can add headers, footers, images, and overlays to cards.

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](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
            width="100%"
            src="[http://placekitten.com/200/200](http://placekitten.com/200/200)"
            alt="Cat"
          />
        </Card>
        <Card>
          <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
          body
          inverse
          style={{ backgroundColor: "#333", borderColor: "#333" }}
        >
          <CardTitle>Special Title Treatment</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.
          </CardText>
          <Button>Button</Button>
        </Card>
        <Card>
          <CardImg
            top
            width="100%"
            src="[http://placekitten.com/200/200](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 body inverse color="primary">
          <CardTitle>Special Title Treatment</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.
          </CardText>
          <Button color="secondary">Button</Button>
        </Card>
      </CardColumns>
    </div>
  );
}

We use the CardColumns component to group the columns together.

Carousel

Carousels let us display slideshows in our app.

To add one we use the Carousel andCarouselItem components to add the carousel and carousel items.

We can also use the CarouselIndicators and CarouselControl components to add the slide indicator and navigation controls.

To do all that, we can write:

import React from "react";
import {
  Carousel,
  CarouselItem,
  CarouselControl,
  CarouselIndicators,
  CarouselCaption
} from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

const items = [
  {
    src: "http://placekitten.com/200/200",
    altText: "Slide 1",
    caption: "Slide 1"
  },
  {
    src: "http://placekitten.com/200/200",
    altText: "Slide 2",
    caption: "Slide 2"
  },
  {
    src: "http://placekitten.com/200/200",
    altText: "Slide 3",
    caption: "Slide 3"
  }
];

export default function App() {
  const [activeIndex, setActiveIndex] = React.useState(0);
  const [animating, setAnimating] = React.useState(false);

  const next = () => {
    if (animating) return;
    const nextIndex = activeIndex === items.length - 1 ? 0 : activeIndex + 1;
    setActiveIndex(nextIndex);
  };

  const previous = () => {
    if (animating) return;
    const nextIndex = activeIndex === 0 ? items.length - 1 : activeIndex - 1;
    setActiveIndex(nextIndex);
  };

  const goToIndex = newIndex => {
    if (animating) return;
    setActiveIndex(newIndex);
  };

  const slides = items.map(item => {
    return (
      <CarouselItem
        onExiting={() => setAnimating(true)}
        onExited={() => setAnimating(false)}
        key={item.src}
      >
        <img src={item.src} alt={item.altText} />
        <CarouselCaption
          captionText={item.caption}
          captionHeader={item.caption}
        />
      </CarouselItem>
    );
  });

  return (
    <Carousel activeIndex={activeIndex} next={next} previous={previous}>
      <CarouselIndicators
        items={items}
        activeIndex={activeIndex}
        onClickHandler={goToIndex}
      />
      {slides}
      <CarouselControl
        direction="prev"
        directionText="Previous"
        onClickHandler={previous}
      />
      <CarouselControl
        direction="next"
        directionText="Next"
        onClickHandler={next}
      />
    </Carousel>
  );
}

We add the slides with the CarouselItem and CarouselCaption components.

CarouselCaption adds the caption text.

The CariyselIndicators have the slides in the items prop.

activeIndex has the index of the slide that’s active.

onClickHandler lets us jump to the given side by changing the index.

CarouselControl lets us add controls to move slides.

This is also done by changing the index of the active slide with the next and previous functions.

We set the animating state to false when we exit the slide.

Uncontrolled Carousel

If we don’t need to control the navigation ourselves, we can also add an uncontrolled carousel with the UncontrolledCarousel component.

For instance, we can write:

import React from "react";
import { UncontrolledCarousel } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

const items = [
  {
    src: "http://placekitten.com/200/200",
    altText: "Slide 1",
    caption: "Slide 1",
    header: "Slide 1 Header",
    key: "1"
  },
  {
    src: "http://placekitten.com/200/200",
    altText: "Slide 2",
    caption: "Slide 2",
    header: "Slide 2 Header",
    key: "2"
  },
  {
    src: "http://placekitten.com/200/200",
    altText: "Slide 3",
    caption: "Slide 3",
    header: "Slide 3 Header",
    key: "3"
  }
];

export default function App() {
  return <UncontrolledCarousel items={items} />;
}

We have the slide data with the image URL, caption, header, and alt text, and we pass them all into the items prop.

This will make a carousel that animates automatically.

Navigation controls and slide indicators are also provided.

Conclusion

We can add various kinds of sliders and group cards into columns.