Bootstrap Position

Use these shorthand utilities for quickly configuring the position of an element.

Position values

Quick positioning classes are available, though they are not responsive.

<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>

Responsive position

With Torus Kit you can use responsive position utility classes defined with .position-<variant> for all resolutions and .position-<breakpoint>-<variant> for individual resolutions.

<!-- Position relative -->

<div class="position-relative">...</div>
<div class="position-sm-relative">...</div>
<div class="position-md-relative">...</div>
<div class="position-lg-relative">...</div>
<div class="position-xl-relative">...</div>
<div class="position-xxl-relative">...</div>

<!-- Position absolute -->

<div class="position-absolute">...</div>
<div class="position-sm-absolute">...</div>
<div class="position-md-absolute">...</div>
<div class="position-lg-absolute">...</div>
<div class="position-xl-absolute">...</div>
<div class="position-xxl-absolute">...</div>

<!-- Position fixed -->

<div class="position-fixed">...</div>
<div class="position-sm-fixed">...</div>
<div class="position-md-fixed">...</div>
<div class="position-lg-fixed">...</div>
<div class="position-xl-fixed">...</div>
<div class="position-xxl-fixed">...</div>

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
  • start - for the horizontal left position (in LTR)
  • bottom - for the vertical bottom position
  • end - for the horizontal right position (in LTR)

Where position is one of:

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

(You can add more position values by adding entries to the $position-values Sass map variable.)

<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

In addition, you can also center the elements with the transform utility class .translate-middle.

This class applies the transformations translateX(-50%) and translateY(-50%) to the element which, in combination with the edge positioning utilities, allows you to absolute center an element.

<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>

By adding .translate-middle-x or .translate-middle-y classes, elements can be positioned only in horizontal or vertical direction.

<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>

Enhanced position

Torus Kit enhances Bootstrap position and bring more control over it. Using data-tor="place.<value>" you can define the element position using semantic keywords like <left|center|right> for horizontal axis and <top|middle|bottom> for vertical axis. These are the default values:

KeywordCSS valueTransform
leftleft: 0none
centerleft: 50%translateX(-50%)
rightright: 0none
toptop: 0none
middletop: 50%translateY(-50%)
bottombottom: 0none

Left

To position the element to the left, add data-tor="place.left place.<top|middle|bottom>"

<div class="position-relative">
<div class="position-absolute" data-tor="place.left place.top"></div>
<div class="position-absolute" data-tor="place.left place.middle"></div>
<div class="position-absolute" data-tor="place.left place.bottom"></div>
</div>

Center

To position the element to the center, add data-tor="place.center place.<top|middle|bottom>"

<div class="position-relative">
<div class="position-absolute" data-tor="place.center place.top"></div>
<div class="position-absolute" data-tor="place.center place.middle"></div>
<div class="position-absolute" data-tor="place.center place.bottom"></div>
</div>

To position the element to the right, add data-tor="place.right place.<top|middle|bottom>"

<div class="position-relative">
<div class="position-absolute" data-tor="place.right place.top"></div>
<div class="position-absolute" data-tor="place.right place.middle"></div>
<div class="position-absolute" data-tor="place.right place.bottom"></div>
</div>

Custom position

You can also defined custom, value-based position using data-tor="<variant>(<value>)".

<div class="position-relative">
<div class="position-absolute bg-red" data-tor="place.top(30px)" id="a------------------a"></div>
<div class="position-absolute bg-blue" data-tor="place.left(25%)"></div>
<div class="position-absolute bg-dark" data-tor="place.right(2rem)"></div>
<div class="position-absolute bg-maroon" data-tor="place.bottom(2rem) place.center"></div>
<div class="position-absolute bg-green" data-tor="place.bottom(-1rem) place.right"></div>
</div>

Responsive position

Torus Kit responsive custom position utility allows you to set different position values across the resolutions! This gives you total control about the position of your elements. Use data-tor="<variant>(<breakpoint>::<value>)"

<div class="position-relative">
<div class="position-absolute bg-red" data-tor="place.top(10px md::50px)"></div>
<div class="position-absolute bg-blue" data-tor="place.left(5em md::20% xl::80%)"></div>
<div class="position-absolute bg-dark" data-tor="place.right(2rem) place.bottom(30% xl::50%)"></div>
</div>

