MENU


Position

To fix an element at the top or bottom of the viewport, use .fixed-top or .fixed-bottom.
To fix an element at the top or bottom of the bottom only after you scroll past it, use .sticky-top or .sticky-bottom:

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

To set a positioning system, use:

To specify the edge position, use: {top | left | bottom | right}-{0 | 50 | 100}

where 50 means 50% and so on. Eg.:

<div class="position-relative"> <div class="position-absolute top-50 left-100"></div> </div>

RESETRUNFULL
<!DOCTYPE html><html>
<head><link href='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor' crossorigin='anonymous'>
      <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js' integrity='sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2' crossorigin='anonymous'></script>
      <style>div:not(.container):not(.tooltip):not(.tooltip *):not(.navbar *):not(.carousel-caption):not(.card *):not(.form-check):not(.input-group) { border:1px solid grey; text-align:center; }</style>
</head><body>

   <div class="fixed-top">HEADER</div>
   <div class="position-absolute top-50 left-50">CONTENT</div>
   <div class="fixed-bottom">FOOTER</div>

</body><html>

Elements can also be centered with the .translate-middle utility class, which applies the transformations translateX(-50%) and translateY(-50%).