There are classes that matches to the following formula.


Where pos_value corresponds to value of the css position property:

  • static
  • relative
  • absolute
  • sticky

arrange elements

Since v5 arrange elements easily with the edge positioning utilities.


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

center elements

You can center elements by transformation classes:

  • translate-middle - applies the transformations translateX(-50%) and translateY(-50%)
  • translate-middle-x - applies the translateX(-50%) transformation
  • translate-middle-y - applies the translateY(-50%) transformation
Code example

fixed position

The fixed-top specifies position an element at the top of the viewport, from edge to edge.

The fixed-bottom specifies position an element at the bottom of the viewport, from edge to edge.

The sticky-top specifies position an element at the top of the viewport, from edge to edge, but only after you scroll past it (may be not supported in some browsers).

<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>
<div class="fixed-top">...</div>
<div class="fixed-bottom">...</div>
<div class="sticky-top">...</div>


If you want to overlay an element:

  1. set position-relative for container
  2. set position-absolute for content and overlay
  3. set size (for entire page like modal dialog w-100xh-100)
  4. add z-index: val css rule. For example, value 1 (default) for content and value 2 for overlay
Code example