Card is container based user interface use HTML for markup and CSS for styling.
React Card consist of various elements like header footer images multimedia action and buttons. one can construct different card as per requirement like business card, product card, Ad card, etc
React Bootstrap Card
React Bootstrap card are component, Component return a card that built from HTML and bootstrap CSS.
How to create React Card using bootstrap CSS
First one need to create a react app
npx create-react-app reactcard After that one need to install bootstrap using following command
npm install react-bootstrap bootstrap one need to import card component and bootstrap css in App.js
import React from 'react'; import 'bootstrap/dist/css/bootstrap.min.css'; import { Card, Button } from 'react-bootstrap'; function App() { return ( <Card style={{ width: '18rem' }}> <Card.Img variant="top" src="https://source.unsplash.com/user/erondu/600x400" /> <Card.Body> <Card.Title>Card Title</Card.Title> <Card.Text> Some Custom text one can write here </Card.Text> <Button variant="primary">Go somewhere</Button> </Card.Body> </Card> ); } export default App; Output looks like
React-bootstrap card image left (Example)
import React from "react"; import "bootstrap/dist/css/bootstrap.min.css"; function App() { return ( <div className="card mb-3" style={{width: '500px'}}> <div className="row no-gutters"> <div className="col-md-4"> <svg className="bd-placeholder-img" width="100%" height="250" xmlns="http://www.w3.org/2000/svg" aria-label="Placeholder: Image" preserveAspectRatio="xMidYMid slice" role="img" > <title>Placeholder</title> <rect width="100%" height="100%" fill="#868e96" /> <text x="50%" y="50%" fill="#dee2e6" dy=".3em"> Image </text> </svg> </div> <div className="col-md-8"> <div className="card-body"> <h5 className="card-title">Card title</h5> <p className="card-text"> Card Text </p> <p className="card-text"> <small className="text-muted">Card Text 2</small> </p> </div> </div> </div> </div> ); } export default App; Bootstrap card image left
Card Columns
import React from "react"; import "bootstrap/dist/css/bootstrap.min.css"; import { Card, CardColumns } from "react-bootstrap"; function CardDisplay() { return ( <CardColumns> <Card> <Card.Img variant="top" src="http://askavy.com/demo/img/img-card.jpg" /> <Card.Body> <Card.Title>Card title </Card.Title> <Card.Text> Card Text This card has supporting text below as a natural lead-in to additional content.{" "} </Card.Text> </Card.Body> <Card.Footer> <small className="text-muted">Last updated 10 mins ago</small> </Card.Footer> </Card> <Card> <Card.Img variant="top" src="http://askavy.com/demo/img/img-card.jpg" /> <Card.Body> <Card.Title>Card title</Card.Title> <Card.Text> Card Text his card has supporting text below as a natural lead-in to additional content.{" "} </Card.Text> </Card.Body> <Card.Footer> <small className="text-muted">Last updated 10 mins ago</small> </Card.Footer> </Card> <Card> <Card.Img variant="top" src="http://askavy.com/demo/img/img-card.jpg" /> <Card.Body> <Card.Title>Card title</Card.Title> <Card.Text> Card Text his card has supporting text below as a natural lead-in to additional content.{" "} </Card.Text> </Card.Body> <Card.Footer> <small className="text-muted">Last updated 11 mins ago</small> </Card.Footer> </Card> </CardColumns> ); } function App() { return ( <div> <CardDisplay /> </div> ); } export default App; React Card – Bootstrap 4 and Material Design
import React from "react"; import "bootstrap/dist/css/bootstrap.min.css"; import "mdbreact/dist/css/mdb.css"; import "@fortawesome/fontawesome-free/css/all.min.css"; import { MDBBtn, MDBCard, MDBCardBody, MDBCardImage, MDBCardTitle, MDBCardText, MDBRow, MDBCol, MDBIcon, } from "mdbreact"; const CardMaterail = () => { return ( <MDBRow> <MDBCol md="4"> <MDBCard cascade> <MDBCardImage cascade className="img-fluid" overlay="white-light" hover src="http://askavy.com/demo/img/img-card.jpg" /> <MDBBtn floating tag="a" className="ml-auto mr-4 lighten-3 mdb-coalor" action > <MDBIcon icon="chevron-right" /> </MDBBtn> <MDBCardBody cascade> <MDBCardTitle>Card title</MDBCardTitle> <hr /> <MDBCardText> Some quick example text to build on the card title and make up the bulk of the card's content. </MDBCardText> </MDBCardBody> <div className="rounded-bottom mdb-color lighten-3 text-center pt-3"> <ul className="list-unstyled list-inline font-small"> <li className="list-inline-item pr-2 white-text"> <MDBIcon far icon="clock" /> 05/10/2015 </li> <li className="list-inline-item pr-2"> <a href="#!" className="white-text"> <MDBIcon far icon="comments" className="mr-1" /> 12 </a> </li> <li className="list-inline-item pr-2"> <a href="#!" className="white-text"> <MDBIcon fab icon="facebook-f" className="mr-1" /> 21 </a> </li> <li className="list-inline-item"> <a href="#!" className="white-text"> <MDBIcon fab icon="twitter" className="mr-1" />5 </a> </li> </ul> </div> </MDBCard> </MDBCol> </MDBRow> ); }; export default CardMaterail; 
Top comments (0)