Container

Center content horizontally with predefined max-width
Import

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%
Default container
xs container with xs horizontal padding
200px container with 0px horizontal padding
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>
);
}