Search...

Widgets

React Bootstrap Widgets

Bootstrap 5 Widgets are third-party applications that are embedded into the website's body as a stand-alone feature.

An example of a website widget is the direct contact widget, which allows your users to contact you easily like the one found on our website.

Using React Bootstrap Widget

In this tutorial we use the CDBCard component to create our widgets. Check our docs for more information on the CDBCard component.

js
import { CDBCard, CDBCardBody, CDBCardTitle, CDBCardText, CDBCardImage } from "cdbreact";

Blog Card

Pro Component
profile

techlead

profile

A Dummy blog title sample

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

js
import React from "react";
import { CDBCard, CDBDropDown, CDBDropDownMenu, CDBDropDownToggle, CDBDropDownItem, CDBPane, CDBPaneImage, CDBCardImage, CDBBtn, CDBCardBody, CDBCardTitle, CDBCardText, CDBIcon, CDBContainer } from "cdbreact";
export const Card = () => {
return (
<CDBContainer>
<CDBCard style={{width: "25rem"}}>
<CDBCardBody className="p-1">
<CDBPane className="border-bottom p-3">
<CDBPaneImage size="xs" src="https://media.istockphoto.com/photos/beautiful-woman-wearing-brown-curly-hairstyle-picture-id495006065?s=170x170" />
<CDBCardText className="m-0 ms-3">techlead</CDBCardText>
<CDBDropDown className="ms-auto">
<CDBDropDownToggle color="white"><CDBIcon className="text-muted" fas icon="ellipsis-h" /></CDBDropDownToggle>
<CDBDropDownMenu>
<CDBDropDownItem disabled>Edit Profile</CDBDropDownItem>
<CDBDropDownItem divider />
<CDBDropDownItem>Action 1</CDBDropDownItem>
<CDBDropDownItem>Action 2</CDBDropDownItem>
</CDBDropDownMenu>
</CDBDropDown>
</CDBPane>
<CDBCardImage
className="img-fluid my-3"
src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"
/>
<div className="mx-2 mb-4">
<CDBCardTitle>A Dummy blog title sample</CDBCardTitle>
<CDBCardText className="text-muted mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</CDBCardText>
<div>
<CDBBtn color="dark" className="py-1 me-2"><CDBIcon className="ps-0" fas icon="arrow-up"/>11</CDBBtn>
<CDBBtn color="dark" className="py-1"><CDBIcon className="ps-0" fas icon="arrow-down"/>2</CDBBtn>
</div>
<div className="my-2">
<CDBBtn flat color="none" className="p-0"><CDBIcon far icon="comments"/>21.4k</CDBBtn>
<CDBBtn flat color="none" className="p-0 mx-4"><CDBIcon fas icon="share"/>Share</CDBBtn>
<CDBBtn color="warning" className="py-1"><CDBIcon far icon="save"/>Save</CDBBtn>
</div>
</div>
</CDBCardBody>
</CDBCard>
</CDBContainer>
);
};

Our widget above has a dropdown, icons, and buttons. To have these things in your project you would have to import the CDBDropDown ( and dropdown affiliated components, see in the docs), CDBIcons, CDBBtn.

We also import CDBPane for the top of this widget.

Widget Cards

Pro Component
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>
);
};

Counter Card

Pro Component
Customers

852k

Oct 1 - Dec 31, Worldwide

27.4%Since last quarter

js
import React from "react";
import { CDBCard, CDBCardBody, CDBCardTitle, CDBCardText, CDBIcon, CDBContainer } from "cdbreact";
export const Card = () => {
return (
<CDBContainer>
<CDBCard style={{width: "25rem"}}>
<CDBCardBody>
<CDBIcon size="2x" className="p-4 bg-primary" fas icon="chart-line"/>
<CDBCardTitle className="lead">Customers</CDBCardTitle>
<CDBCardTitle tag="h2">852k</CDBCardTitle>
<CDBCardText className="small text-muted">Oct 1 - Dec 31,<CDBIcon fas icon="globe"/> Worldwide</CDBCardText>
<CDBCardText className="text-success">
<CDBIcon fas icon="angle-up"/> 27.4%
<span style={{fontSize:"0.9em"}} className="ms-2 text-muted">Since last quarter</span>
</CDBCardText>
</CDBCardBody>
</CDBCard>
</CDBContainer>
);
};

