ReactJS MDBootstrap Card Component

12 Jan, 2022
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/
MDBootstrap
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.