Sizing utilities

Halfmoon comes with responsive utility classes which can be used to set the width and height of elements.

Specific sizing #

The width of an element can be set to a specific size using the following classes:

  • .w-{size}
  • .w-{breakpoint}-{size}

The height of an element can be set to a specific size using the following classes:

  • .h-{size}
  • .h-{breakpoint}-{size}

The {breakpoint} can be sm, md, lg, or xl. If the breakpoint is not provided, the element will be affected on all screen sizes (including extra small screens). On the other hand, if it is provided, the element will be affected only for that breakpoint and up.

The {size} can be one of the following:

{size} Description
25 Sets the width or height to 2.5rem (25px)
50 Sets the width or height to 5rem (50px)
100 Sets the width or height to 10rem (100px)
150 Sets the width or height to 15rem (150px)
200 Sets the width or height to 20rem (200px)
250 Sets the width or height to 25rem (250px)
300 Sets the width or height to 30rem (300px)
350 Sets the width or height to 35rem (350px)
400 Sets the width or height to 40rem (400px)
450 Sets the width or height to 45rem (450px)
500 Sets the width or height to 50rem (500px)
550 Sets the width or height to 55rem (550px)
600 Sets the width or height to 60rem (600px)
You can see a few of these classes in action in the example below. The third box will have a width of 30rem (300px) on small screens and above, ie, where screen width > 576px. Below this, it will have a width of 20rem (200px). This is because of the use of the responsive (with breakpoint) utitlity class.
.w-100
.h-100
.w-150
.h-100
.w-200
.w-sm-300
.h-150
<!-- First box -->
<div class="w-100 h-100"> <!-- w-100 = width: 10rem (100px), h-100 = height: 10rem (100px) -->
  ...
</div>
<!-- Second box -->
<div class="w-150 h-100"> <!-- w-150 = width: 15rem (150px), h-100 = height: 10rem (100px) -->
  ...
</div>
<!-- Third box -->
<div class="w-200 w-sm-300 h-150"> <!-- w-200 = width: 20rem (200px), w-sm-300 = width: 30rem (300px) only on small screens and up (> 576px), h-150 = height: 15rem (150px) -->
  ...
</div>

Relative to the parent #

The width of an element (relative to its parent) can be set using the following classes:

  • .w-{value}
  • .w-{breakpoint}-{value}

The height of an element (relative to its parent) can be set using the following classes:

  • .h-{value}
  • .h-{breakpoint}-{value}

Once again, the {breakpoint} can be sm, md, lg, or xl. If the breakpoint is not provided, the element will be affected on all screen sizes (including extra small screens). On the other hand, if it is provided, the element will be affected only for that breakpoint and up.

The {value} can be one of the following:

{value} Description
auto Sets the width or height to auto
quarter Sets the width or height to 25%
half Sets the width or height to 50%
three-quarter Sets the width or height to 75%
full Sets the width or height to 100%
You can see some of these classes in action in the example below. The third box will take up 75% of the parent container's width on medium screens and above, ie, where screen width > 768px. Below this, it will take up 100% of the parent container's width. The fifth box will take up 50% of the parent container's height on large screens and above, ie, where screen width > 992px. Below this, it will take up 100% of the parent container's height.
.w-half (50%)
.w-full (100%)
.w-full (100%)
.w-md-three-quarter (75%)
.h-three-quarter (75%)
.h-full (100%)
.h-lg-half (50%)
<!-- First box -->
<div class="w-half"> <!-- w-half = width: 50% -->
  ...
</div>
<!-- Second box -->
<div class="w-full"> <!-- w-full = width: 100% -->
  ...
</div>
<!-- Third box -->
<div class="w-full w-md-three-quarter"> <!-- w-full = width: 100%, w-md-three-quarter = width: 75% only on medium screens and up (> 768px) -->
  ...
</div>
<!-- Fourth box -->
<div class="h-100"> <!-- h-100 = height: 10rem (100px) -->
  <div class="h-three-quarter"> <!-- h-three-quarter = height: 75% -->
    ...
  </div>
</div>
<!-- Fifth box -->
<div class="h-150"> <!-- h-150 = height: 15rem (150px) -->
  <div class="h-full h-lg-half"> <!-- h-full = height: 100%, h-lg-half = height: 50% only on large screens and up (> 992px)  -->
    ...
  </div>
</div>

Max width and height #

The maximum width of an element (relative to its parent) can be set using the following classes:

  • .mw-full sets the max-width: 100% property.
  • .mw-{breakpoint}-full sets the max-width: 100% property, but only for that breakpoint and up.

The maximum height of an element (relative to its parent) can be set using the following classes:

  • .mh-full sets the max-height: 100% property.
  • .mh-{breakpoint}-full sets the max-height: 100% property, but only for that breakpoint and up.

In both cases, the {breakpoint} can be sm, md, lg, or xl.

More examples #

The following table shows some more examples of how the sizing utility classes can be used:

Classes Description
.w-full width: 100%
.h-quarter height: 25%
.w-full and .mw-full width: 100% and max-width: 100%
.h-sm-half height: 50%
Only for small screens and up
.w-100 width: 10rem (100px)
.h-300 height: 30rem (300px)
.w-lg-500 width: 50rem (500px)
Only for large screens and up

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.