Enhanced Bootstrap Position

Bootstrap Position

Quickly configure position of an element with responsive position classes, or set custom position with fine-tuning utilities.

Overview

Example

Button with custom positioned notification icon.

Common values

Quick positioning classes are available. Relative, absolute and sticky positions are 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

You can use responsive behavior for .position-{breakpoint}-relative and .position-{breakpoint}-absolute. Here is the complete list of responsive position classes.

Relative
  • .position-relative
  • .position-sm-relative
  • .position-md-relative
  • .position-lg-relative
  • .position-xl-relative
  • .position-xxl-relative
Absolute
  • .position-absolute
  • .position-sm-absolute
  • .position-md-absolute
  • .position-lg-absolute
  • .position-xl-absolute
  • .position-xxl-absolute

Custom position

This utility helps you to easily position an element inside its parent using data-position="{x} {y}". You need to set relative position to the parent element, and in most cases,
absolute position for the elements that needs to be positioned. This can be done using .position-relative class and .position-absolute class.

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>

Position adjustment

It is also possible to fine-tune position of element and “push” it 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

Up

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

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

Down

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

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

Left

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

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

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

0% (default)
Push right 50%
Push right 100%
<div>0% (default)</div>
<div class="position-absolute" data-position="right top" data-push="right-50">Push right 50%</div>
<div class="position-absolute" 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.

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

Responsive sticky top

Responsive variations also exist for .sticky-top utility.

<div class="sticky-sm-top">Stick to the top on viewports sized SM (small) or wider</div>
<div class="sticky-md-top">Stick to the top on viewports sized MD (medium) or wider</div>
<div class="sticky-lg-top">Stick to the top on viewports sized LG (large) or wider</div>
<div class="sticky-xl-top">Stick to the top on viewports sized XL (extra-large) or wider</div>