Container is a responsive layout utility to control width of the main content area.


Container should be used as a wrapper for your main content. It provides the content with max-width for larger screens and adds horizontal paddings for mobile.

By default, Container takes the full width of the parent. it supports size property from smallest to larger to control the max-width.

If you use Container to center content inside another component which already has its own padding - you can remove it from Container with padded={false}.


sizesmallest, smaller, small, medium, large, larger-falseCenter on desktop?
paddedbooleantruefalseShould have padding?
classNamestring-falseclassName for the root element
attributesobject-falseAttributes for the root element