Float utilities

Halfmoon comes with responsive utility classes which can be used to set the float property of elements.

Notation #

The class names for the float utilities come in the the following formats:

  • .float-{position}
  • .float-{breakpoint}-{position}

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 {position} can be one of the following:

{position} Description
left Sets the float: left property
right Sets the float: right property
none Sets the float: none property

You can see some of these classes in action in the example below:

Float left on all screen sizes
Float right on all screen sizes
Don't float on all screen sizes
Float left on medium screens and up (width > 768px)
Float right on small screens and up (width > 576px)
Float left, don't float on extra large screens (width > 1200px)
<!-- Float left -->
<div class="float-left">
  ...
</div>
<!-- Float right -->
<div class="float-right">
  ...
</div>
<!-- Don't float -->
<div class="float-none">
  ...
</div>
<!-- Float left on medium screens and up (width > 768px) -->
<div class="float-md-left">
  ...
</div>
<!-- Float right on small screens and up (width > 576px) -->
<div class="float-sm-right">
  ...
</div>
<!-- Float left, don't float on extra large screens (width > 1200px) -->
<div class="float-left float-xl-none">
  ...
</div>

Clearfix #

Floats can be easily cleared by adding the .clearfix class to the parent element.

Float left
Float right
<div class="clearfix">
  <div class="float-left d-inline-block">Float left</div> <!-- d-inline-block = display: inline-block -->
  <div class="float-right d-inline-block">Float right</div> <!-- d-inline-block = display: inline-block -->
</div>

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.