Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
969 B
969 B
productId, title, components, githubLabel, githubSource
| productId | title | components | githubLabel | githubSource |
|---|---|---|---|---|
| material-ui | React Container component | Container, PigmentContainer | component: Container | packages/mui-material/src/Container |
Container
The container centers your content horizontally. It's the most basic layout element.
While containers can be nested, most layouts do not require a nested container.
{{"component": "@mui/docs/ComponentLinkHeader", "design": false}}
Fluid
A fluid container width is bounded by the maxWidth prop value.
{{"demo": "SimpleContainer.js", "iframe": true, "defaultCodeOpen": false}}
<Container maxWidth="sm">
Fixed
If you prefer to design for a fixed set of sizes instead of trying to accommodate a fully fluid viewport, you can set the fixed prop.
The max-width matches the min-width of the current breakpoint.
{{"demo": "FixedContainer.js", "iframe": true, "defaultCodeOpen": false}}
<Container fixed>