Container

Center content horizontally with predefined max-width
Import

Usage

Container is the most basic layout element, it centers content horizontally and adds 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
theme={{
components: {
Container: {
defaultProps: {
sizes: {
xs: 540,
sm: 720,
md: 960,
lg: 1140,
xl: 1320,
},
},
},
},
}}
>
<Container size="sm">Your app</Container>
</MantineProvider>
);
}
Download more icon variants from https://tabler-icons.io/i/search

Container component props

NameTypeDescription
fluid
boolean
If fluid is set to true, size prop is ignored and Container can expand to 100% of width
size
number | "xs" | "sm" | "md" | "lg" | "xl"
Predefined container max-width or number for max-width in px
sizes
Record<MantineSize, number>
Container sizes