Search...

Pane

React Bootstrap 5 Pane Component is part of a window that gives the user more information or quick access to common software functionality. A common example is a preview pane, a pane with a location etc.

Importing the React Bootstrap 5 Pane Component

You begin by importing CDBPane into your project to use the Contrast React Bootstrap 5 5 Pane component.

js
import { CDBPane } from "cdbreact";

Pane with Location Marker

Pro Component

You import the CDBPanelTitle component to write headings in your pane, the CDBPanelText component to write texts or messages in your pane, and the CDBPaneImage component for your pane images, in addition to the CDBPane component.

We also import the CDBIcon. We can have icons in our pane by nesting the CDBIcon in our CDBPane.

Warren Briggs

Australia

300m

js
import React from "react";
import { CDBPanel, CDBPane, CDBPanelTitle, CDBPanelText, CDBPaneImage, CDBIcon, CDBContainer } from "cdbreact";
export const Pane = () => {
return (
<CDBContainer>
<CDBPanel style={{width:"400px", borderRadius: "12px"}}>
<CDBPane>
<CDBPaneImage size="lg" src="https://media.istockphoto.com/photos/beautiful-woman-wearing-brown-curly-hairstyle-picture-id495006065?s=170x170" />
<div className="ms-4" style={{marginLeft: "22px", marginTop:"9px"}}>
<CDBPanelTitle style={{fontSize:"17px"}}>Warren Briggs</CDBPanelTitle>
<CDBPanelText style={{fontSize:"15px"}}>Australia</CDBPanelText>
<p style={{fontSize:"12px", color:"#bb2124"}}>{"300m"} <CDBIcon fas icon="map-marker-alt" /></p>
</div>
</CDBPane>
</CDBPanel>
</CDBContainer>
);
};

Pane with Dropdown

Pro Component

The React Bootstrap 5 5 Dropdown component is nestled in this tutorial area, CDBDropDown, in the CDBPane component. , We now have dropdowns in our pane as a result of this.

Warren Briggs

Breafast

js
import React from "react";
import { CDBPane, CDBDropDownItem, CDBDropDown, CDBDropDownMenu, CDBDropDownToggle, CDBPanel, CDBPanelTitle, CDBPanelText, CDBPaneImage, CDBIcon, CDBContainer } from "cdbreact";
export const Pane = () => {
return (
<CDBContainer>
<CDBPanel style={{width:"400px", borderRadius: "12px"}}>
<CDBPane style={{display: "flex", justifyContent: "space-between", alignItems: "center", flexDirection: "row"}}>
<div style={{display: "flex", justifyContent: "space-between", alignItems: "center", flexDirection: "row"}}>
<CDBPaneImage size="lg" src="/img/pane/pane1.png" />
<div style={{marginLeft: "22px"}}>
<CDBPanelTitle>Warren Briggs</CDBPanelTitle>
<CDBPanelText small>Breakfast</CDBPanelText>
</div>
</div>
<CDBDropDown style={{marginLeft: "22px"}}>
<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>
</CDBPanel>
</CDBContainer>
);
};

Contrast React Bootstrap 5 5 Pane Props

This section will elaborate on the props available with the React Bootstrap 5 5 Pane component. You'll learn what these props do, how to utilize them, and what their default values are.

Other prop options for the 'CDBPane' component are listed in the table below.

NameTypeDefaultDescriptionExample
classNameStringAdds custom classes<CDBPane className="myClass" ... />
tagStringdivChanges default input tag<CDBPane tag="div" ... />

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.