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.

The following table explains how the max-width varies for different breakpoints.

Containers will be automatically centered horizontally when they do not take up the full width of the parent.

Practical usage #

By default, containers have no margins or padding. This is by design, as having various elements with different margins (and padding) often makes it difficult to align content perfectly. Therefore, the ideal way to build pages in Halfmoon is by using content containers(.content) and cards (.card) inside the containers described on this page.

This is explained in great detail in the next section, particulary in the last example. We highly recommend going through the next section of the documentation to get a better understanding of the use of containers in Halfmoon.

Credits and special thanks #

The containers in Halfmoon are almost identical to the ones found in Bootstrap. Therefore, huge credits (and special thanks) must be given to the Bootstrap team and contributors. The appropriate copyright notice can be found in the CSS files.