Search...

Card

React Bootstrap 5 Card

A React Bootstrap 5 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. Card components display content build of different elements with characteristic shadows, depth and hover effects.

React Bootstrap 5 Card example

We are going to create some react boostrap card example which are avaliable in Contrast.

Importing the React Bootstrap Card Component

You begin by importing CDBCard into your project to use the Contrast React Bootstrap Card component.

js
import { CDBCard } from "cdbreact";

Default Card:

React Bootstrap cards use the least of markup and styles possible while yet providing a lot of control and customization.

The CDBCardImage component is used to hold images in our card, the CDBCardBody component is used to build the card's body, the CDBCardTitle component is used to write titles, and the CDBCardText component is used to generate the text in our card.

Contrast React Bootstrap Card component
Basic
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac massa gravida, fermentum odio a, tristique lorem. Fusce hendrerit blandit aliquam. Vivamus finibus libero tincidunt leo venenatis malesuada. Ut mollis finibus molestie. Phasellus id felis nec arcu rhoncus maximus. Quisque luctus nisi posuere velit porttitor, eu porttitor est mattis. Integer semper quis quam ut mollis. Vivamus congue molestie fermentum. Etiam diam quam, iaculis vel felis vitae, vulputate egestas diam.
js
import React from "react";
import { CDBCard, CDBCardImage, CDBCardBody, CDBCardTitle, CDBCardText, CDBBtn, CDBContainer } from "cdbreact";
export const Card = () => {
return (
<CDBContainer>
<CDBCard style={{ width: "25rem" }}>
<CDBCardImage
className="img-fluid"
src="/img/cardbg.png" alt="Contrast React Bootstrap Card component"
/>
<CDBCardBody>
<CDBCardTitle>Basic</CDBCardTitle>
<CDBCardText>This is just a card text Get important notifications about you or activity you've missed </CDBCardText>
<CDBBtn>
Button
</CDBBtn>
</CDBCardBody>
</CDBCard>
</CDBContainer>
);
};

Simple Cards

Heading

Paragraph

Heading

Heading

Paragraph

js
import React from "react";
import { CDBCard, CDBCardBody, CDBCardTitle, CDBCardText, CDBBtn, CDBContainer } from "cdbreact";
export const Card = () => {
return (
<CDBContainer>
<CDBCard style={{ width: "25rem" }}>
<CDBCardBody>
<CDBCardTitle>Heading</CDBCardTitle>
<CDBCardText>Paragraph</CDBCardText>
<div className="d-flex justify-content-center">
<CDBBtn color="light" flat circle>
Button
</CDBBtn>
</div>
</CDBCardBody>
</CDBCard>
<CDBCard style={{ width: "25rem" }}>
<CDBCardBody>
<CDBCardTitle>Heading</CDBCardTitle>
<CDBCardText>Paragraph</CDBCardText>
<CDBBtn color="light" flat block>
Button
</CDBBtn>
</CDBCardBody>
</CDBCard>
<CDBCard style={{ width: "25rem" }}>
<CDBCardBody>
<CDBCardTitle>Heading</CDBCardTitle>
<CDBCardText>Paragraph</CDBCardText>
<CDBBtn color="light" flat circle>
Button
</CDBBtn>
</CDBCardBody>
</CDBCard>
</CDBContainer>
);
};

Bordered Cards

Heading

Paragraph

Heading

Heading

Paragraph

js
import React from "react";
import { CDBCard, CDBCardBody, CDBCardTitle, CDBCardText, CDBBtn, CDBContainer } from "cdbreact";
export const Card = () => {
return (
<CDBContainer>
<CDBCard style={{ width: "25rem" }} border>
<CDBCardBody>
<CDBCardTitle>Heading</CDBCardTitle>
<CDBCardText>Paragraph</CDBCardText>
<div className="d-flex justify-content-center">
<CDBBtn color="light" flat circle>
Button
</CDBBtn>
</div>
</CDBCardBody>
</CDBCard>
<CDBCard style={{ width: "25rem" }} border>
<CDBCardBody>
<CDBCardTitle>Heading</CDBCardTitle>
<CDBCardText>Paragraph</CDBCardText>
<CDBBtn color="light" flat block>
Button
</CDBBtn>
</CDBCardBody>
</CDBCard>
<CDBCard style={{ width: "25rem" }}>
<CDBCardBody>
<CDBCardTitle>Heading</CDBCardTitle>
<CDBCardText>Paragraph</CDBCardText>
<CDBBtn color="light" flat circle>
Button
</CDBBtn>
</CDBCardBody>
</CDBCard>
</CDBContainer>
);
};

