<Container> Component

<Container> is a generic container with responsive padding width & height based on browser's width at certain breakpoints.

This component is great for creating <main> or <section> of your page.

Installing <Container> Component

There are 2 ways to install <Container> component into your react app project:

  • Install the Specific Package of <Container> Component
  • Install the Whole Reusable-UI Component Pack, including the <Container> Component

Adjusting the Children Space

By default the <Container>'s childen space is inside the <Container>'s padding.

But in some cases, you may want some children or sub <section>s to fill over the <Container>'s padding. For example: a hero section or highlighted sections. There are 2 special className to do that: 'fill' and 'fill-self'.

Fill the <Container>'s Padding

To make the child element(s) or sub <section>(s) fills the <Container>'s padding, add a 'fill' to the child's className.

The child's padding itself is preserved as original, so the content alignment is shifted.

Here the demonstration:

Preview
The first child
The second child applied className='fill'
The third child
The fourth child applied className='fill'
The fifth child

Show code

When the child is located at the top or bottom, the 'fill' class removes the padding-top and/or padding-bottom of the <Container>.

Preview
The first child applied className='fill'
The second child
The third child
The fourth child
The fifth child applied className='fill'

Show code

Take Over the <Container>'s Padding

To make the child element(s) or sub <section>(s) takes over the <Container>'s padding, add a 'fill-self' to the child's className.

The child's padding copies (take over) the <Container>'s padding, so the content alignment is preserved.

Here the demonstration:

Preview
The first child
The second child applied className='fill-self'
The third child
The fourth child applied className='fill-self'
The fifth child

Show code

When the child is located at the top or bottom, the 'fill-self' class also takes over the padding-top and/or padding-bottom of the <Container>.

Preview
The first child applied className='fill-self'
The second child
The third child
The fourth child
The fifth child applied className='fill-self'

Show code

Variant Properties

The alternative appearances of the <Container> layout without changing the <Container>'s functionality.

size Property

Defines the alternative size of the <Container>.

The possible values are:

  • undefined
  • 'sm'
  • 'md'
  • 'lg'

Here the preview:

Preview
An <Container> with sm size
An <Container> with md size
An <Container> with lg size

Show code

theme Property

Defines the contextual theme of the <Container>.

The possible values are:

  • undefined
  • 'primary'
  • 'secondary'
  • 'success'
  • 'info'
  • 'warning'
  • 'danger'
  • 'light'
  • 'dark'

Here the preview:

Preview
An <Container> with primary theme
An <Container> with secondary theme
An <Container> with success theme
An <Container> with info theme
An <Container> with warning theme
An <Container> with danger theme
An <Container> with light theme
An <Container> with dark theme

Show code

gradient Property

Activates a 3D mode of the <Container>.

The possible values are:

  • undefined
  • 'inherit'
  • true
  • false

Here the preview:

Preview
An <Container> with gradient mode
An <Container> with gradient mode
An <Container> with gradient mode
An <Container> with gradient mode
An <Container> with gradient mode
An <Container> with gradient mode
An <Container> with gradient mode
An <Container> with gradient mode

Show code

outlined Property

Activates an outlined mode (background-less, contrast foreground, and contrast border) of the <Container>.

The possible values are:

  • undefined
  • 'inherit'
  • true
  • false

Here the preview:

Preview
An <Container> with outlined mode
An <Container> with outlined mode
An <Container> with outlined mode
An <Container> with outlined mode
An <Container> with outlined mode
An <Container> with outlined mode
An <Container> with outlined mode
An <Container> with outlined mode

Show code

mild Property

Activates a mild mode (mild background, contrast foreground, and contrast border) of the <Container>.

The possible values are:

  • undefined
  • 'inherit'
  • true
  • false

Here the preview:

Preview
An <Container> without mild mode
An <Container> without mild mode
An <Container> without mild mode
An <Container> without mild mode
An <Container> without mild mode
An <Container> without mild mode
An <Container> without mild mode
An <Container> without mild mode

Show code

nude Property

Activates an nude mode (background-less, padding-less, and border-less) of the <Container>.

The possible values are:

  • undefined
  • true
  • false

Here the preview:

Preview
An <Container> with nude mode
An <Container> with nude mode
An <Container> with nude mode
An <Container> with nude mode
An <Container> with nude mode
An <Container> with nude mode
An <Container> with nude mode
An <Container> with nude mode

Show code

Variables

There are several variables of <Container> you can customize. Changing the variables affects all <Container> instance and other components that depend on <Container>.

Here the exposed variables:

  • Borders
  • Spacings

The example of accessing, modifying, & adding variables:

Show code