Container

Center content horizontally with predefined max-width
Import
Source
View source code
Docs
Edit this page
Package
@mantine/core

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
  • sizes - configures container sizes
  • 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>
  );
}
Go back
Center – @mantine/core
Up next
Flex – @mantine/core

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
Build fully functional accessible web applications faster than ever
About
ContributeAbout MantineChangelogReleases
Community
Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
Project
Mantine UIDocumentationGithub organizationnpm organization
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter