🤩
Windframe Import Update is finally here.

Panel

React Bootstrap 5 Panel

React Bootstrap 5 Panels are content wrappers that are both dynamic and expandable. They may hold a range of content, have contextual background colors, and have strong display choices. They're similar to cards, however they don't have any media attached to them.

Importing the React Bootstrap 5 Panel Component

Start by importing CDBPanel into your project to use the Contrast React Bootstrap 5 Panel component.

js
import { CDBPanel } from "cdbreact";

In addition to the CDBPanel component, you import the CDBPanelTitle component to write titles in your pane, the CDBPaneText component to write texts or messages in your pane, and the CDBPaneImage component to write pane images.

js
import { CDBPanel, CDBPanelTitle, CDBPanelText } from "cdbreact";

Panel with Dropdown

Pro Component

We nest the Contrast React Bootstrap 5 Dropdown component in this tutorial section, CDBDropDown, in the CDBPanel component. We now have dropdowns in our panel as a result of this.

paneImage
Warren Briggs

Chicago

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
127 likes 54 comments
js
import React from "react";
import { CDBPanel, CDBPanelTitle, CDBPanelText, CDBDropDown, CDBDropDownToggle, CDBDropDownMenu, CDBDropDownItem, CDBPane, CDBIcon, CDBPaneImage, CDBContainer } from "cdbreact";
const Panel = () => {
return (
<CDBContainer>
<CDBPanel>
<CDBPane>
<CDBPaneImage size="md" src="https://media.istockphoto.com/photos/beautiful-woman-wearing-brown-curly-hairstyle-picture-id495006065?s=170x170" />
<div className="ml-3">
<CDBPanelTitle>Warren Briggs</CDBPanelTitle>
<CDBPanelText small>Chicago</CDBPanelText>
</div>
<CDBDropDown className="ml-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>
<CDBPanelText className="my-3">
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
</CDBPanelText>
<CDBPanelText small>
<CDBIcon far icon="thumbs-up"/>127 likes
<CDBIcon className="ml-2" far icon="comment"/>54 comments
</CDBPanelText>
</CDBPanel>
</CDBContainer>
);
};
export default Panel;

Panel with Users

Pro Component
Contrast Panel with users
Bristol
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Contrast React Bootstrap 5 Panel With Progress componentContrast React Bootstrap 5 Panel With Progress componentContrast React Bootstrap 5 Panel With Progress component
js
import React from "react";
import { CDBPanel,CDBPanelTitle, CDBPanelText, CDBCardImage, CDBPaneImage, CDBContainer } from "cdbreact";
const Panel = () => {
return (
<CDBContainer>
<CDBPanel className="p-0">
<CDBCardImage className="img-fluid" src="/img/cardbg.png" />
<div className="m-3">
<CDBPanelTitle tag="h2" >Bristol</CDBPanelTitle>
<CDBPanelText className="my-3">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</CDBPanelText>
<CDBPaneImage size="sm" src="/img/pane/pane1.png" alt="Contrast React Bootstrap 5 Panel With Progress component"/>
<CDBPaneImage size="sm" className="mx-2" src="/img/pane/pane2.png" alt="Contrast React Bootstrap 5 Panel With Progress component" />
<CDBPaneImage size="sm" src="/img/pane/pane3.png" alt="Contrast React Bootstrap 5 Panel With Progress component" />
</div>
</CDBPanel>
</CDBContainer>
);
};
export default Panel;

Panel with Label

Pro Component

In this tutorial section, we nest the CDBBadge component in the CDBPanel component. With this, our panel now has badges in it, which can serve as labels.

Label 1
Label 2
Label 3
Moon Fevers
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Contrast React Bootstrap 5 Panel With Progress componentContrast React Bootstrap 5 Panel With Progress component
js
import React from "react";
import { CDBPanel,CDBPanelTitle, CDBPanelText, CDBBadge, CDBIcon, CDBPaneImage, CDBContainer } from "cdbreact";
const Panel = () => {
return (
<CDBContainer>
<CDBPanel>
<CDBBadge color="dark" flat>Label 1</CDBBadge>
<CDBBadge color="warning" className="mx-1" flat>Label 2</CDBBadge>
<CDBBadge color="danger" flat>Label 3</CDBBadge>
<div className="mt-3 d-flex align-items-center">
<CDBPanelTitle tag="h3" >Moon Fever</CDBPanelTitle>
<CDBIcon className="ml-auto" fas icon="chart-line"/>
</div>
<CDBPanelText className="my-3">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt
</CDBPanelText>
<CDBPaneImage size="sm" src="/img/pane/pane1.png" alt="Contrast React Bootstrap 5 Panel With Progress component"/>
<CDBPaneImage size="sm" src="/img/pane/pane2.png" alt="Contrast React Bootstrap 5 Panel With Progress component"/>
</CDBPanel>
</CDBContainer>
);
};
export default Panel;

Pane List

Pro Component

My Messages

Contrast React Bootstrap 5 Panel With Progress component
Warren Briggs

Cooking

5mins Ago

Contrast React Bootstrap 5 Panel With Progress component
Lu Chen

Cooking

5mins Ago

Contrast React Bootstrap 5 Panel With Progress component
Sam

Cooking

5mins Ago

Contrast React Bootstrap 5 Panel With Progress component
Danny

Cooking

5mins Ago

