Search...

Box

React Bootstrap 5 Box

React Bootstrap 5 boxes are layout components that assist in the development of CSS utility components.

Depending on the value of the 'tag' prop, the React Bootstrap 5 Box component can become any element from 'React.ElementType' such as 'div','span', 'image', 'video', and so on. A 'div' element is the default.

Span
Div

Paragraph

Section

Importing the React Bootstrap 5 Box component

You begin by importing 'CDBBox' into your project to use the React Bootstrap 5 Box component.

js
import { CDBBox } from 'cdbreact';

The 'tag' prop accepts a value that represents the HTML element that the 'CDBBox' component is trying to replicate.

js
import React from 'react';
import { CDBBox, CDBContainer } from 'cdbreact';
export const Box = () => {
return (
<CDBContainer>
<CDBBox tag="span">Span</CDBBox>
<CDBBox tag="div">Div</CDBBox>
<CDBBox tag="p">Paragraph</CDBBox>
<CDBBox tag="section">Section</CDBBox>
</CDBContainer>
);
};

Display

You can use any display CSS style from Bootstrap 4 to the 'CDBox' component with the React Bootstrap 5 component, such as 'd-none', 'd-flex', and so on.

Display FLex
Display Block
Display Inline
js
import React from 'react';
import { CDBBox, CDBContainer } from 'cdbreact';
export const Box = () => {
return (
<CDBContainer>
<CDBBox display="flex">Display Flex</CDBBox>
<CDBBox display="block">Display Block</CDBBox>
<CDBBox display="none">Dislpay None</CDBBox>
<CDBBox display="inline">Display Inline</CDBBox>
</CDBContainer>
);
};

Flex

With React Bootstrap, we can apply CSS flexbox styles. To accomplish this, we adjust the 'display' prop on the 'CDBBox' component.

Just like in ordinary CSS Flex, we can utilize props like 'justifyContent', 'flex', 'alignItems', 'alignContent', and 'alignSelf'.

Justify Content Center
Justify Content End

Column

Column

Column

Row

Row

Row

Fill
Align Items Start
Align Items Center
Align Content Start
Align Content Center
Align Self Start
Align Self Center
js
import React from 'react';
import { CDBBox, CDBContainer } from 'cdbreact';
export const Box = () => {
return (
<CDBContainer>
<CDBBox display="flex" justifyContent="center">
Justify Content Center
</CDBBox>
<CDBBox display="flex" justifyContent="end">
Justify Content End
</CDBBox>
<CDBBox display="flex" flex="column">
<CDBBox tag="p">Column</CDBBox>
<CDBBox tag="p">Column</CDBBox>
<CDBBox tag="p">Column</CDBBox>
</CDBBox>
<CDBBox display="flex" flex="row">
<CDBBox tag="p">Row</CDBBox>
<CDBBox tag="p">Row</CDBBox>
<CDBBox tag="p">Row</CDBBox>
</CDBBox>
<CDBBox display="none">
<CDBBox display="flex" flex="fill">
<CDBBox tag="p">Fill</CDBBox>
</CDBBox>
<CDBBox display="flex" flex="row" alignItems="start">
Align Items Start
</CDBBox>
<CDBBox display="flex" flex="row" alignItems="center">
Align Items Center
</CDBBox>
<CDBBox display="flex" alignContent="start">
Align Content Start
</CDBBox>
<CDBBox display="flex" alignContent="center">
Align Content Center
</CDBBox>
<CDBBox display="flex" alignSelf="start">
Align Self Start
</CDBBox>
<CDBBox display="flex" alignSelf="center">
Align Self Center
</CDBBox>
</CDBBox>
</CDBContainer>
);
};

Colors

To give your CDBBox component text colors, use the 'color' prop. The code displayed below will enable you give your text colors of your choice.

Red Color
Green Color
Yellow Color
Blue Color
js
import React from 'react';
import { CDBBox, CDBContainer } from 'cdbreact';
export const Box = () => {
return (
<CDBContainer>
<CDBBox color="red">Red Color</CDBBox>
<CDBBox color="green">Green Color</CDBBox>
<CDBBox color="yellow">Pink Color</CDBBox>
<CDBBox color="blue">Blue Color</CDBBox>
</CDBContainer>
);
};

Background Colors

To give the 'CDBBox' component a background color, use the 'bg' prop. The code below will allow you to add the background color for your project.

Success Background
Secondary Background
Danger Background
Warning Background
js
import React from 'react';
import { CDBBox, CDBContainer } from 'cdbreact';
export const Box = () => {
return (
<CDBContainer>
<CDBBox bg="success">Success Background</CDBBox>
<CDBBox bg="secondary">Secondary Background</CDBBox>
<CDBBox bg="danger">Danger Background</CDBBox>
<CDBBox bg="warning">Warning Background</CDBBox>
</CDBContainer>
);
};

API Reference: Contrast React Bootstrap 5 Box Props

The props you get to use with the Contrast React Bootstrap 5 Box component will be elaborated upon in this section. You'll learn what these props do, how to utilize them in your code, and what their default values are.

Other CDBBox component prop options are included in the table below.

NameTypeDefaultDescriptionExample
classNameStringAdds custom classesAdds custom classes<CDBBox className="myClass" ... />
colorStringChange color of text in the CDBox component. Choose one of these from CDB: red, pink, purple, deep-purple, indigo, blue, light-blue, cyan, teal, green, light-green, yellow, amber, orange, deep-orange, brown, grey, blue-grey, cdb-color white. You can also chose default colors from Bootstrap like: primary, secondary, success, info, default, warning, danger, dark, muted, light.<CDBBox color="pink" ... />
alignContentStringSet align-content class to children of CDBox. Choose one of these: start, end, center, between, stretch, around.<CDBBox alignContent="start" .../>
alignItemsStringSet align-items class to children of CDBox. Choose one of these: start, end, center, between, stretch.<CDBBox alignItems="start" .../>
alignSelfStringSet align-self class to children of CDBox. Choose one of these: start, end, center, between, stretch.<CDBBox alignSelf="start" .../>
bgColorStringSets background color of the box component. Choose one of these: primary, secondary, success, danger, warning, info, light, dark<CDBBox bgColor="light" .../>
displayStringSet display to element. Choose one of these: none, inline, inline-block, block, table, table-row, table-cell, flex, inline-flex.<CDBBox display="inline" ...>
flexStringSet flex class to children of CDBox. Choose one of these: row, column, row-reverse, column-reverse, wrap, nowrap, wrap-reverse, fill, grow-0, grow-0, shrink-0, shrink-1, center.<CDBBox flex="column" .../>
justifyContentStringSet justify-content to children od CDBox. Choose one of these: start, end, center, between, around.<CDBBox justifyContent="start" ...>
mString or NumberWith margin you can set margin top/bottom/right/left/x/y from 0 to 5. You can use string or number.<CDBox m="5" .../>, <CDBox mt="1" .../>, <CDBox mb="4" .../>, <CDBox my={2} .../>, <CDBox mx={4} .../>
pString or NumberWith padding you can set padding top/bottom/right/left/x/y from 0 to 5. You can use string or number.<CDBox p="5" .../>, <CDBox pt="1" .../>, <CDBox pb="4" .../>, <CDBox py={2} .../>, <CDBox px={4} .../>

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.

ad-banner