Container

The container centers your content horizontally. It's the most basic layout element.

Example

Live Editor

<Container maxWidth='500px' bgColor='#cfe8fc' padding='1rem'> Container </Container>

<Container maxWidth='500px' bgColor='#cfe8fc' padding='1rem'>
  Container
</Container>

Result

Loading...

Color

You can specify background color and text color for Container.

Live Editor

<Container maxWidth='500px' bgColor='#32d8b4' color='#FFF' padding='1rem'> Container </Container>

<Container maxWidth='500px' bgColor='#32d8b4' color='#FFF' padding='1rem'>
  Container
</Container>

Result

Loading...

Border

A border can be specified for Container.

Live Editor

<Container maxWidth='500px' border='2px solid #32d8b4' borderRadius='8px' padding='1rem' > Container </Container>

<Container
  maxWidth='500px'
  border='2px solid #32d8b4'
  borderRadius='8px'
  padding='1rem'
>
  Container
</Container>

Result

Loading...

Padding & Margin

You can set padding and margin on Container respectively.

Live Editor

<Container maxWidth='500px' bgColor='#cfe8fc' padding='1rem 3rem' margin='40px auto' > Container </Container>

<Container
  maxWidth='500px'
  bgColor='#cfe8fc'
  padding='1rem 3rem'
  margin='40px auto'
>
  Container
</Container>

Result

Loading...