Open In App

Bootstrap 5 Position

Last Updated : 26 Apr, 2024
Improve
Improve
Like Article
Like
Save
Share
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/bootstrap@5.2.2/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:

Bootstrap 5 Position

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/bootstrap@5.2.2/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 Position

Previous Article
Next Article

Similar Reads

What is the difference between position:sticky and position:fixed in CSS ?
In CSS, position: sticky and position: fixed both offer elements the ability to stay in a fixed position during scrolling. These two CSS properties, while seemingly similar, have distinct behaviors that can significantly impact the layout and user experience of a webpage. This article will tell you the differences, providing you more understanding
6 min read
How to position a Bootstrap popover ?
This article describes how a popover can be positioned on the page. The popover attribute of Bootstrap can be used to make the website look more dynamic. Popovers are generally used to display additional information about any element and are displayed on click of mouse pointer over that element. It is similar to the Bootstrap Tooltip. However, a po
3 min read
How to change the position of modal close button in bootstrap?
The Modal component is a dialog box or a popup window that displays on top of the page. Modals can be used as alert windows as well as for accepting some input values. Example of a basic modal: For changing the position of the close button, we need to create a modal element. The below code will create a very basic modal. C/C++ Code &lt;!DOCTYPE htm
4 min read
How to Position Tooltip in button using Bootstrap ?
In Bootstrap 4, you can position the tooltip in various directions (left, right, top, bottom). The positioning of the tooltip is set by using the third-party library (Popper.js) before bootstrap.js in order for the tooltip to work. Approach: The required markup for positing tooltip is on data-placement where you can set the tooltip to BottomRightTo
3 min read
How to set position of tooltip in a button in Bootstrap ?
A Tooltip is used to provide interactive textual hints to the user about the element when the mouse pointer moves over. For Example, in the below image GeeksForGeeks is a button and when the user mouse moves over it, the additional information "A computer Science Portal" popup will display. We are going to learn how to create a tooltip and how to p
2 min read
Bootstrap 5 Position Fixed bottom
Bootstrap 5 Position Fixed bottom is used to set the position of the element to the bottom of the viewport. We can use some CSS property to display the effect of position fixed bottom. Position Fixed Bottom Class: fixed-bottom: This class is used to set the position of the element to the bottom of the viewport. Syntax: &lt;div class="fixed-bottom"
2 min read
Bootstrap 5 Position Fixed top
Bootstrap 5 Position Fixed top is used to set the position of the element to the top of the viewport. We can use some CSS property to display the effect of position fixed top. Position Fixed Top Class: fixed-top: This class is used to set the position of the element to the top of the viewport. Syntax: &lt;div class="fixed-top"&gt; Content &lt;/div
2 min read
Bootstrap 5 Position Responsive Sticky Top
Bootstrap 5 Position Sticky top is used to set the element's position to the sticky top of the viewport when the user scrolls down. The Position Responsive Sticky Top feature allows adding responsiveness to the webpage. We can use some CSS property to display the effect of position fixed bottom. Position Responsive Sticky Top: sticky-top: This clas
2 min read
Bootstrap 5 Position Arrange Elements
Bootstrap 5 Position Arrange elements are used to arrange the elements easily with the edge. The position specifies the type of positioning method used for an element static, relative, etc. With the help of position arrange elements adjusted the position of elements. Position Arrange elements used classes: top-*: This class is used to arrange the e
2 min read
Bootstrap 5 Position Values
Bootstrap 5 Position Values offers position utilities for defining the position of elements relative to the viewport's edge. It supports Fixed, Static, Relative, Absolute, and Sticky positioning, providing helper classes for easy implementation of these properties. Bootstrap 5 Position value Classes: Position ClassDescriptionposition-staticSets ele
3 min read