Card

Some features in this component requires CDB React Pro package.Clickhereto try it out.

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.

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.

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.

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

Paragraph

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

Paragraph

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

Heading

Paragraph

Heading

Paragraph

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

Heading

Paragraph

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

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

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

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

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.

Name	Type	Default	Description	Example
className	String		Adds custom classes	<CDBCard className="myClass" ... />
tag	String	div	Changes default input tag	<CDBCard tag="div" ... />
color	String		Sets background color	<CDBCard color="dark" .../>
border	Boolean	false	Gives border	<CDBCard border .../>

API Reference: Contrast React Bootstrap 5 Card Body Properties

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

Name	Type	Default	Description	Example
className	String		Adds custom classes	<CDBCardBody className="myClass" ... />
tag	function or String	div	Changes default `html` tag	<CDBCardBody tag="div" ... />
cascade	Boolean	false	Switches 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.

Name	Type	Default	Description	Example
className	String	Adds custom classes	Adds custom classes	<CDBCardImage className="myClass" ... />
tag	function or String	img	Changes default `html` tag	<CDBCardImage tag="div" ... />
cascade	Boolean	false	Switches the CardBody to cascade style mode	<CDBCardImage cascade .../>
hover	Boolean	false	Switches on hover behaviour	<CDBCardImage hover .../>
overlay	String	white-light	Sets the color of hover overlay	<CDBCardImage overlay="white-light" ... />
src	String		Source of the image	<CDBCardImage src="image_src" ... />
top	Boolean	false	Makes image fluid	<CDBCardImage top .../>

API Reference: Contrast React Bootstrap 5 Card Text Properties

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

Name	Type	Default	Description	Example
className	String		Adds custom classes	<CDBCardText className="myClass" ... />
tag	function or String	p	Changes default `html` tag	<CDBCardText tag="p" ... />
muted	Boolean	false	Mutes the text color	<CDBCardText muted .../>
small	Boolean	false	Uses 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.

Name	Type	Default	Description	Example
className	String		Adds custom classes	<CDBCardTitle className="myClass" ... />
tag	function or String	h4	Changes default `html` tag	<CDBCardTitle tag="h1" ... />
sub	Boolean	false	Styles 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.

Collapse

Carousel