Reactstrap Cards

Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.

Examples

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

import React from "react";

// reactstrap components
import {
  Button,
  Card,
  CardBody,
  CardImg,
  CardTitle,
  CardText,
} from "reactstrap";

const style = { width: "18rem" };

function Example() {
  return (
    <>
      <Card style={style}>
        <CardImg
          alt="..."
          src={require("https://demos.creative-tim.com/argon-design-system-pro/assets/img/faces/alejandro-escamilla.jpg")}
          top
        ></CardImg>
        <CardBody>
          <CardTitle>Card title</CardTitle>
          <CardText>
            Some quick example text to build on the card title and make up the
            bulk of the card's content.
          </CardText>
          <Button
            color="primary"
            href="#pablo"
            onClick={(e) => e.preventDefault()}
          >
            Go somewhere
          </Button>
        </CardBody>
      </Card>
    </>
  );
}

export default Example;

Examples

Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what’s supported.

This is some text within a card body.

import React from "react";

// reactstrap components
import { Card, CardBody } from "reactstrap";

function Example() {
  return (
    <>
      <Card className=" card-frame">
        <CardBody>This is some text within a card body.</CardBody>
      </Card>
    </>
  );
}

export default Example;

Layouts

In addition to styling the content within cards, Bootstrap includes a few options for laying out series of cards. For the time being, these layout options are not yet responsive.

Card groups PRO

Need a set of equal width and height cards that aren’t attached to one another? Use card decks.

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

import React from "react";

// reactstrap components
import { Card, CardBody, CardImg, CardTitle, CardText } from "reactstrap";

function Example() {
  return (
    <>
      <div className=" card-group">
        <Card>
          <CardImg
            alt="..."
            src="https://demos.creative-tim.com/argon-design-system-pro/assets/img/faces/alejandro-escamilla.jpg"
            top
          ></CardImg>
          <CardBody>
            <CardTitle>Card title</CardTitle>
            <CardText>
              This is a wider card with supporting text below as a natural
              lead-in to additional content. This content is a little bit
              longer.
            </CardText>
            <CardText>
              <small className=" text-muted">Last updated 3 mins ago</small>
            </CardText>
          </CardBody>
        </Card>
        <Card>
          <CardImg
            alt="..."
            src="https://demos.creative-tim.com/argon-design-system-pro/assets/img/faces/alejandro-escamilla.jpg"
            top
          ></CardImg>
          <CardBody>
            <CardTitle>Card title</CardTitle>
            <CardText>
              This card has supporting text below as a natural lead-in to
              additional content.
            </CardText>
            <CardText>
              <small className=" text-muted">Last updated 3 mins ago</small>
            </CardText>
          </CardBody>
        </Card>
        <Card>
          <CardImg
            alt="..."
            src="https://demos.creative-tim.com/argon-design-system-pro/assets/img/faces/alejandro-escamilla.jpg"
            top
          ></CardImg>
          <CardBody>
            <CardTitle>Card title</CardTitle>
            <CardText>
              This is a wider card with supporting text below as a natural
              lead-in to additional content. This card has even longer content
              than the first to show that equal height action.
            </CardText>
            <CardText>
              <small className=" text-muted">Last updated 3 mins ago</small>
            </CardText>
          </CardBody>
        </Card>
      </div>
    </>
  );
}

export default Example;

Card decks PRO

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

import React from "react";

// reactstrap components
import { Card, CardBody, CardImg, CardTitle, CardText } from "reactstrap";

function Example() {
  return (
    <>
      <div className=" card-deck">
        <Card>
          <CardImg
            alt="..."
            src="https://demos.creative-tim.com/argon-design-system-pro/assets/img/faces/alejandro-escamilla.jpg"
            top
          ></CardImg>
          <CardBody>
            <CardTitle>Card title</CardTitle>
            <CardText>
              This is a wider card with supporting text below as a natural
              lead-in to additional content. This content is a little bit
              longer.
            </CardText>
            <CardText>
              <small className=" text-muted">Last updated 3 mins ago</small>
            </CardText>
          </CardBody>
        </Card>
        <Card>
          <CardImg
            alt="..."
            src="https://demos.creative-tim.com/argon-design-system-pro/assets/img/faces/alejandro-escamilla.jpg"
            top
          ></CardImg>
          <CardBody>
            <CardTitle>Card title</CardTitle>
            <CardText>
              This card has supporting text below as a natural lead-in to
              additional content.
            </CardText>
            <CardText>
              <small className=" text-muted">Last updated 3 mins ago</small>
            </CardText>
          </CardBody>
        </Card>
        <Card>
          <CardImg
            alt="..."
            src="https://demos.creative-tim.com/argon-design-system-pro/assets/img/faces/alejandro-escamilla.jpg"
            top
          ></CardImg>
          <CardBody>
            <CardTitle>Card title</CardTitle>
            <CardText>
              This is a wider card with supporting text below as a natural
              lead-in to additional content. This card has even longer content
              than the first to show that equal height action.
            </CardText>
            <CardText>
              <small className=" text-muted">Last updated 3 mins ago</small>
            </CardText>
          </CardBody>
        </Card>
      </div>
    </>
  );
}
export default Example;

