Bootstrap provides classes that allow developers to easily position elements on a webpage. In this page, we will explore the various positioning classes provided by Bootstrap.
To use Bootstrap's positioning classes, simply apply one of the following classes to the element you wish to position:
position-staticposition-relativeposition-absoluteposition-fixedposition-stickyArrange elements easily with the edge positioning utilities. The format is {property}-{position}.
<div class="position-relative">
<div class="position-absolute top-0 start-0 p-3 bg-success mt-5"></div>
<div class="position-absolute top-0 end-0 p-3 bg-success mt-5"></div>
<div class="position-absolute top-50 start-50 p-3 bg-success mt-5"></div>
<div class="position-absolute bottom-50 end-50 p-3 bg-success mt-5"></div>
<div class="position-absolute bottom-0 start-0 p-3 bg-success mt-5"></div>
<div class="position-absolute bottom-0 end-0 p-3 bg-success mt-5"></div>
</div>
Here are some real life examples of these classes
<div class="row">
<div class="col-4">
<button type="button" class="btn btn-primary position-relative">
Mails <span
class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-secondary">+99 <span
class="visually-hidden">unread messages</span></span>
</button>
</div>
<div class="col-4">
<div class="position-relative py-2 px-4 text-bg-secondary border border-secondary rounded-pill">
Marker <svg width="1em" height="1em" viewBox="0 0 16 16"
class="position-absolute top-100 start-50 translate-middle mt-1" fill="var(--bs-secondary)"
xmlns="http://www.w3.org/2000/svg">
<path
d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z" />
</svg>
</div>
</div>
<div class="col-4">
<button type="button" class="btn btn-primary position-relative">
Alerts <span
class="position-absolute top-0 start-100 translate-middle badge border border-light rounded-circle bg-danger p-2"><span
class="visually-hidden">unread messages</span></span>
</button>
</div>
</div>
Here is an example of how to use Bootstrap's positioning classes.
<div class="container">
<div class="row">
<div class="col-sm-4 position-relative">
<img src="..." alt="Image" />
<div class="position-absolute top-0 end-0">
<span class="badge rounded-pill bg-danger">New</span>
</div>
</div>
<div class="col-sm-8 position-relative">
<h2>Product Title</h2>
<p>Product description goes here.</p>
<a href="#" class="btn btn-primary position-absolute bottom-0 end-0">Buy Now</a>
</div>
</div>
</div>
In the code above, we used the following positioning classes:
position-relative: this class positions the element relative to its normal position.position-absolute: this class positions the element relative to its nearest positioned ancestor.position-fixed: this class positions the element relative to the viewport.position-sticky: this class positions the element relative to its scroll container and starts acting like position-fixed when the element reaches a certain point.In addition to these classes, Bootstrap also provides further positioning classes that can be used in conjunction with them, such as top-0, bottom-0, end-0, and more. These classes allow developers to position elements precisely on a webpage.
Bootstrap's positioning classes can be used to position any element on a webpage, including images, text, buttons, and more. They can be used to create visually stunning layouts and to draw attention to specific elements on a page.
Bootstrap's positioning classes are a powerful tool for developers who want to create visually stunning layouts and draw attention to specific elements on a webpage. By using these classes, developers can easily position elements and create complex designs without having to write complex CSS.