Enhanced elements shift and center

While Bootstrap allows you to center element using .translate-middle utility class, it only translates the element by 50% in limited directions. Torus kit data-tor="shift.*" utility gives you more control about translate value and translate direction.

This utility will shift the element from its original positions by using translateX|translateY. It also possible to set your own custom translate value

Because the data-tor uses CSS translate function, it's not possible to combine it with the Custom effects.

Predefined values

Using data-tor="shift.<up|down|left|right>(<value>)" syntax you can shift the element by any <value>. The most common values are 50% which center the element, and 100% which will shift the element about the value of its height.

Vertical direction

To shift the element in vertical direction, use data-tor="shift.<up|down>(<value>)"

<div class="position-relative">
<div class="position-absolute" data-tor="place.top place.left"></div>
<div class="position-absolute" data-tor="place.top place.center shift.up(50%)"></div>
<div class="position-absolute" data-tor="place.top place.right shift.up(100%)"></div>

<div class="position-absolute" data-tor="place.bottom place.left"></div>
<div class="position-absolute" data-tor="place.bottom place.center shift.down(50%)"></div>
<div class="position-absolute" data-tor="place.bottom place.right shift.down(100%)"></div>
</div>
Horizontal direction

To shift the element in horizontal direction, use data-tor="<left|right>(<value>)"

<div class="position-relative">
<div class="position-absolute" data-tor="place.left place.top"></div>
<div class="position-absolute" data-tor="place.left place.middle shift.left(50%)"></div>
<div class="position-absolute" data-tor="place.left place.bottom shift.left(100%)"></div>

<div class="position-absolute" data-tor="place.right place.top"></div>
<div class="position-absolute" data-tor="place.right place.middle shift.right(50%)"></div>
<div class="position-absolute" data-tor="place.right place.bottom shift.right(100%)"></div>
</div>

Custom values

You can also set the custom shift translate value.

<div class="position-relative">
<div class="position-absolute" data-tor="place.top place.left shift.up(25%) left(20%)"></div>
<div class="position-absolute" data-tor="place.top place.center shift.up(150%)"></div>
<div class="position-absolute" data-tor="place.top place.right shift.up(1rem) left(2rem)"></div>

<div class="position-absolute" data-tor="place.bottom place.left shift.down(60%) right(3rem)"></div>
<div class="position-absolute" data-tor="place.bottom place.center shift.down(10px)"></div>
<div class="position-absolute" data-tor="place.bottom place.right shift.down(100%) left(1rem)"></div>
</div>

Responsive elements shifting

data-tor is also responsive, so you can fine-tune the position on different resolutions.

<div class="position-relative">
<div class="position-absolute bg-red" data-tor="place.top place.left shift.up(50 xl::100%)"></div>
<div class="position-absolute bg-blue" data-tor="place.top place.center shift.up(1rem xl::2rem xxl::3rem)"></div>
<div class="position-absolute bg-dark" data-tor="place.top place.right shift.down(50 xl::100%) right(0 md::50%)"></div>
</div>

Examples

Here are some real life examples of these classes:

<button type="button" class="btn btn-primary position-relative">
Mails <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-secondary">+99 <span class="visually-hidden">unread messages</span></span>
</button>

<button type="button" class="btn btn-dark position-relative">
Marker <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-1 bi bi-caret-down-fill" fill="#212529" 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>
</button>

<button type="button" class="btn btn-primary position-relative">
Alerts <span class="position-absolute top-0 start-100 translate-middle badge border border-light rounded-circle bg-danger p-2"><span class="visually-hidden">unread messages</span></span>
</button>

You can use these classes with existing components to create new ones. Remember that you can extend its functionality by adding entries to the $position-values variable.

<div class="position-relative m-4">
<div class="progress" style="height: 1px;">
<div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<button type="button" class="position-absolute top-0 start-0 translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem;">1</button>
<button type="button" class="position-absolute top-0 start-50 translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem;">2</button>
<button type="button" class="position-absolute top-0 start-100 translate-middle btn btn-sm btn-secondary rounded-pill" style="width: 2rem; height:2rem;">3</button>
</div>