Card columns PRO

Cards can be organized into Masonry-like columns with just CSS by wrapping them in .card-columns. Cards are built with CSS column properties instead of flexbox for easier alignment. Cards are ordered from top to bottom and left to right.

Card title that wraps to a new line

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.

Someone famous in Source Title

Card title

This card has a regular title and short paragraphy of text below it.

Last updated 3 mins ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Card title

This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.

Last updated 3 mins ago

import React from "react";

// reactstrap components
import { Card, CardBody, CardImg, CardTitle, CardText } from "reactstrap";

function Example() {
  return (
    <>
      <div className=" card-columns">
        <Card>
          <CardImg
            alt="..."
            src="https://demos.creative-tim.com/argon-design-system-pro/assets/img/faces/alejandro-escamilla.jpg"
            top
          ></CardImg>
          <CardBody>
            <CardTitle>Card title that wraps to a new line</CardTitle>

            <CardText>
              This is a longer card with supporting text below as a natural
              lead-in to additional content. This content is a little bit
              longer.
            </CardText>
          </CardBody>
        </Card>
        <Card className=" p-3">
          <CardBody className=" blockquote mb-0">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
              posuere erat a ante.
            </p>
            <footer className=" blockquote-footer">
              <small className=" text-muted">
                Someone famous in <cite title="Source Title">Source Title</cite>
              </small>
            </footer>
          </CardBody>
        </Card>
        <Card>
          <CardImg
            alt="..."
            src="https://demos.creative-tim.com/argon-design-system-pro/assets/img/faces/alejandro-escamilla.jpg"
            top
          ></CardImg>
          <CardBody>
            <CardTitle>Card title</CardTitle>
            <CardText>
              This card has supporting text below as a natural lead-in to
              additional content.
            </CardText>
            <CardText>
              <small className=" text-muted">Last updated 3 mins ago</small>
            </CardText>
          </CardBody>
        </Card>
        <Card className=" bg-primary text-white text-center p-3">
          <blockquote className=" blockquote mb-0">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
              posuere erat.
            </p>
            <footer className=" blockquote-footer">
              <small>
                Someone famous in <cite title="Source Title">Source Title</cite>
              </small>
            </footer>
          </blockquote>
        </Card>
        <Card className=" text-center">
          <CardBody>
            <CardTitle>Card title</CardTitle>
            <CardText>
              This card has a regular title and short paragraphy of text below
              it.
            </CardText>
            <CardText>
              <small className=" text-muted">Last updated 3 mins ago</small>
            </CardText>
          </CardBody>
        </Card>
        <Card>
          <CardImg
            alt="..."
            src="https://demos.creative-tim.com/argon-design-system-pro/assets/img/faces/alejandro-escamilla.jpg"
          ></CardImg>
        </Card>
        <Card className=" p-3 text-right">
          <blockquote className=" blockquote mb-0">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
              posuere erat a ante.
            </p>
            <footer className=" blockquote-footer">
              <small className=" text-muted">
                Someone famous in <cite title="Source Title">Source Title</cite>
              </small>
            </footer>
          </blockquote>
        </Card>
        <Card>
          <CardBody>
            <CardTitle>Card title</CardTitle>
            <CardText>
              This is another card with title and supporting text below. This
              card has some additional content to make it slightly taller
              overall.
            </CardText>
            <CardText>
              <small className=" text-muted">Last updated 3 mins ago</small>
            </CardText>
          </CardBody>
        </Card>
      </div>
    </>
  );
}

export default Example;

Advanced examples

Please check the core cards for more.

List group PRO

Cras justo odio
Dapibus ac facilisis in
Vestibulum at eros

Card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis non dolore est fuga nobis ipsum illum eligendi nemo iure repellat, soluta, optio minus ut reiciendis voluptates enim impedit veritatis officiis.

