Float utilities

Responsive utility classes which can be used to set the float of elements.

Notation #

The float property can be used to float an element to the left, right, or neither (as in disabled floating). The class names for these utilities come in the following formats:

  • .float-{value}
  • .float-{breakpoint}-{value}

The {breakpoint} can be sm, md, lg, xl, or xxl. If the breakpoint is not provided, the element will be affected on all screen sizes (including on 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
start Sets float: left property (inverted in RTL)
end Sets float: right property (inverted in RTL)
none Sets float: none property

You can see some of these classes in action in the example below. Please note, float utilities will have no effect on flex items.

Float start

Float end

Don't float
HTML 
<!-- Float start -->
<div class="float-start">Float start</div>
<br />

<!-- Float end -->
<div class="float-end">Float end</div>
<br />

<!-- Float none -->
<div class="float-none">Don't float</div>
Up next
Interaction utilities

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.