Container

Usage

Container is the most basic layout element, it centers content horizontally and add horizontal padding from theme. Component accepts these props:

• size – controls default max width
• padding – controls horizontal padding of container, use xs, sm, md, lg, xl for value defined in theme.spacing or number to set horizontal padding in px
• fluid – overwrites size prop and sets max width to 100%

import { Container } from '@mantine/core';

function Demo() {
  return (
    <>
      <Container>
        Default container
      </Container>

      <Container size="xs" px="xs">
        xs container with xs horizontal padding
      </Container>

      <Container size={200} px={0}>
        200px container with 0px horizontal padding
      </Container>
    </>
  );
}

Configure sizes

To configure container sizes use default props on MantineProvider:

import { MantineProvider, Container } from '@mantine/core';

function App() {
  return (
    <MantineProvider
      defaultProps={{
        Container: {
          sizes: {
            xs: 540,
            sm: 720,
            md: 960,
            lg: 1140,
            xl: 1320,
          },
        },
      }}
    >
      <Container size="sm">Your app</Container>
    </MantineProvider>
  );
}