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 0 horizontal padding
<Container>
Default container
</Container>
<Container size="xs" padding="xs">
xs container with xs horizontal padding
</Container>
<Container size={200} padding={0}>
200px container with 0 horizontal padding
</Container>

Default sizes

You can get predefined max-width values by importing CONTAINER_SIZES:

import { CONTAINER_SIZES } from '@mantine/core';
Sizemax-width
xs570px
sm770px
md970px
lg1170px
xl1370px