Artwork Top Cards

Contrast React Bootstrap Card component

Heading

Paragraph

Contrast React Bootstrap Card component

Heading

Paragraph

js
import React from "react";
import { CDBCard, CDBCardBody, CDBCardImage, CDBCardTitle, CDBCardText, CDBBtn, CDBContainer } from "cdbreact";
export const Card = () => {
return (
<CDBContainer>
<CDBCard style={{ width: "25rem" }}>
<CDBCardImage
className="img-fluid"
src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"
/>
<CDBCardBody>
<CDBCardTitle>Heading</CDBCardTitle>
<CDBCardText>Paragraph</CDBCardText>
<div className="d-flex justify-content-center">
<CDBBtn color="light" flat block circle>
Button
</CDBBtn>
</div>
</CDBCardBody>
</CDBCard>
<CDBCard style={{ width: "25rem" }} border>
<CDBCardImage
className="img-fluid"
src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"
/>
<CDBCardBody>
<CDBCardTitle>Heading</CDBCardTitle>
<CDBCardText>Paragraph</CDBCardText>
<CDBBtn color="light" flat circle>
Button
</CDBBtn>
</CDBCardBody>
</CDBCard>
</CDBContainer>
);
};

Artwork Middle Cards

Heading

Paragraph

Contrast React Bootstrap Card component

Heading

Paragraph

Contrast React Bootstrap Card component
js
import React from "react";
import { CDBCard, CDBCardBody, CDBView, CDBIframe, CDBCardTitle, CDBCardText, CDBBtn, CDBContainer } from "cdbreact";
export const Card = () => {
return (
<CDBContainer>
<CDBCard style={{ width: "25rem" }}>
<CDBCardBody>
<CDBCardTitle>Heading</CDBCardTitle>
<CDBCardText>Paragraph</CDBCardText>
</CDBCardBody>
<CDBView>
<CDBIframe src="https://www.youtube.com/embed/xnczyP2jSR0"/>
</CDBView>
<CDBCardBody>
<CDBBtn color="light" flat circle>
Button
</CDBBtn>
</CDBCardBody>
</CDBCard>
<CDBCard style={{ width: "25rem" }} border>
<CDBCardBody>
<CDBCardTitle>Heading</CDBCardTitle>
<CDBCardText>Paragraph</CDBCardText>
</CDBCardBody>
<CDBView>
<CDBIframe src="https://www.youtube.com/embed/xnczyP2jSR0"/>
</CDBView>
<CDBCardBody>
<CDBBtn color="light" flat circle>
Button
</CDBBtn>
</CDBCardBody>
</CDBCard>
</CDBContainer>
);
};

Widget Cards

Pro Component

Nesting our CDBIcon in our CDBCard component allows us to have icons in our cards.

Total Downloads

1,057,891

Oct 1 - Dec 31, Worldwide

js
import React from "react";
import { CDBCard, CDBCardBody, CDBCardTitle, CDBCardText, CDBIcon, CDBContainer } from "cdbreact";
export const Card = () => {
return (
<CDBContainer>
<CDBCard style={{width: "25rem"}}>
<CDBCardBody>
<CDBCardTitle className="lead">Total Downloads</CDBCardTitle>
<CDBCardTitle tag="h2">1,057,891</CDBCardTitle>
<CDBCardText className="small text-muted">Oct 1 - Dec 31,<CDBIcon fas icon="globe"/> Worldwide</CDBCardText>
</CDBCardBody>
</CDBCard>
</CDBContainer>
);
};

