Skip to Content

Container

A centered wrapper that constrains content to a maximum width. Essential for readable line lengths and consistent page layouts, especially for text-heavy content like articles or documentation.

The container at each breakpoint has a max-width.

SizeBreakpointMax width
xs520px500px
sm768px740px
md1024px1000px
lg1280px1240px
xl1640px1600px

Component props

NameTypeDescription
isCenteredbooleanCenters the container horizontally (default: true)
isFluidbooleanMakes the container full width with no max-width constraint

Container also extends all Box props.