Go somewhere

import React from "react";

// reactstrap components
import {
  Button,
  Card,
  CardBody,
  CardImg,
  CardTitle,
  CardText,
  ListGroupItem,
  ListGroup,
} from "reactstrap";

function Example() {
  return (
    <>
      <Card>
        <CardImg
          alt="..."
          src="https://demos.creative-tim.com/argon-design-system-pro/assets/img/faces/alejandro-escamilla.jpg"
          top
        ></CardImg>
        <ListGroup flush>
          <ListGroupItem>Cras justo odio</ListGroupItem>
          <ListGroupItem>Dapibus ac facilisis in</ListGroupItem>
          <ListGroupItem>Vestibulum at eros</ListGroupItem>
        </ListGroup>
        <CardBody>
          <CardTitle className=" mb-3" tag="h3">
            Card title
          </CardTitle>
          <CardText className=" mb-4">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            Facilis non dolore est fuga nobis ipsum illum eligendi nemo iure
            repellat, soluta, optio minus ut reiciendis voluptates enim
            impedit veritatis officiis.
          </CardText>
          <Button
            color="primary"
            href="#pablo"
            onClick={(e) => e.preventDefault()}
          >
            Go somewhere
          </Button>
        </CardBody>
      </Card>
    </>
  );
}

export default Example;

Image PRO

Get started with Argon

by John Snow on Oct 29th at 10:23 AM

Argon is a great free UI package based on Bootstrap 4 that includes the most important components and features.

View article

import React from "react";

// reactstrap components
import {
  Button,
  Card,
  CardBody,
  CardImg,
  CardTitle,
  CardText,
} from "reactstrap";

function Example() {
  return (
    <>
      <Card>
        <CardImg
          alt="..."
          src="https://demos.creative-tim.com/argon-design-system-pro/assets/img/faces/alejandro-escamilla.jpg"
          top
        ></CardImg>
        <CardBody>
          <CardTitle className=" h2 mb-0">Get started with Argon</CardTitle>
          <small className=" text-muted">
            by John Snow on Oct 29th at 10:23 AM
          </small>
          <CardText className=" mt-4">
            Argon is a great free UI package based on Bootstrap 4 that includes
            the most important components and features.
          </CardText>
          <Button
            className=" px-0"
            color="link"
            href="#pablo"
            onClick={(e) => e.preventDefault()}
          >
            View article
          </Button>
        </CardBody>
      </Card>
    </>
  );
}

export default Example;

Blockquote PRO

Testimonial

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

import React from "react";

// reactstrap components
import { Card, CardBody, CardTitle } from "reactstrap";

function Example() {
  return (
    <>
      <Card className=" bg-gradient-default">
        <CardBody>
          <CardTitle className=" text-white" tag="h3">
            Testimonial
          </CardTitle>
          <blockquote className=" blockquote text-white mb-0">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
              posuere erat a ante.
            </p>
            <footer className=" blockquote-footer text-danger">
              Someone famous in <cite title="Source Title">Source Title</cite>
            </footer>
          </blockquote>
        </CardBody>
      </Card>
    </>
  );
}

export default Example;

Overlay PRO

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

import React from "react";

// reactstrap components
import { Card, CardImg, CardImgOverlay, CardTitle, CardText } from "reactstrap";

function Example() {
  return (
    <>
      <Card className=" bg-dark text-white border-0">
        <CardImg
          alt="..."
          src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/img-1-1000x600.jpg"
        ></CardImg>
        <CardImgOverlay className=" d-flex align-items-center">
          <div>
            <CardTitle className=" h2 text-white mb-2">Card title</CardTitle>
            <CardText>
              This is a wider card with supporting text below as a natural
              lead-in to additional content. This content is a little bit
              longer.
            </CardText>
            <CardText className=" text-sm font-weight-bold">
              Last updated 3 mins ago
            </CardText>
          </div>
        </CardImgOverlay>
      </Card>
    </>
  );
}

export default Example;

Bootstrap Background Image

import React from "react";

// reactstrap components
import { Card, CardImg } from "reactstrap";

function Example() {
  return (
    <>
      <Card className=" bg-dark text-white border-0">
        <CardImg
          alt="..."
          src="https://demos.creative-tim.com/argon-design-system-pro/assets/img/faces/alejandro-escamilla.jpg"
        ></CardImg>
      </Card>
    </>
  );
}

export default Example;

Props

If you want to see more examples and properties please check the official Reactstrap Documentation.