Box

React Bootstrap boxes are layout components which help to write build components for of the CSS utility needs.

Examples

Box component can be any component from React.ElementType like div, span, img, video etc. The basic component is a div.

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

With CDBox component you can set any display CSS style from Bootstrap 4 to CDBox component like d-none, d-flex etc.

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 CDBox component you can set flexbox CSS styles to this component and render it on your website. You can use props justifyContent, flex, alignItems, alignContent, alignSelf.

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

With CDBox component you can set text CSS colors to element between CDBox component.

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

With CDBox component you can set background CSS colors to element to CDBox component.

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

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

Contrast Box Import Statement

In order to use Box component make sure you have imported proper module first.

import { CDBBox } from "cdbreact";

API Reference: Contrast Box Properties

The table below shows the configuration options of the CDBBox component.