BootstrapHow-ToBeginner · 4 min read

How to Use Position Utilities in Bootstrap for Layout Control

Bootstrap position utilities let you control element placement using classes like position-static, position-relative, position-absolute, position-fixed, and position-sticky. Combine these with offset classes like top-0, start-50, or end-0 to precisely position elements inside containers.

📐

Syntax

Bootstrap uses simple classes to set the CSS position property and offset properties like top, bottom, start (left), and end (right).

position-static: Default position, no special positioning.
position-relative: Positions element relative to its normal spot.
position-absolute: Positions element absolutely inside the nearest positioned ancestor.
position-fixed: Fixes element relative to the viewport.
position-sticky: Sticks element based on scroll position.
Offset classes like top-0, bottom-0, start-0, end-0 move the element by percentage or zero from that side.

html

<div class="position-relative">Relative</div>
<div class="position-absolute top-0 start-0">Absolute top-left</div>
<div class="position-fixed bottom-0 end-0">Fixed bottom-right</div>

💻

Example

This example shows a box positioned relative to its container, with an absolutely positioned child in the top-left corner, and a fixed box at the bottom-right of the viewport.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Position Utilities Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .container-box {
      width: 300px;
      height: 200px;
      background-color: #e9ecef;
      border: 2px solid #6c757d;
      margin: 2rem auto;
      position: relative;
    }
    .absolute-box {
      width: 100px;
      height: 50px;
      background-color: #0d6efd;
      color: white;
      padding: 0.5rem;
      font-weight: bold;
    }
    .fixed-box {
      width: 150px;
      height: 50px;
      background-color: #198754;
      color: white;
      padding: 0.5rem;
      font-weight: bold;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="container-box position-relative">
    Container (position-relative)
    <div class="absolute-box position-absolute top-0 start-0">
      Absolute top-left
    </div>
  </div>
  <div class="fixed-box position-fixed bottom-0 end-0 m-3">
    Fixed bottom-right
  </div>
</body>
</html>

Output

A gray box centered on the page with text 'Container (position-relative)'. Inside it, a blue box labeled 'Absolute top-left' is placed at the top-left corner. A green box labeled 'Fixed bottom-right' is fixed at the bottom-right corner of the browser window with some margin.

⚠️

Common Pitfalls

Common mistakes when using Bootstrap position utilities include:

Not setting a positioned ancestor (like position-relative) when using position-absolute, causing the element to position relative to the page instead of the container.
Forgetting to add offset classes like top-0 or start-0, so the element stays in its original spot.
Using position-fixed without considering that it stays fixed on the viewport and may overlap other content.

html

<!-- Wrong: absolute without relative parent -->
<div style="border:1px solid black; height:100px;">
  <div class="position-absolute top-0 start-0 bg-primary text-white p-2">Absolute without relative parent</div>
</div>

<!-- Right: add position-relative to parent -->
<div class="position-relative" style="border:1px solid black; height:100px;">
  <div class="position-absolute top-0 start-0 bg-primary text-white p-2">Absolute with relative parent</div>
</div>

Output

First box: The blue box is positioned at the top-left of the page, overlapping outside the black border. Second box: The blue box is positioned inside the black border at top-left corner.

📊

Quick Reference

Class	Effect
position-static	Default position, no special positioning
position-relative	Positions element relative to its normal spot
position-absolute	Positions element absolutely inside nearest positioned ancestor
position-fixed	Fixes element relative to viewport
position-sticky	Element sticks based on scroll position
top-0	Sets top offset to 0
top-50	Sets top offset to 50%
bottom-0	Sets bottom offset to 0
start-0	Sets left offset to 0
end-0	Sets right offset to 0

✅

Key Takeaways

Use position utilities like position-relative and position-absolute to control element placement easily.

Always set a positioned ancestor (position-relative) when using position-absolute to contain the element.

Combine position classes with offset classes like top-0 or start-0 to move elements precisely.

Position-fixed elements stay fixed on the viewport and can overlap content, so use carefully.

Position-sticky helps keep elements visible while scrolling within their container.