Profile Display Card

Sam Russo

Senior Software Developer

Detroit, USA

js
import React from "react";
import { CDBCard, CDBPaneImage, CDBCardImage, CDBBtn, CDBCardBody, CDBCardTitle, CDBCardText, CDBIcon, CDBContainer } from "cdbreact";
export const Card = () => {
return (
<CDBContainer>
<CDBCard style={{ width: "25rem" }}>
<CDBCardImage
className="img-fluid"
src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"
/>
<CDBPaneImage style={{marginTop:"-5rem"}} className="mx-auto border" width="130px" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQ7ntUU7AzmOxa5HB8zS83sa-JFHEfZJAoI2A&usqp=CAU" />
<CDBCardBody className="d-flex flex-column align-items-center mb-4">
<CDBCardTitle>Sam Russo</CDBCardTitle>
<CDBCardText>Senior Software Developer</CDBCardText>
<CDBCardText className="text-muted">Detroit, USA</CDBCardText>
<div>
<CDBBtn size="small" color="dark"><CDBIcon fas icon="user-plus"/> Connect</CDBBtn>
<CDBBtn className="ms-3" size="small" color="warning"> Send Message </CDBBtn>
</div>
</CDBCardBody>
</CDBCard>
</CDBContainer>
);
};

Artwork Full Cards

Pro Component

Heading

Paragraph

Heading

Paragraph

Chukwudi Mezue

Product Designer

Enugu, Nigeria

Mac Xenon

Product Designer

Enugu, Nigeria

js
import React from "react";
import { CDBCard, CDBBtn, CDBCardBody, CDBCardTitle, CDBCardText, CDBIcon, CDBContainer } from "cdbreact";
export const Card = () => {
return (
<CDBContainer>
<CDBCard
style={{
width: "25rem",
backgroundImage:
"url('https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_960_720.jpg')",
}}
>
<CDBCardBody style={{ color: "white" }}>
<CDBCardTitle>Heading</CDBCardTitle>
<CDBCardText>Paragraph</CDBCardText>
</CDBCardBody>
<CDBCardBody>
<CDBBtn color="white" flat circle>
Button
</CDBBtn>
</CDBCardBody>
</CDBCard>
<CDBCard
style={{
width: "25rem",
backgroundImage:
"url('https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_960_720.jpg')",
}}
border
>
<CDBCardBody style={{ color: "white" }}>
<CDBCardTitle>Heading</CDBCardTitle>
<CDBCardText>Paragraph</CDBCardText>
</CDBCardBody>
<CDBCardBody>
<CDBBtn color="white" flat circle>
Button
</CDBBtn>
</CDBCardBody>
</CDBCard>
<CDBCard style={{ position: "relative", width: "25rem", height: "33rem", padding: "25px", backgroundImage: "url('img/rectangle.png')", backgroundRepeat: "no-repeat", backgroundPosition: "center"}}>
<CDBCardBody style={{backgroundColor:"white", width: "calc(100% - 50px)",textAlign: "center", align: "center", position: "absolute", bottom: "25px"}}>
<CDBCardTitle style={{color: "#333333"}} className="font-weight-normal">Chukwudi Mezue</CDBCardTitle>
<CDBCardText style={{color: "#333333", fontSize: "0.9rem"}} className="font-weight-lighter" >Product Designer</CDBCardText>
<CDBCardText style={{color: "#333333"}} className="font-weight-light">Enugu, Nigeria</CDBCardText>
<CDBCardBody style={{
display: "flex",
justifyContent: "space-between",
padding: "0 50px",
margin: "20px 0"
}}>
<CDBIcon size="lg" fab icon="facebook-f" style={{color: "#333333"}} />
<CDBIcon size="lg" fab icon="twitter" style={{color: "#333333"}} />
<CDBIcon size="lg" fab icon="instagram" style={{color: "#333333"}} />
</CDBCardBody>
<CDBBtn color="dark" block>
Add User
</CDBBtn>
</CDBCardBody>
</CDBCard>
<CDBCard style={{ position: "relative", width: "25rem", height: "33rem", backgroundImage: "url('img/rectangle.png')", backgroundRepeat: "no-repeat", backgroundPosition: "center"}}>
<CDBCardBody style={{backgroundColor:"white", width: "calc(100% - 50px)",textAlign: "left", align: "center", position: "absolute", bottom: 0}}>
<CDBCardTitle style={{color: "#333333"}} className="font-weight-normal">Chukwudi Mezue</CDBCardTitle>
<CDBCardText style={{color: "#333333", fontSize: "0.9rem"}} className="font-weight-lighter" >Product Designer</CDBCardText>
<CDBCardText style={{color: "#333333"}} className="font-weight-light">Enugu, Nigeria</CDBCardText>
<CDBBtn color="dark" block>
Send Message
</CDBBtn>
</CDBCardBody>
</CDBCard>
</CDBContainer>
);
};

