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
Build fully functional accessible web applications with ease
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback