Default Container (lg)

Default Container - Max width 1200px on large screens

Container Sizes

Extra Small (xs) - 444px max

XS Container

Small (sm) - 600px max

SM Container

Medium (md) - 900px max

MD Container

Large (lg) - 1200px max

LG Container

Extra Large (xl) - 1536px max

XL Container

Fluid Container (no max-width)

Fluid Container - Takes full width of parent

Container with vs without Gutters

With Gutters (default)

Container with default padding (gutters)

Without Gutters

Container without padding (disableGutters)

Real-world Example

My Application

Built with Material Design Container

Welcome

This is an example of how the Container component provides a consistent, centered layout that adapts to different screen sizes. The content is automatically centered and constrained to optimal reading widths.

Responsive

Adapts to screen size

Centered

Auto-centered content

Consistent

Uniform spacing

Container Component Test