Bootstrap Position

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

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

Shorthand

Torus Kit includes shorthand classes for relative and absolute position.

<!-- Relative position shorthand -->
<div class="pos-rel">...</div>

<!-- Absolute position shorthand -->
<div class="pos-abs">...</div>
Pro

Custom position

With Torus Kit custom position utility you can easily position the element inside another in 9 directions using data-position attribute. It is also possible to fine-tune a position to push (translate) an element from its position in 50% or 100%. This is especially helpful when creating notification-style elements like below example.

Example

A .circle element uses data-position="right top" to place it into right-top corner of the parent .btn, together with data-push="right-50 up-50" that pushes (translate) the element by 50% of its size rightand up. Note, that parent .btn has .pos-rel class that sets position: relative.

<button class="btn btn-grey pos-rel">
  Notification icon
  <span class="circle bg-danger text-white p-3 shadow" data-position="right top" data-push="right-50 up-50">
    <i class="fa fa-exclamation-circle"></i>
  </span>
</button>

Using data-position

This utility helps you to easily position an element inside its parent using data-position="{x} {y}". Elements automatically get position: absolute so you need to set position: relative to its parent. This can be done using .position-relative class, or .pos-rel shorthand.

Relative positioned element

Left top
Left middle
Left bottom
Center top
Center middle
Center bottom
Right top
Right middle
Right bottom
<!-- Left -->
<div data-position="left top">Left top</div>
<div data-position="left middle">Left middle</div>
<div data-position="left bottom">Left bottom</div>

<!-- Center -->
<div data-position="center top">Center top</div>
<div data-position="center middle">Center middle</div>
<div data-position="center bottom">Center bottom</div>

<!-- Right -->
<div data-position="right top">Right top</div>
<div data-position="right middle">Right middle</div>
<div data-position="right bottom">Right bottom</div>

Using data-push

It is also possible to fine-tune position of element and push it out of corner with data-push="{direction}-{percentage}".

Where {direction} can be one of:

  • up that translates the element up
  • down that translates the element down
  • left that translates the element left
  • right that translates the element right

.. and {percentage} can be one of:

  • 50 that translates the element by 50% of its size
  • 100 that translates the element by 100% of its size

Upwards

To push up the element according its size use data-push="up-{50|100}".

0% (default)
Push up 50%
Push up 100%
<div>0% (default)</div>
<div data-position="left top" data-push="up-50">Push up 50%</div>
<div data-position="left top" data-push="up-100">Push up 100%</div>

Downwards

To push down the element according its size use data-push="down-{50|100}".

0% (default)
Push down 50%
Push down 100%
<div>0% (default)</div>
<div data-position="left bottom" data-push="down-50">Push down 50%</div>
<div data-position="left bottom" data-push="down-100">Push down 100%</div>

To the left

To push left the element according its size use data-push="left-{50|100}".

0% (default)
Push left 50%
Push left 100%
<div>0% (default)</div>
<div data-position="left top" data-push="left-50">Push left 50%</div>
<div data-position="left top" data-push="left-100">Push left 100%</div>

To the right

To push left the element according its size use data-push="left-{50|100}".

0% (default)
Push right 50%
Push right 100%
<div>0% (default)</div>
<div data-position="right top" data-push="right-50">Push right 50%</div>
<div data-position="right top" data-push="right-100">Push right 100%</div>

Fixed top

Position an element at the top of the viewport, from edge to edge. Be sure you understand the ramifications of fixed position in your project; you may need to add additional CSS.

<div class="fixed-top">...</div>

Fixed bottom

Position an element at the bottom of the viewport, from edge to edge. Be sure you understand the ramifications of fixed position in your project; you may need to add additional CSS.

<div class="fixed-bottom">...</div>

Sticky top

Position an element at the top of the viewport, from edge to edge, but only after you scroll past it. The .sticky-top utility uses CSS’s position: sticky, which isn’t fully supported in all browsers.

IE11 and IE10 will render position: sticky as position: relative. As such, we wrap the styles in a @supports query, limiting the stickiness to only browsers that can render it properly.

<div class="sticky-top">...</div>