Profile Cards

Pro Component

Mac Xenon

Product Designer

Enugu, Nigeria

Mac Xenon

Product Designer

Enugu, Nigeria

Mac Xenon

Product Designer

Enugu, Nigeria

Chukwudi Mezue

Product Designer

Enugu, Nigeria

Creating High Quality Resources and tools to Aid developers during the developement of their projects

js
import React from "react";
import { CDBCard, CDBBtn, CDBCardBody, CDBCardTitle, CDBCardText, CDBIcon, CDBCardImage, CDBPaneImage, CDBContainer } from "cdbreact";
export const Card = () => {
return (
<CDBContainer>
<CDBCard style={{
position: "relative",
width: "25rem",
height: "33rem",
padding: "25px",
backgroundImage: "url('img/rectangle.png')",
backgroundRepeat: "no-repeat",
backgroundPosition: "center"
}}>
<CDBCardBody style={{
backgroundColor: "white",
width: "calc(100% - 50px)",
textAlign: "center",
align: "center",
position: "absolute",
bottom: "25px"
}}>
<CDBCardTitle style={{ color: "#333333" }} className="font-weight-normal">Mac Xenon</CDBCardTitle>
<CDBCardText style={{ color: "#333333", fontSize: "0.9rem" }} className="font-weight-lighter">Product Designer</CDBCardText>
<CDBCardText style={{ color: "#333333" }} className="font-weight-light">Enugu, Nigeria</CDBCardText>
<CDBCardBody style={{
display: "flex",
justifyContent: "space-between",
padding: "0 50px",
margin: "20px 0"
}}>
<CDBIcon size="lg" fab icon="facebook-f" style={{ color: "#333333" }} />
<CDBIcon size="lg" fab icon="twitter" style={{ color: "#333333" }} />
<CDBIcon size="lg" fab icon="instagram" style={{ color: "#333333" }} />
</CDBCardBody>
<CDBBtn color="dark" block>
Add User
</CDBBtn>
</CDBCardBody>
</CDBCard>
<CDBCard style={{
position: "relative",
width: "25rem",
height: "33rem",
backgroundImage: "url('img/rectangle.png')",
backgroundRepeat: "no-repeat",
backgroundPosition: "center"
}}>
<CDBCardBody style={{
backgroundColor: "white",
width: "calc(100% - 50px)",
textAlign: "left",
align: "center",
position: "absolute",
bottom: 0
}}>
<CDBCardTitle style={{ color: "#333333" }} className="font-weight-normal">Mac Xenon</CDBCardTitle>
<CDBCardText style={{ color: "#333333", fontSize: "0.9rem" }} className="font-weight-lighter">Product Designe</CDBCardText>
<CDBCardText style={{ color: "#333333" }} className="font-weight-light">Enugu, Nigeria</CDBCardText>
<CDBBtn color="dark" block>
Send Message
</CDBBtn>
</CDBCardBody>
</CDBCard>
<CDBCard style={{
position: "relative",
width: "25rem",
height: "33rem",
backgroundImage: "url('img/rectangle.png')",
backgroundRepeat: "no-repeat",
backgroundPosition: "center"
}}>
<CDBCardBody style={{
backgroundColor: "white",
width: "100%",
textAlign: "center",
align: "center",
position: "absolute",
bottom: 0
}}>
<CDBCardTitle style={{ color: "#333333" }} className="font-weight-normal">Mac Xenon</CDBCardTitle>
<CDBCardText style={{ color: "#333333", fontSize: "0.9rem" }} className="font-weight-lighter">Product Designer</CDBCardText>
<CDBCardText style={{ color: "#333333" }} className="font-weight-light">Enugu, Nigeria</CDBCardText>
<CDBBtn color="dark" block>
Send Message
</CDBBtn>
<CDBCardBody style={{
display: "flex",
justifyContent: "space-between",
padding: "0 50px",
margin: "20px 0"
}}>
<CDBBtn outline flat color="dark">
<CDBIcon size="lg" fab icon="facebook-f" style={{ color: "#333333" }} />
</CDBBtn>
<CDBBtn outline flat color="dark">
<CDBIcon size="lg" fab icon="twitter" style={{ color: "#333333" }} />
</CDBBtn>
<CDBBtn outline flat color="dark">
<CDBIcon size="lg" fab icon="instagram" style={{ color: "#333333" }} />
</CDBBtn>
</CDBCardBody>
</CDBCardBody>
</CDBCard>
<CDBCard style={{ width: "25rem" }}>
<CDBCardImage
className="img-fluid"
src="https://images.unsplash.com/photo-1623184663110-89ba5b565eb6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=812&q=80"
/>
<CDBPaneImage style={{ marginTop: "-5rem", borderStyle: "solid", borderWidth: "4px" }}
className="mx-auto border-white" width="130px" src="https://images.unsplash.com/photo-1623184663110-89ba5b565eb6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=812&q=80" />
<CDBCardBody className="d-flex flex-column align-items-center mb-4 pt-1">
<CDBCardTitle>Chukwudi Mezue</CDBCardTitle>
<CDBCardText className="text-muted">Product Designer</CDBCardText>
<CDBCardText style={{ fontSize: 16, color: "#333333" }}>Enugu, Nigeria</CDBCardText>
<CDBCardText style={{ color: "#333333" }}>
Creating High Quality Resources and tools to Aid developers during the developement of
their projects
</CDBCardText>
<div className="d-flex justify-content-between w-100">
<CDBBtn className="w-100 me-4" color="dark">Add User</CDBBtn>
<CDBBtn className="w-100" outline color="dark"> Send Message </CDBBtn>
</div>
</CDBCardBody>
</CDBCard>
<CDBCard style={{ width: "25rem" }}>
<CDBCardImage
className="img-fluid"
src="https://images.unsplash.com/photo-1623184663110-89ba5b565eb6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=812&q=80"
/>
<CDBCardBody className="d-flex justify-content-between">
<CDBPaneImage style={{ marginTop: "-6rem", borderStyle: "solid", borderWidth: "4px" }}
className="border-white" width="130px" src="https://images.unsplash.com/photo-1623184663110-89ba5b565eb6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=812&q=80" />
<div className="align-items-left pt-1 pb-0">
<CDBCardTitle>Chukwudi Mezue</CDBCardTitle>
<CDBCardText className="text-muted">Product Designer</CDBCardText>
</div>
</CDBCardBody>
<CDBCardBody className="d-flex flex-column align-items-center mb-2">
<CDBCardText style={{ color: "#333333" }}>
Creating High Quality Resources and tools to Aid developers during the developement of
their projects
</CDBCardText>
<div className="d-flex justify-content-between w-100">
<CDBBtn className="w-100 me-4" color="dark">Add User</CDBBtn>
<CDBBtn className="w-100" outline color="dark"> Send Message </CDBBtn>
</div>
</CDBCardBody>
<CDBCardBody style={{
display: "flex",
justifyContent: "space-between",
padding: "0 50px",
margin: "0 0 20px"
}}>
<CDBBtn outline flat color="dark">
<CDBIcon size="lg" fab icon="facebook-f" style={{ color: "#333333" }} />
</CDBBtn>
<CDBBtn outline flat color="dark">
<CDBIcon size="lg" fab icon="twitter" style={{ color: "#333333" }} />
</CDBBtn>
<CDBBtn outline flat color="dark">
<CDBIcon size="lg" fab icon="instagram" style={{ color: "#333333" }} />
</CDBBtn>
</CDBCardBody>
</CDBCard>
<CDBCard style={{ width: "25rem" }}>
<CDBPaneImage style={{ marginTop: "2rem", borderStyle: "solid", borderWidth: "4px" }}
className="mx-auto border-white" width="130px" src="https://images.unsplash.com/photo-1623184663110-89ba5b565eb6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=812&q=80" />
<CDBCardBody className="d-flex flex-column align-items-center mb-4 pt-1">
<CDBCardTitle>Chukwudi Mezue</CDBCardTitle>
<CDBCardText className="text-muted">Product Designer</CDBCardText>
<CDBCardText style={{ fontSize: 16, color: "#333333" }}>Enugu, Nigeria</CDBCardText>
<CDBCardText style={{ color: "#333333" }}>
Creating High Quality Resources and tools to Aid developers during the developement of
their projects
</CDBCardText>
<div className="w-100">
<CDBBtn className="w-100 mb-3" color="dark">Send Message</CDBBtn>
<CDBBtn className="w-100" outline color="dark"> Send Message </CDBBtn>
</div>
</CDBCardBody>
</CDBCard>
<CDBCard style={{ width: "25rem" }}>
<CDBCardImage
className="img-fluid"
src="./img/uber.png"
/>
<CDBPaneImage style={{ marginTop: "-5rem", borderStyle: "solid", borderWidth: "4px" }}
className="mx-auto border-white" width="130px" src="https://images.unsplash.com/photo-1623184663110-89ba5b565eb6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=812&q=80" />
<CDBCardBody className="d-flex flex-column align-items-center mb-4 pt-1">
<CDBCardTitle>Chukwudi Mezue</CDBCardTitle>
<CDBCardText className="text-muted">Product Designer</CDBCardText>
<CDBCardText style={{ fontSize: 16, color: "#333333" }}>Enugu, Nigeria</CDBCardText>
<CDBCardBody style={{
width: "100%",
display: "flex",
justifyContent: "space-between",
padding: "0 70px",
margin: "10px 0 30px"
}}>
<CDBIcon size="lg" fab icon="facebook-f" style={{ color: "#333333" }} />
<CDBIcon size="lg" fab icon="twitter" style={{ color: "#333333" }} />
<CDBIcon size="lg" fab icon="instagram" style={{ color: "#333333" }} />
</CDBCardBody>
<div className="w-100">
<CDBBtn className="w-100 mb-3" color="dark">Add User</CDBBtn>
<CDBBtn className="w-100" outline color="dark"> Send Message </CDBBtn>
</div>
</CDBCardBody>
</CDBCard>
<CDBCard style={{ width: "25rem" }}>
<CDBCardImage
className="img-fluid"
src="https://images.unsplash.com/photo-1623184663110-89ba5b565eb6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=812&q=80"
/>
<CDBPaneImage style={{ marginTop: "-5rem", borderStyle: "solid", borderWidth: "4px" }}
className="mx-auto border-white" width="130px" src="https://images.unsplash.com/photo-1623184663110-89ba5b565eb6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=812&q=80" />
<CDBCardBody className="d-flex flex-column align-items-center mb-4 pt-1">
<CDBCardTitle>Chukwudi Mezue</CDBCardTitle>
<CDBCardText className="text-muted">Product Designer</CDBCardText>
<CDBCardText style={{ fontSize: 16, color: "#333333" }}>Enugu, Nigeria</CDBCardText>
<CDBCardText style={{ color: "#333333", margin: "20px 0 30px" }}>
Creating High Quality Resources and tools to Aid developers during the developement of
their projects
</CDBCardText>
<div className="w-100">
<CDBBtn className="w-100 mb-0" color="dark">Send Message</CDBBtn>
</div>
</CDBCardBody>
</CDBCard>
<CDBCard style={{ width: "25rem" }}>
<CDBPaneImage style={{ marginTop: "-5rem", borderStyle: "solid", borderWidth: "4px" }}
className="mx-auto border-white" width="130px" src="https://images.unsplash.com/photo-1623184663110-89ba5b565eb6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=812&q=80" />
<CDBCardBody className="d-flex flex-column align-items-center mb-4 pt-1">
<CDBCardTitle>Chukwudi Mezue</CDBCardTitle>
<CDBCardText className="text-muted">Product Designer</CDBCardText>
<CDBCardText style={{ fontSize: 16, color: "#333333" }}>Enugu, Nigeria</CDBCardText>
<CDBCardText style={{ color: "#333333" }}>
Creating High Quality Resources and tools to Aid developers during the developement of
their projects
</CDBCardText>
<div className="w-100">
<CDBBtn className="w-100 mb-3" color="dark">Send Message</CDBBtn>
<CDBBtn className="w-100" outline color="dark"> Send Message </CDBBtn>
</div>
</CDBCardBody>
</CDBCard>
</CDBContainer>
);
};

