Open In App

Bootstrap 5 Position

Last Updated : 26 Jul, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

 Bootstrap 5 Position offers utility classes to control the positioning of elements. It includes classes like "position-static," "position-relative," "position-absolute," etc., facilitating precise element positioning on web pages for improved layout and design control.

NameDescription
position-staticDefault position, The element follows normal document flow, unaffected by positioning.
position-relativePositioned relative to its normal position, can be moved with top, right, bottom, and left.
position-absolutePositioned relative to its nearest positioned ancestor, doesn't affect other elements.
position-fixedPositioned relative to the viewport, stays fixed even if the page is scrolled.
position-stickyActs like position: relative until it hits a specified threshold, then behaves like fixed.
Arrange elementsEdge positioning utilities, format {property-position} for arranging elements.
Center elementsUse class .translate-middle with edge positioning to center elements via transformations.
SassDefault position utility values declared in Sass.
MapsDefault position utility values declared in Maps.
Utilities APIPosition utilities declared in the utility API.

Example 1: The following code demonstrates Bootstrap Position using various classes:

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <!-- CSS only -->
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
          rel="stylesheet"
        integrity=
"sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" 
        crossorigin="anonymous">
</head>

<body class="m-2">
    <h1 class="text-center text-success">
        GeeksforGeeks
    </h1>
    <h2 class="text-center">
        Bootstrap 5 Position
    </h2>
    <br>
    <div class="position-absolute 
        top-0 start-0">
        Hello Geeks
    </div>
    <div class="position-absolute 
        top-0 end-0">
        Be Hungry
    </div>
    <div class="position-absolute 
        top-50 start-50">
        Be Consistent
    </div>
    <div class="position-absolute 
        bottom-50 end-50">
        Motivated
    </div>
    <div class="position-absolute 
        bottom-0 start-0">
        And
    </div>
    <div class="position-absolute 
        bottom-0 end-0">
        Never Settle
    </div>
</body>

</html>

Output:


Example 2: The following code demonstrates Bootstrap Position using various classes:

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <!-- CSS only -->
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
          rel="stylesheet"
        integrity=
"sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" 
        crossorigin="anonymous">
</head>

<body class="m-2">
    <h1 class="text-center        
        text-success">
        GeeksforGeeks
    </h1>
    <h2 class="text-center">
        Bootstrap 5 Position
    </h2>
    <br>
    <div>
        <div class="position-relative m-4">
            <div class="progress">
                <div class="progress-bar" role="progressbar">
                </div>
            </div>
            <button type="button" class="position-absolute 
                top-0 start-0 translate-middle btn btn-sm 
                btn-dark rounded-pill">
                A
            </button>
            <button type="button" class="position-absolute 
                top-0 start-50 translate-middle 
                btn btn-sm btn-warning rounded-pill">
                B
            </button>
            <button type="button" class="position-absolute 
                top-0 start-100
                translate-middle btn btn-sm 
                btn-secondary rounded-pill">
                C
            </button>
            <button type="button" class="position-absolute 
                top-50 end-50 translate-middle 
                btn btn-sm btn-danger 
                rounded-pill">
                D
            </button>
        </div>
    </div>
</body>

</html>

Output:



B

bhaveshrawat
Improve
Article Tags :

Explore

Lightbox