v6.0.35

Container

Center content horizontally with predefined max-width
Import
Source
View source code
Docs
Edit this page
Package
@asuikit/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
30rem container with 0 horizontal padding
import { Container } from '@asuikit/core';


function Demo() {
  return (
    <>
      <Container>
        Default container
      </Container>


      <Container size="xs" px="xs">
        xs container with xs horizontal padding
      </Container>


      <Container size="30rem" px={0}>
        30rem container with 0 horizontal padding
      </Container>
    </>
  );
}

Configure sizes

To configure container sizes use default props on MantineProvider:

import { MantineProvider, Container } from '@asuikit/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 – @asuikit/core
Up next
Flex – @asuikit/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
sizes
Record<MantineSize, string | 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