Container
Centers page content with a max width and responsive side padding.Page container
Preview
Code
This content is centered and capped at the sm breakpoint (640px).
Installation
Package
CLI (copy source)
pnpm
pnpm add @advui/corenpm
npm install @advui/coreUsage
import { Container } from '@advui/core'
<Container size="lg">…page…</Container>
// Edge to edge on phones, padded from md
<Container gutter={{ base: '0', md: '6' }}>…</Container>Examples
Gutter and centered content
The default gutter, `gutter="0"` and `centerContent`.Preview
Code
Default gutter: 16px, 24px from md, 32px from lg
gutter="$0": edge to edge
centerContent
API reference
Container
Takes View style props too.| Prop | Type | Default | Description |
|---|---|---|---|
size | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'full' | 'xl' | Max width: the breakpoint width (640, 768, 1024, 1280 or 1536 px), or `full` for no maximum (Bootstrap’s `container-fluid`). |
gutter | SpaceTokensor a breakpoint map | { base: '4', md: '6', lg: '8' } | Side padding. A token or map replaces the default at every breakpoint; `"0"` removes it. Since 0.9.0. |
centerContent | boolean | false | Centers the children horizontally (`alignItems: center`). Since 0.9.0. |
From Bootstrap
| Bootstrap | Adv UI | Notes |
|---|---|---|
.container | <Container> | Up to 1280px (xl), centered. |
.container-lg | <Container size="lg"> | Also sm, md, xl and xxl. |
.container-fluid | <Container size="full"> | There is no separate fluid prop. |
.px-0 on a container | gutter="0" | Or a map, such as { base: "0", md: "6" }. |
Accessibility
- Visual only.
Responsive behavior
By default the side padding grows from 16px (phones) to 24px (md) and 32px (lg). gutter takes a token or a mobile-first map { base, sm, md, … }; it compiles to CSS media queries on web.