ReactJS MDBootstrap Card Component

Reactstrap is a bootstrap-based react UI library that is used to make good-looking webpages with its seamless and easy-to-use component.

In this article, we will know how to use Card Component in ReactJS MDBootstrap. 

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.  It replaces the use panels, wells, and thumbnails. As all of it can be used in a single container called a card.

Properties:

• tag: It is used to define tags in Cards.
• className: It is used to define a custom class to a Cards.
• border: It is used to set the border of the cards.
• shadow: It is used to set cards shadow.
• background: it is used to set the background color of Cards.
• alignment: It is used to set the alignment of text inside the cards.

Syntax:

<MDBCard>
 GeeksforGeeks
</MDBCard>

Creating React Application And Installing Module:

Step 1: Create a React application using the following command.

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command.

cd foldername

Step 3: Install ReactJS MDBootstrap in your given directory.

npm i mdb-ui-kit
npm i mdb-react-ui-kit

Step 4: Import the element to be used in the project.

import { MDBBtnGroup } from 'mdb-react-ui-kit'

Project Structure: It will look like the following.

Step to Run Application: Run the application from the root directory of the project, using the following command.

npm start

Example 1:  This is the basic example that shows how to use the Card module

App.js

import React from "react";
import {
  MDBCard,
  MDBCardBody,
  MDBCardTitle,
  MDBCardText,
  MDBCardImage,
  MDBBtn
} from "mdb-react-ui-kit";

export default function App() {
  return (
    <center>
      <MDBCard style={{ maxWidth: "15rem" }}>
        <MDBCardImage
          src=
  "https://media.geeksforgeeks.org/wp-content/uploads/20220106105832/gfg200X2001.png"
          position="top"
        />
        <MDBCardBody>
          <MDBCardTitle>GeeksforGeeks</MDBCardTitle>
          <MDBCardText>
            Reactstrap is a bootstrap based
            react UI library that is used to
            make good looking webpages with
            its seamless and easy to use
            component.
          </MDBCardText>
          <MDBBtn href="www.geeksforgeeks.org">Button</MDBBtn>
        </MDBCardBody>
      </MDBCard>
    </center>
  );
}

Output:

Example 2: In this example, we will know how to use the header and footer in a card component.

App.js

import React from "react";
import {
  MDBCard,
  MDBCardBody,
  MDBCardTitle,
  MDBCardText,
  MDBCardHeader,
  MDBCardFooter
} from "mdb-react-ui-kit";

export default function App() {
  return (
    <center>
      <br/>
      <MDBCard style={{ maxWidth: "15rem" }}>
        <MDBCardHeader>Card Header</MDBCardHeader>
        <MDBCardBody>
          <MDBCardTitle>GeeksforGeeks</MDBCardTitle>
          <MDBCardText>
            Reactstrap is a bootstrap based
            react UI library that is used to
            make good looking webpages with
            its seamless and easy to use
            component.
          </MDBCardText>
        </MDBCardBody>
        <MDBCardFooter >Card Footer</MDBCardFooter>
      </MDBCard>
    </center>
  );
}

Output:

Example 3: In this example, we will know how to use border property in a Card component.

App.js

import React from "react";
import {
  MDBCard,
  MDBCardBody,
  MDBCardTitle,
  MDBCardText,
  MDBCardHeader,
  MDBCardFooter
} from "mdb-react-ui-kit";

export default function App() {
  return (
    <center>
      <br/>
      <MDBCard style={{ maxWidth: "15rem" }} border='danger'>
        <MDBCardHeader>Danger Border</MDBCardHeader>
        <MDBCardBody>
          <MDBCardTitle>GeeksforGeeks</MDBCardTitle>
          <MDBCardText>
            Reactstrap is a bootstrap based
            react UI library that is used to
            make good looking webpages with
            its seamless and easy to use
            component.
          </MDBCardText>
        </MDBCardBody>
      </MDBCard>
    </center>
  );
}

Output:

Reference: https://mdbootstrap.com/docs/b5/react/components/cards/