Contrast React Bootstrap 5 Panel With Progress component
Lilah Loselev

Cooking

5mins Ago

js
import React from "react";
import { CDBPanel,CDBPanelTitle, CDBPanelText, CDBDropDown, CDBDropDownToggle, CDBDropDownMenu, CDBDropDownItem, CDBPane, CDBIcon, CDBPaneImage, CDBContainer } from "cdbreact";
const Panel = () => {
return (
<CDBContainer>
<CDBPanel style={{width:"320px"}}>
<CDBPane>
<CDBPanelText muted>My Messages</CDBPanelText>
<CDBDropDown className="ml-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>
<CDBPane className="mt-4">
<CDBPaneImage size="md" src="https://media.istockphoto.com/photos/beautiful-woman-wearing-brown-curly-hairstyle-picture-id495006065?s=170x170" />
<div className="ml-3">
<CDBPanelTitle>Warren Briggs</CDBPanelTitle>
<CDBPanelText small>Cooking</CDBPanelText>
</div>
<CDBPanelText muted small className="ml-auto">5mins ago</CDBPanelText>
</CDBPane>
<CDBPane className="mt-4">
<CDBPaneImage size="md" src="/img/pane/pane1.png" alt="Contrast React Bootstrap 5 Panel With Progress component">
<CDBPanelTitle>Lu Chen</CDBPanelTitle>
<CDBPanelText small>I'll call you back</CDBPanelText>
</div>
<CDBPanelText muted small className="ml-auto">27mins ago</CDBPanelText>
</CDBPane>
<CDBPane className="mt-4">
<CDBPaneImage size="md" src="/img/pane/pane2.png">
<CDBPanelTitle>Sam</CDBPanelTitle>
<CDBPanelText small>See you at school</CDBPanelText>
</div>
<CDBPanelText muted small className="ml-auto">active</CDBPanelText>
</CDBPane>
<CDBPane className="mt-4">
<CDBPaneImage size="md" src="/img/pane/pane3.png" />
<div className="ml-3">
<CDBPanelTitle >Danny</CDBPanelTitle>
<CDBPanelText small>Yeah</CDBPanelText>
</div>
<CDBPanelText muted small className="ml-auto">busy</CDBPanelText>
</CDBPane>
<CDBPane className="mt-4">
<CDBPaneImage size="md" src="/img/pane/pane4.png" />
<div className="ml-3">
<CDBPanelTitle>Lilah Loselev</CDBPanelTitle>
<CDBPanelText small>Okay sir</CDBPanelText>
</div>
<CDBPanelText muted small className="ml-auto">1hr ago</CDBPanelText>
</CDBPane>
</CDBPanel>
</CDBContainer>
);
};
export default Panel;

Panel with Progress

Pro Component

Along with the 'CDBPanel' component, we use other React Bootstrap 5 Components in this tutorial. These components are the CDBDropDown for our panel dropdowns, CDBProgress to have progress bars in our panels, CDBPane, and the CDBIcon component for icons in our panels. Check out the docs to get more insight.

Contrast React Bootstrap 5 Panel With Progress component
js
import React from "react";
import { CDBPanel,CDBPanelTitle, CDBPanelText, CDBDropDown, CDBDropDownToggle, CDBDropDownMenu, CDBDropDownItem, CDBProgress, CDBPane, CDBIcon, CDBPaneImage, CDBContainer } from "cdbreact";
const Panel = () => {
return (
<CDBContainer>
<CDBPanel>
<CDBPane>
<CDBPaneImage size="md" src="https://media.istockphoto.com/photos/beautiful-woman-wearing-brown-curly-hairstyle-picture-id495006065?s=170x170" />
<div className="ml-3">
<CDBPanelTitle>Warren Briggs</CDBPanelTitle>
<CDBPanelText small>Chicago</CDBPanelText>
</div>
<CDBDropDown className="ml-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>
<CDBPanelText className="mt-3" small>Instagram</CDBPanelText>
<CDBProgress value={75} height={5}/>
<CDBPanelText className="mt-2" small>Facebook</CDBPanelText>
<CDBProgress value={60} height={5}/>
<CDBPanelText className="mt-2" small>Twitter</CDBPanelText>
<CDBProgress value={45} height={5}/>
</CDBPanel>
</CDBContainer>
);
};
export default Panel;

API Reference: Contrast React Bootstrap 5 Panel Props

This session will increase your understanding of the props accessible with the React Bootstrap 5 Pane component. You'll discover what these properties do, what their default values are, and how to use them in your code.

Other prop options for the CDBPanel component are included in the table below.

NameTypeDefaultDescriptionExample
classNameStringAdds custom classes<CDBPanel className="myClass" ... />
tagStringdivChanges default tag<CDBPanel tag="input" ... />
colorstringSets the color of the panel<CDBPanel color="#000" .../>

API Reference: Contrast React Bootstrap 5 Panel Title Props

The table below provides the various prop options for the CDBPanelTitle component.

NameTypeDefaultDescriptionExample
classNameStringAdds custom classes<CDBPanelTitle className="myClass" ... />
tagStringh6Changes default tag<CDBPanelTitle tag="h5" ... />

API Reference: Contrast React Bootstrap 5 Panel Text Prop

The table below provides the various prop options for the 'CDBPanelText' component.

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

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help 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 UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Download the free react template

ad-banner

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast