Containers

Containers are fundamental building blocks that contain, pad, and frame content within a given device or viewport.

How they work #

Containers are the most basic layout element and they are required when using the default grid system. Containers are used to contain, pad, and (sometimes) align the content within them. While containers can be nested, most layouts do not require nested containers.

Halfmoon comes with three different types of containers:

  • .container which sets a different max-width at each responsive breakpoint
  • .container-{breakpoint} which is width: 100% until the specified breakpoint
  • .container-fluid which is width: 100% at all breakpoints

All containers are automatically centered horizontally when they do not take up the full width of the parent. The following table explains how the max-width varies for different containers across different breakpoints:

Extra small
< 576px 		Small
≥ 576px 		Medium
≥ 768px 		Large
≥ 992px 		X-Large
≥ 1200px 		XX-Large
≥ 1400px
.container 100% 540px 720px 960px 1140px 1320px
.container-sm 100% 540px 720px 960px 1140px 1320px
.container-md 100% 100% 720px 960px 1140px 1320px
.container-lg 100% 100% 100% 960px 1140px 1320px
.container-xl 100% 100% 100% 100% 1140px 1320px
.container-xxl 100% 100% 100% 100% 100% 1320px
.container-fluid 100% 100% 100% 100% 100% 100%
Up next
Grid system

Help us grow

Our main goal is to make Halfmoon the go-to framework for building websites, dashboards and tools. If you believe in our mission, consider becoming a sponsor and help us grow.

You can email us directly if you have any queries. We are always happy to answer.

Subscribe for updates

We will notify you when the framework gets a substantial update. No spam ever.

Follow us on Twitter so that you can stay updated that way.