Container

Act as top level wrapper so that the inner content, such as the main column of a website, displays nicely, both in desktop and mobile.

In desktop, it would centers its content and limit its width. In mobile, it ensures minimum padding.

limited width container

It claims a minimum padding, limits its own width and centers itself through margins.

size: The max-width. Defaults to md (aka 960px, 60rem). We may pick 720px instead by setting sm. If we are to provide an arbitrary numeric value, we may use maw directly for less indirection.

The default padding is 16px, aka md. We may set it with px.

fluid container

We may opt for a fluid container: the container spreads to occupy the whole width of its parent. It still brings some padding. For that, we add fluid or set size to 100%.

This is overkill because we may use a div with some padding instead.

earlymorning logo

© 2025 - All rights reserved

Container

Act as top level wrapper so that the inner content, such as the main column of a website, displays nicely, both in desktop and mobile.

In desktop, it would centers its content and limit its width. In mobile, it ensures minimum padding.

limited width container

It claims a minimum padding, limits its own width and centers itself through margins.

size: The max-width. Defaults to md (aka 960px, 60rem). We may pick 720px instead by setting sm. If we are to provide an arbitrary numeric value, we may use maw directly for less indirection.

The default padding is 16px, aka md. We may set it with px.

fluid container

We may opt for a fluid container: the container spreads to occupy the whole width of its parent. It still brings some padding. For that, we add fluid or set size to 100%.

This is overkill because we may use a div with some padding instead.