About Lesson
Bootstrap5 Positioning
Bootstrap 5 provides various utilities for positioning elements on a webpage. These include position classes, offset classes, and float classes, which help control layout and alignment.
1. Bootstrap Position Classes
Position classes define how an element is placed within its container.
position-static→ This is the default positioning, meaning the element follows the normal document flow.position-relative→ The element is positioned relative to itself. You can usetop,left,right, orbottomto move it from its original position.position-absolute→ The element is positioned relative to its nearest positioned ancestor (not the document). If no positioned ancestor is found, it will be positioned relative to<html>.position-fixed→The element is positioned relative to the viewport and stays fixed even when scrolling.position-sticky→ This element switches betweenrelativeandfixed, depending on the scroll position.
Example:
HTML
<div class="container-box position-relative">
<div class="position-static box">Static</div>
<div class="position-relative box mt-2">Relative</div>
<div class="position-absolute box mt-2">Absolute</div>
<div class="position-fixed box mt-2">Fixed</div>
<div class="position-sticky box mt-2" style="top: 20px;">Sticky</div>
</div>2. Bootstrap Offset Classes
Offset classes fine-tune the placement of elements inside a parent container.
top-0→ Moves the element to the top (0%).top-50→ Moves the element to 50% from the top.top-100→ Moves the element to 100% from the top.bottom-0→ Moves the element to the bottom (0%).bottom-50→ Moves the element 50% up from the bottom.bottom-100→ Moves the element completely above its parent (100%).start-0→ Moves the element to the left (0%).start-50→ Moves the element to 50% from the left.start-100→ Moves the element to the right (100%).end-0→ Moves the element to the right (0%).end-50→ Moves the element to 50% from the right.end-100→ Moves the element completely outside to the right (100%).
Example:
HTML
<div class="container-box position-relative">
<span class="position-absolute top-0 start-0 box">Top Left</span>
<span class="position-absolute top-0 start-50 box">Top Center</span>
<span class="position-absolute top-0 end-0 box">Top Right</span>
<span class="position-absolute bottom-0 start-0 box">Bottom Left</span>
<span class="position-absolute bottom-0 start-50 box">Bottom Center</span>
<span class="position-absolute bottom-0 end-0 box">Bottom Right</span>
<span class="position-absolute top-50 start-50 translate-middle box bg-warning">Center</span>
</div>3. Bootstrap Float Classes
Float classes are used to align elements to the left or right.
float-start→ Moves the element to the left.float-end→ Moves the element to the right.float-none→ Removes float (default behavior).
HTML
<div class="box float-start me-3">Float Left</div>
<div class="box float-end">Float Right</div>
<div class="clearfix"></div> <!-- Clears float for next elements -->
<div class="box float-none mt-3">No Float</div>