Extra position utilities

Created by: jaumesala

Introduction

I've been using bootstrap since v1 and I've always wished for this kind of utilities to be present on the framework. Given that there are utilities for the position property, it seems logic to have utilities for the top, left, bottom and right propertires. I've also added some utilities to center the elements using translations.

Arrange elements

Arrange elements easily with the edge positioning utilities. The format is {property}-{position}.

Where property is one of:

• top - for the vertical top position
• left - for the horizontal left position
• bottom - for the vertical bottom position
• right - for the horizontal right position

Where position is one of:

• 0 - for 0 edge position
• 50 - for 50% edge position
• 100 - for 100% edge position

<div class="position-relative">
  <div class="position-absolute left-0 top-0"></div>
  <div class="position-absolute right-0 top-0"></div>
  <div class="position-absolute left-50 top-50"></div>
  <div class="position-absolute right-50 bottom-50"></div>
  <div class="position-absolute right-0 bottom-0"></div>
  <div class="position-absolute left-0 bottom-0"></div>
</div>

Center elements

In addition, you can also center the elements with transform utilities. The format is tt-{x-axis}{y-axis}.

Where x-axis is one of:

• x - for 50% horizontal translation
• nx - for -50% horizontal translation

Where y-axis is one of:

• y - for 50% vertical translation
• ny - for -50% vertical translation

<div class="position-relative">
  <div class="position-absolute left-0 top-0 tt-nxny"></div>
  <div class="position-absolute left-50 top-0 tt-nxny"></div>
  <div class="position-absolute right-0 top-0 tt-xny"></div>
  <div class="position-absolute right-0 top-50 tt-xny"></div>
  <div class="position-absolute left-0 bottom-0 tt-nxy"></div>
  <div class="position-absolute left-50 bottom-0 tt-nxy"></div>
  <div class="position-absolute right-0 bottom-0 tt-xy"></div>
  <div class="position-absolute left-0 top-50 tt-nxny"></div>
  <div class="position-absolute left-50 top-50 tt-nxny"></div>
</div>

I've used the format tt-{x-axis}{y-axis} to denote the transform: translateX translateY action, but I'm open to a new prefix...

Examples

Here are some basic real case usages to demonstrate these utilities.

<button type="button" class="btn btn-primary position-relative">
  Mails <span class="badge rounded-pill bg-secondary position-absolute top right tt-xny">+99</span>
  <span class="visually-hidden">unread messages</span>
</button>

<button type="button" class="btn btn-primary position-relative">
  Mails <span class="badge border border-light rounded-circle bg-danger position-absolute top-0 right-0 tt-xny p-1">
  <span class="visually-hidden">unread messages</span>
  </span>
</button>