Invoices

Pro Component

Order History

Manage billing information and view receipts

Invoice #120345

Billed August 21, 2019

Invoice #120344

Billed July 21, 2019

js
import React from "react";
import { CDBCard, CDBPane, CDBBtn, CDBCardBody, CDBCardTitle, CDBCardText, CDBContainer } from "cdbreact";
export const Card = () => {
return (
<CDBContainer>
<CDBCard style={{width: "25rem"}}>
<CDBCardBody className="p-0">
<CDBPane className="py-3 px-3 border-bottom">
<div>
<CDBCardTitle className="mb-3 mt-0 lead" >Order History</CDBCardTitle>
<CDBCardText className="text-muted">Manage billing information and view receipts</CDBCardText>
</div>
</CDBPane>
<CDBPane className="py-3 px-3 border-bottom">
<div>
<CDBCardTitle className="mb-3 mt-0 h6" >Invoice #120345</CDBCardTitle>
<CDBCardText className="text-muted">Billed August 21, 2019</CDBCardText>
</div>
<CDBBtn outline size="small" className="ms-auto" color="success" flat>Pay now</CDBBtn>
</CDBPane>
<CDBPane className="py-3 px-3">
<div>
<CDBCardTitle className="mb-3 mt-0 h6" >Invoice #120344</CDBCardTitle>
<CDBCardText className="text-muted">Billed July 21, 2019</CDBCardText>
</div>
</CDBPane>
</CDBCardBody>
</CDBCard>
</CDBContainer>
);
};

Ratings

Pro Componentratingcard
js
import React from "react";
import { CDBCard, CDBProgress, CDBRating, CDBCardBody, CDBCardTitle, CDBCardText, CDBIcon, CDBContainer } from "cdbreact";
export const Card = () => {
return (
<CDBContainer>
<CDBCard style={{width: "25rem"}}>
<CDBCardBody>
<CDBCardTitle className="lead">Average Rating</CDBCardTitle>
<CDBCardTitle tag="h2">4.7</CDBCardTitle>
<CDBRating feedback/>
<CDBCardText className="text-muted">Based on 231,156 ratings</CDBCardText>
<div className="text-muted">
<div className="d-flex align-items-center">
<span>5</span>
<CDBIcon fas icon="star" className="me-3"/>
<CDBProgress value={50} colors="success"/>
</div>
<div className="d-flex align-items-center">
<span>4</span>
<CDBIcon fas icon="star" className="me-3"/>
<CDBProgress value={40} colors="warning"/>
</div>
<div className="d-flex align-items-center">
<span>3</span>
<CDBIcon fas icon="star" className="me-3"/>
<CDBProgress value={30} colors="primary"/>
</div>
<div className="d-flex align-items-center">
<span>2</span>
<CDBIcon fas icon="star" className="me-3"/>
<CDBProgress value={20} colors="dark"/>
</div>
<div className="d-flex align-items-center">
<span>1</span>
<CDBIcon fas icon="star" className="me-3"/>
<CDBProgress value={10} colors="danger"/>
</div>
</div>
</CDBCardBody>
</CDBCard>
</CDBContainer>
);
};

Events

Pro Component

Events

Newmarket Nights

Organized by University of Oxford

Time: 6:00AM

Place: Cambridge Boat Club, Cambridge

Noco Hemp Expo

Organized by University of Oxford

Thu, 12 Sep - Sat, 18 Sep 2020

Place: Denver Expo Club, USA

Canadian National Exhibition (CNE)

Organized by University of Oxford

Fri, 20 Sep - Mon, 07 Oct 2020

Place: Toronto , Canada

See All