API Reference: Contrast React Bootstrap 5 Card Props

The props you get to use with the React Bootstrap Card component will be greatly expanded upon in this section. You'll cover what these props do, how to use them in your code, and what their default values are.

The table below shows other prop aiternatives of the CDBCard component.

NameTypeDefaultDescriptionExample
classNameStringAdds custom classes<CDBCard className="myClass" ... />
tagStringdivChanges default input tag<CDBCard tag="div" ... />
colorStringSets background color<CDBCard color="dark" .../>
borderBooleanfalseGives border<CDBCard border .../>

API Reference: Contrast React Bootstrap 5 Card Body Properties

The table below lists other prop options of the CDBCardBody component..

NameTypeDefaultDescriptionExample
classNameStringAdds custom classes<CDBCardBody className="myClass" ... />
tagfunction or StringdivChanges default html tag<CDBCardBody tag="div" ... />
cascadeBooleanfalseSwitches the CardBody to cascade style mode<CDBCardBody cascade .../>

API Reference: Contrast React Bootstrap 5 Card Image Properties

The table below lists other prop options of the CDBCardImage component.

NameTypeDefaultDescriptionExample
classNameStringAdds custom classesAdds custom classes<CDBCardImage className="myClass" ... />
tagfunction or StringimgChanges default html tag<CDBCardImage tag="div" ... />
cascadeBooleanfalseSwitches the CardBody to cascade style mode<CDBCardImage cascade .../>
hoverBooleanfalseSwitches on hover behaviour<CDBCardImage hover .../>
overlayStringwhite-lightSets the color of hover overlay<CDBCardImage overlay="white-light" ... />
srcStringSource of the image<CDBCardImage src="image_src" ... />
topBooleanfalseMakes image fluid<CDBCardImage top .../>

API Reference: Contrast React Bootstrap 5 Card Text Properties

The table below lists other prop options of the CDBCardText component.

NameTypeDefaultDescriptionExample
classNameStringAdds custom classes<CDBCardText className="myClass" ... />
tagfunction or StringpChanges default html tag<CDBCardText tag="p" ... />
mutedBooleanfalseMutes the text color<CDBCardText muted .../>
smallBooleanfalseUses html small as component's tag<CDBCardText small .../>

API Reference: Contrast React Bootstrap 5 Card Title Properties

The table below lists other prop options of the CDBCardTitle component.

NameTypeDefaultDescriptionExample
classNameStringAdds custom classes<CDBCardTitle className="myClass" ... />
tagfunction or Stringh4Changes default html tag<CDBCardTitle tag="h1" ... />
subBooleanfalseStyles title as subtitle<CDBCardTitle sub .../>

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.