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.

By default, Container has a horizontal padding of x4 units, but you can customize it by using padding property. For example, if you use Container to center content inside another component which already has its own padding - you can completely remove it.


sizesmallest, smaller, small, medium, large, larger-falseCenter on desktop?
paddingResponsive(number)truefalseCustom padding value
classNamestring-falseclassName for the root element
attributesobject-falseAttributes for the root element