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
896 B
896 B
productId, title, components, githubLabel
| productId | title | components | githubLabel |
|---|---|---|---|
| system | React Container component | Container | component: 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>