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>
Build fully functional accessible web applications faster than ever
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