Bootstrap 5 Position

Last Updated : 26 Jul, 2024

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.

Name	Description
position-static	Default position, The element follows normal document flow, unaffected by positioning.
position-relative	Positioned relative to its normal position, can be moved with top, right, bottom, and left.
position-absolute	Positioned relative to its nearest positioned ancestor, doesn't affect other elements.
position-fixed	Positioned relative to the viewport, stays fixed even if the page is scrolled.
position-sticky	Acts like position: relative until it hits a specified threshold, then behaves like fixed.
Arrange elements	Edge positioning utilities, format {property-position} for arranging elements.
Center elements	Use class .translate-middle with edge positioning to center elements via transformations.
Sass	Default position utility values declared in Sass.
Maps	Default position utility values declared in Maps.
Utilities API	Position 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:

Bootstrap 5 Visually hidden

bhaveshrawat

Improve

Article Tags :

Bootstrap 5 Position

Similar Reads

Layout

Content

Forms

Forms Layout

Components

Navbar

Helpers

Extend

Thank You!

What kind of Experience do you want to share?