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.

Extra small
(<= 576px)
Small and up
(> 576px)
Medium and up
(> 768px)
Large and up
(> 992px)
Extra large
(> 1200px)
.container 100% 540px 720px 960px 1140px
.container-sm 100% 540px 720px 960px 1140px
.container-md 100% 100% 720px 960px 1140px
.container-lg 100% 100% 100% 960px 1140px
.container-xl 100% 100% 100% 100% 1140px
.container-fluid 100% 100% 100% 100% 100%

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.

Coming soon

  • More components
  • More variables and customization
  • Form builder and validator JS
  • Themes and templates

Subscribe for updates


  • We will notify you when the framework gets a substantial update. No spam or marketing.
  • You can also follow us on Twitter and stay updated that way.