Position utilities

Responsive utility classes which can be used to set the position and arrangement of elements.

Create amazing Typeform-like forms and pages just by writing Markdown!

Notation #

The position property can be set using the following utility classes:

  • .position-{value}
  • .position-{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
static Sets position: static property
relative Sets position: relative property
absolute Sets position: absolute property
fixed Sets position: fixed property
sticky Sets position: sticky property

Arrange elements #

Elements can be easily arranged using the edge positioning utilities. The class names for these utilities come in the following formats:

  • .{property}-{position}
  • .{property}-{breakpoint}-{position}

The {property} can be one of the following:

{property} Description
top Sets the vertical top position
start Sets the horizontal left position (inverted in RTL)
bottom Sets the vertical bottom position
end Sets the horizontal right position (inverted in RTL)

The {position} can be one of the following:

{position} Description
0 Sets 0 edge position
50 Sets 50% edge position
100 Sets 100% edge position

You can see these classes in action in the example below.

HTML
<div class="position-relative">
  <div class="position-absolute top-0 start-0"></div>
  <div class="position-absolute top-0 end-0"></div>
  <div class="position-absolute top-50 start-50"></div>
  <div class="position-absolute bottom-50 end-50"></div>
  <div class="position-absolute bottom-0 start-0"></div>
  <div class="position-absolute bottom-0 end-0"></div>
</div>

Center elements #

You can also center the elements using the transform utility classes:

  • .translate-middle / .translate-middle-{breakpoint} — centers both horizontally and vertically
  • .translate-middle-x / .translate-middle-{breakpoint}-x — centers horizontally
  • .translate-middle-y / .translate-middle-{breakpoint}-y — centers vertically
HTML
<div class="position-relative">
  <div class="position-absolute top-0 start-0 translate-middle"></div>
  <div class="position-absolute top-0 start-50 translate-middle"></div>
  <div class="position-absolute top-0 start-100 translate-middle"></div>
  <div class="position-absolute top-50 start-0 translate-middle"></div>
  <div class="position-absolute top-50 start-50 translate-middle"></div>
  <div class="position-absolute top-50 start-100 translate-middle"></div>
  <div class="position-absolute top-100 start-0 translate-middle"></div>
  <div class="position-absolute top-100 start-50 translate-middle"></div>
  <div class="position-absolute top-100 start-100 translate-middle"></div>
</div>

It is often useful to center elements only in one direction (horizontal or vertical), and as mentioned above, this can be done using .translate-middle-x and .translate-middle-y.

HTML
<div class="position-relative">
  <div class="position-absolute top-0 start-0"></div>
  <div class="position-absolute top-0 start-50 translate-middle-x"></div>
  <div class="position-absolute top-0 end-0"></div>
  <div class="position-absolute top-50 start-0 translate-middle-y"></div>
  <div class="position-absolute top-50 start-50 translate-middle"></div>
  <div class="position-absolute top-50 end-0 translate-middle-y"></div>
  <div class="position-absolute bottom-0 start-0"></div>
  <div class="position-absolute bottom-0 start-50 translate-middle-x"></div>
  <div class="position-absolute bottom-0 end-0"></div>
</div>

Examples #

Given below are some real life examples of these classes being used to build common UI/UX patterns for different components.

Marker
HTML
<!-- Input with inset label -->
<div class="position-relative">
  <label for="search-input" class="position-absolute top-50 start-0 translate-middle-y z-1 text-body-secondary ps-2">
    <i class="fa-regular fa-search"></i>
    <span class="visually-hidden">Search</span>
  </label>
  <input type="text" name="search" class="form-control" id="search-input" placeholder="Search" style="padding-left: 1.75rem;">
</div>

<!-- Button with floating badge -->
<button type="button" class="btn btn-secondary position-relative">
  <i class="fa-light fa-inbox me-1"></i> Inbox
  <span class="badge position-absolute top-0 start-100 translate-middle text-bg-primary">1</span>
</button>

<!-- Marker with arrow -->
<div class="position-relative d-inline-block px-3 py-1 text-bg-secondary border border-secondary rounded-pill">
  Marker <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-1" fill="var(--bs-secondary)" xmlns="http://www.w3.org/2000/svg"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>
</div>

Please note, the icons being used are taken from the Font Awesome icon library (opens in new tab). As shown in the examples above, the positioning utility classes can be used with different components in lots of useful ways. Here's another example of a step progress indicator.

HTML
<!-- Step progress indicator -->
<div class="position-relative my-4">
  <div class="progress bg-secondary bg-opacity-50 border-0 shadow-none" role="progressbar" aria-label="Progress" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="height: 1px;">
    <div class="progress-bar" style="width: 50%;"></div>
  </div>
  <button type="button" class="position-absolute top-0 start-0 translate-middle-y btn btn-primary rounded-pill" style="width: 30px;">1</button>
  <button type="button" class="position-absolute top-0 start-50 translate-middle btn btn-primary rounded-pill" style="width: 30px;">2</button>
  <button type="button" class="position-absolute top-0 end-0 translate-middle-y btn btn-secondary rounded-pill" style="width: 30px;">3</button>
</div>
Up next
Sizing 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.