js
import React from "react";
import { CDBCard, CDBPane, CDBCardBody, CDBCardTitle, CDBCardText, CDBIcon, CDBContainer } from "cdbreact";
export const Card = () => {
return (
<CDBContainer>
<CDBCard style={{width: "25rem"}}>
<CDBCardTitle className="lead p-4 border-bottom">Events</CDBCardTitle>
<CDBCardBody className="py-0">
<CDBPane className="border-bottom pb-2">
<CDBIcon size="4x" far icon="calendar-alt text-danger"/>
<div className="ms-3">
<CDBCardTitle className="mb-1 font-weight-bold lead">New market Nights</CDBCardTitle>
<CDBCardText className="mb-2">Organized by University of Oxford</CDBCardText>
<CDBCardText className="mb-0 small text-muted">Time: 6:00AM</CDBCardText>
<CDBCardText className="mb-0 small text-muted">Place: Cambridge Boat Club, Cambridge</CDBCardText>
</div>
</CDBPane>
<CDBPane className="border-bottom pb-2">
<CDBIcon size="4x" far icon="calendar-alt text-danger"/>
<div className="ms-3">
<CDBCardTitle className="mb-1 font-weight-bold lead">Noco Hemp Expo</CDBCardTitle>
<CDBCardText className="mb-2">Organized by University of Oxford</CDBCardText>
<CDBCardText className="mb-0 small text-muted">Thu, 12 Sep - Sat, 18 Sep 2020</CDBCardText>
<CDBCardText className="mb-0 small text-muted">PPlace: Denver Expo Club, USA</CDBCardText>
</div>
</CDBPane>
<CDBPane className="pb-2">
<CDBIcon size="4x" far icon="calendar-alt text-danger"/>
<div className="ms-3">
<CDBCardTitle className="mb-1 font-weight-bold lead">Canadian National Exhibition (CNE)</CDBCardTitle>
<CDBCardText className="mb-2">Organized by University of Oxford</CDBCardText>
<CDBCardText className="mb-0 small text-muted">Fri, 20 Sep - Mon, 07 Oct 2020</CDBCardText>
<CDBCardText className="mb-0 small text-muted">Place: Toronto , Canada</CDBCardText>
</div>
</CDBPane>
</CDBCardBody>
<CDBCardText className="p-4 text-center pointer border-top">See All</CDBCardText>
</CDBCard>
</CDBContainer>
);
};

Alerts and Notifications

Pro Component

We use CDBCheckbox to enable our widget have checkboxes in them.

Alerts & Notifications

Company News

Get Rocket news, announcements, and product updates

Account Activity

Get important notifications about you or activity you've missed

Meetups Near You

Get an email when a Dribbble Meetup is posted close to my location

js
import React from "react";
import { CDBCard, CDBPane, CDBCheckbox, CDBCardBody, CDBCardTitle, CDBContainer } from "cdbreact";
export const Card = () => {
return (
<CDBContainer>
<CDBCard style={{width: "25rem"}}>
<CDBCardBody className="py-0">
<CDBCardTitle className="lead m-0 py-3 border-bottom">Alerts & Notifications</CDBCardTitle>
<CDBPane className="py-3 border-bottom">
<div>
<CDBCardTitle className="my-0 mb-2 h6" >Company News</CDBCardTitle>
<p className="small m-0">Get Rocket news, announcements, and product updates</p>
</div>
<CDBCheckbox className="ms-auto"/>
</CDBPane>
<CDBPane className="py-3 border-bottom">
<div>
<CDBCardTitle className="my-0 mb-2 h6" >Account Activity</CDBCardTitle>
<p className="small m-0">Get important notifications about you or activity you've missed</p>
</div>
<CDBCheckbox className="ms-auto"/>
</CDBPane>
<CDBPane className="py-3">
<div>
<CDBCardTitle className="my-0 mb-2 h6" >Meetups Near You</CDBCardTitle>
<p className="small m-0">Get an email when a Dribbble Meetup is posted close to my location</p>
</div>
<CDBCheckbox className="ms-auto"/>
</CDBPane>
</CDBCardBody>
</CDBCard>
</CDBContainer>
);
};

API

In this section you will find advanced information about these widgets. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use to work with it.

API Reference: Contrast React Bootstrap Card Properties

The table below shows the configuration options 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 Card Body Properties

The table below shows the configuration 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 Card Image Properties

The table below shows the configuration 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 Card Text Properties

The table below shows the configuration 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 Card Title Properties

The table below shows the configuration 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.