ReactJS Reactstrap Card Component - GeeksforGeeks

01 Aug, 2021
Reactstrap: Reactstrap is a popular front-end library that is easy to use React Bootstrap 4 components. This library contains the stateless React components for Bootstrap 4. The Card components allow the user to display content. We can use the following approach in ReactJS to use the ReactJS Reactstrap Card Component.
Properties of the ReactStarp props:
Card Props:
tag: Card Props tag can be a function or a string, and it is used to denote the tag for this component.
inverse: The inverse props in reactStrap are used to indicate whether to inverse text color or not.
color: The color props are used to change the color of the card. It should be RGB format and the name of the  color.
body: The body props are used to indicate whether to apply card-body class or not in the reactStrap component.
className: The className props are used to denote the class name for styling the component in reactStrap.
CardBody Props:
tag: The CardBody props can be a function or a string, and it is used to denote the tag for this component in reactStrap.
className: The className props are used to denote the class name for this component in reactStrap.
 
CardColumns Props:
tag: The tag CardColumns Props can be a function or a string, and it is used to denote the tag for this component.
className: The className props are used to denote the class name for this component, which is used for styling the CSS.
Card deck Props:
tag: The tag props come under the Card deck Props. On the card deck, it can be a function or a string, and it is used to denote the tag for this component.
className: The className props come under Card deck Props and are used to denote the class name for this component.
CardFooter Props:
tag: The tag Props come under the CardFooter Props. It can be a function or a string, and it is used to denote the tag for this component.
className: The className props come under the CardFooter Props. It is used to denote the class name for this component.
CardGroup Props:
tag: The tag props in CardGroup can be a function or a string, and it is used to denote the tag for this component.
className: className pops comes under the CardGroup Props .It is used to denote the class name for this component.
CardHeader Props:
tag: The CardHeader tag prop can be a function or a string, and it is used to denote the tag for this component.
className: The className props come under CardHeader props .It is used to denote the class name for this component.
CardImg Props:
tag: The tag can be a function or a string, and it is used to denote the tag for this component.
className: The className is used to denote the class name for this component.
top: The top props are used to position images through card-img-top class.
bottom: The bottom props are used to position images through card-img-bottom class.
CardImgOverlay Props:
tag: The tag prop can be a function or a string, and it is used to denote the tag for this component.
className: The className props are used to denote the class name for this component.
 
CardLink Props:
tag: This cardLink prop can be a function or a string, and it is used to denote the tag for this component.
className: This className prop is used to denote the class name for this component.
innerRef: This innerRef prop is used to denote the inner reference element.
CardSubtitle Props:
tag: This prop can be a function or a string, and it is used to denote the tag for this component.
className: These props can be used to denote the class name for this component.
CardText Props:
tag: This prop can be a function or a string, and it is used to denote the tag for this component.
className: This prop is used to denote the class name for this component.
CardTitle Props :
tag: This prop can be a function or a string, and it is used to denote the tag for this component.
className: These props, className props are used to denote the class name for this component.
The syntax for Creating React Application And Installing Modules:
Step 1: Create a React application using the following command.npx create-react-app foldername
npx create-react-app foldername
Step 2: After creating your project folder i.e. folder name, move to it using the following command.cd foldername
cd foldername
Step 3: Install Reactstrap in your given directory.
 npm install --save reactstrap react react-dom
Project Structure: It will look like the following :
Project Structure
Example 1: Now write down the following code in the App.js file. Here, the App is our default component where we have written our code.
App.js
import React from 'react'import 'bootstrap/dist/css/bootstrap.min.css';import {    Card, CardImg, CardBody,    CardTitle, CardText, Button} from "reactstrap"  function App() {    return (        <div style={{            display: 'block', width: 700, padding: 30        }}>            <h4>ReactJS Reactstrap Card Component</h4>            <Card>                <CardImg                    width="50px"                    height="50px"                src="https://media.geeksforgeeks.org/wp-content/                          uploads/20210425000233/test-300x297.png"                    alt="GFG Logo" />                <CardBody>                    <CardTitle tag="h5">Sample Card title</CardTitle>                    <CardText>Sample Card Text to display!</CardText>                    <Button>Action Button</Button>                </CardBody>            </Card>        </div>    );}  export default App;
 
Step to Run Application: Run the application using the following command from the root directory of the project: 
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Card Component
Example 2:This is another example for ReactStrap card component. 
App.js
import React from "react";import {  Card,CardBody,CardLink,CardTitle,     } from "reactstrap";  const Example = (props) => {  return (    <div>      <Card>        <CardBody>          <CardTitle tag="h5">GFG Practice Portal </CardTitle>          <img          width="50%"          src="https://media.geeksforgeeks.org/wp-content/               uploads/20210728115525/imggggg.png"          alt="Card image cap"        />                                <p>            The Best Data Structures Course Available Online From Skilled             And Experienced Faculty. Learn Data Structures In A Live             Classroom With The Best Of Faculty In The Industry.             Classroom Experience.          </p>          </CardBody>                 <CardBody>                     <CardLink href="https://www.geeksforgeeks.org/html-images/">             To knbow more about us...           </CardLink>           </CardBody>      </Card>    </div>  );};  export default Example;
card components 
Reference: https://reactstrap.github.io/components/card/
Reactstrap
JavaScript
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Difference between var, let and const keywords in JavaScript
Difference Between PUT and PATCH Request
Remove elements from a JavaScript Array
How to get character array from string in JavaScript?
How to get selected value in dropdown list using JavaScript ?
How to fetch data from an API in ReactJS ?
How to redirect to another page in ReactJS ?
How to pass data from child component to its parent in ReactJS ?
How to pass data from one component to other component in ReactJS ?
ReactJS Functional Components