Reactstrap — Close Buttons and Card

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.