React Box

React Bootstrap Box

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

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

Basic examples

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

Div
Span

Paragraph

Section 
        
            
            import React from "react";
            import { MDBBox } from 'mdbreact';

            const BoxPage = () => {
              return (
                <React.Fragment>
                  <MDBBox>
                    Div
                  </MDBBox>
                  <MDBBox tag="span">
                    Span
                  </MDBBox>
                  <MDBBox tag="p">
                    Paragraph
                  </MDBBox>
                  <MDBBox tag="section">
                    Section
                  </MDBBox>
                </React.Fragment>
              );
            };

            export default BoxPage;

Display

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

You can read more about display here.

d-flex
d-block
d-none
d-inline 
        
            
            import React from "react";
            import { MDBBox } from 'mdbreact';

            const BoxPage = () => {
              return (
                <React.Fragment>
                  <MDBBox display="flex">
                    d-flex
                  </MDBBox>
                  <MDBBox display="block">
                    d-block
                  </MDBBox>
                  <MDBBox display="none">
                    d-none
                  </MDBBox>
                  <MDBBox display="inline">
                    d-inline
                  </MDBBox>
                </React.Fragment>
              );
            };

            export default BoxPage;

Flex

With MDBBox 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.

You can read more about flex here.

d-flex justify-content-center
d-flex justify-content-end

Column

Column

Column

Row

Row

Row

        
            
            import React from "react";
            import { MDBBox } from 'mdbreact';

            const BoxPage = () => {
              return (
                <React.Fragment>
                  <MDBBox display="flex" justifyContent="center" >
                    d-flex justify-content-center
                  </MDBBox>
                  <MDBBox display="flex" justifyContent="end">
                    d-flex justify-content-end
                  </MDBBox>
                  <MDBBox display="flex" flex="column">
                    d-flex flex-column
                  </MDBBox>
                  <MDBBox display="flex" flex="row">
                    d-flex flex-row
                  </MDBBox>
                  <MDBBox display="flex" flex="fill">
                    d-flex flex-fill
                  </MDBBox>
                  <MDBBox display="flex" alignItems="start">
                    d-flex align-items-start
                  </MDBBox>
                  <MDBBox display="flex" alignItems="center">
                    d-flex align-items-center
                  </MDBBox>
                  <MDBBox display="flex" alignContent="start">
                    d-flex align-content-start
                  </MDBBox>
                  <MDBBox display="flex" alignContent="center">
                    d-flex align-content-center
                  </MDBBox>
                  <MDBBox display="flex" alignSelf="center">
                    d-flex align-self-center
                  </MDBBox>
                  <MDBBox display="flex" alignSelf="start">
                    d-flex align-self-start
                  </MDBBox>
                </React.Fragment>
              );
            };

            export default BoxPage;

Colors

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

You can read more about colors here.

red color
pink color
blue color
cyan color 
        
            
          import React from "react";
          import { MDBBox } from 'mdbreact';

          const BoxPage = () => {
            return (
              <React.Fragment>
                <MDBBox color="red">
                  red color
                </MDBBox>
                <MDBBox color="pink">
                  pink color
                </MDBBox>
                <MDBBox color="blue">
                  blue color
                </MDBBox>
                <MDBBox color="cyan">
                  cyan color
                </MDBBox>
              </React.Fragment>
            );
          };

          export default BoxPage;

Background Colors

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

primary color
danger color
warning color
success color 
        
            
          import React from "react";
          import { MDBBox } from 'mdbreact';

          const BoxPage = () => {
            return (
              <React.Fragment>
                <MDBBox bgColor="primary">
                  primary color
                </MDBBox>
                <MDBBox bgColor="danger">
                  danger color
                </MDBBox>
                <MDBBox bgColor="warning">
                  warning color
                </MDBBox>
                <MDBBox bgColor="success">
                  success color
                </MDBBox>
              </React.Fragment>
            );
          };

          export default BoxPage;

React Box - 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.

Box import statement

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

        
            
          import { MDBBox } from "mdbreact";

API Reference: Box Properties

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

Name Type Default Description Example
className String Adds custom classes <MDBBox className="myClass" />
tag String div Changes default tag <MDBBox tag="section" />
display String block Set display to element. Choose one of these: 'none', 'inline', 'inline-block', 'block', 'table', 'table-row', 'table-cell', 'flex', 'inline-flex'. <MDBBox display="flex" />
justifyContent String Set justify-content to children od MDBBox. Choose one of these: 'start', 'end', 'center', 'between', 'around'. <MDBBox justifyContent="start" />
flex String Set flex class to children od MDBBox. Choose one of these: 'row', 'column', 'row-reverse', 'column-reverse', 'wrap', 'nowrap', 'wrap-reverse', 'fill', 'grow-0', 'grow-0', 'shrink-0', 'shrink-1', 'center'. <MDBBox flex="column" />
alignItems String Set align-items class to children od MDBBox. Choose one of these: 'start', 'end', 'center', 'between, 'stretch'. <MDBBox alignItems="start" />
alignContent String Set align-content class to children od MDBBox. Choose one of these: 'start', 'end', 'center', 'between, 'stretch', 'around'. <MDBBox alignContent="start" />
color String Change color of text in the MDBBox component. Choose one of these from MDB: 'red', 'pink', 'purple', 'deep-purple', 'indigo', 'blue', 'light-blue', 'cyan', 'teal', 'green', 'light-green', 'yellow', 'amber', 'orange', 'deep-orange', 'brown', 'grey', 'blue-grey', 'mdb-color white'. You can also chose default colors from Bootstrap like: 'primary', 'secondary', 'success', 'info', 'default,' 'warning', 'danger', 'dark', 'muted', 'light'. <MDBBox color="teal" />
bgColor string Sets background color of the box component. Choose one of these: 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark' <MDBBox color="primary" />
m string or number With margin you can set margin top/bottom/right/left/x/y from 0 to 5. You can use string or number. <MDBBox m="5" />
<MDBBox mt="1" />
<MDBBox mb="4" />
<MDBBox my={2} />
<MDBBox mx={4} />
p string or number With padding you can set padding top/bottom/right/left/x/y from 0 to 5. You can use string or number. <MDBBox p="5" />
<MDBBox pt="1" />
<MDBBox pb="4" />
<MDBBox py={2} />
<MDBBox px={4} />