”;
This chapter discusses about the .position utility classes for quick configuration of the position of an element.
Position values
The .position classes are available for quick positioning, but they are not responsive in nature.
The various values for position class are as follows:
-
.position-static
-
.position-relative
-
.position-absolute
-
.position-fixed
-
.position-sticky
Let us see an example:
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Position</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="m-2">
<h4 class="mb-4">Position values</h4>
<div class="container mt-4 bg-light border border-dark">
Position: static states that the top, right,
bottom, and left properties will be the same no matter
<p class="position-static bg-info top-50 start-50 text-light">position: static</p>
This part is out of the paragraph.
</div>
<div class="container mt-4 bg-light border border-dark">
Position: relative sets its position to be relative
with respect to the elements on top of it
<p class="position-relative bg-success top-50 start-50 text-light w-50">
position: relative;
</p>
This means that the top, right, bottom, and
left properties will
affect the position of the Paragraph.
</div>
<div class="container mt-4 bg-light border border-dark">
Position: absolute sets its position relative to
the closest parent and it set its position absolute
with that.
<p class="position-absolute bg-warning bottom-0 end-50 text-light">
position: absolute;
</p>
This means that the top, right, bottom, and left
properties will get adjusted with respect to the
nearest ancestor and then the position is set.
</div>
</body>
</html>
Arrange elements
Elements can be arranged easily with the edge positioning utility classes.
The format for arranging the elements is {property}-{position}.
where property can hold following values:
| property | description |
|---|---|
| top | vertical top position |
| start | horizontal left position (LTR) | bottom | vertical bottom position |
| end | horizontal right position (LTR) |
where position can hold following values:
| position | description |
|---|---|
| 0 | 0 edge position |
| 50 | 50% edge position |
| 100 | 100% edge position |
Note: More position values can be added by making entries to the $position-values Sass map variable.
Let us see an example of arrangement of elements using the .position-* class:
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Position</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="container p-3 m-5">
<div class="position-absolute top-0 start-0 mb-2">
<button type="button" class="btn btn-primary">top-0 start-0</button>
</div>
<div class="position-absolute top-50 start-50 mb-2">
<button type="button" class="btn btn-secondary">top-50 start-50</button>
</div>
<div class="position-absolute top-0 end-0 mb-2">
<button type="button" class="btn btn-success">top-0 end-0</button>
</div>
<div class="position-absolute bottom-0 start-0 mb-2">
<button type="button" class="btn btn-warning">bottom-0 start-0</button>
</div>
<div class="position-absolute bottom-50 end-50 mb-2">
<button type="button" class="btn btn-danger">bottom-50 end-50</button>
</div>
<div class="position-absolute bottom-0 end-0 mb-2">
<button type="button" class="btn btn-info">bottom-0 end-0</button>
</div>
</div>
</body>
</html>
Center elements
-
Using the transform utility class .translate-middle, you can arrange the elements in the center.
-
The transform class applies the transformations translateX(-50%) and translateY(-50%) to an element.
-
This element then combines with edge positioning utilities and thus centers the element.
Let us see an example:
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Position</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<style>
span {
border: 2px solid rgb(26, 58, 241);
padding: 30px;
background:#1ae3f1;
}
</style>
</head>
<body>
<div class="container">
<div class="position-absolute top-0 start-0 translate-middle">
<span></span>
</div>
<div class="position-absolute top-0 start-50 translate-middle">
<span></span>
</div>
<div class="position-absolute top-0 start-100 translate-middle">
<span></span>
</div>
<div class="position-absolute top-50 start-0 translate-middle">
<span></span>
</div>
<div class="position-absolute top-50 start-50 translate-middle">
<span></span>
</div>
<div class="position-absolute top-50 start-100 translate-middle">
<span></span>
</div>
<div class="position-absolute top-100 start-0 translate-middle">
<span></span>
</div>
<div class="position-absolute top-100 start-50 translate-middle">
<span></span>
</div>
<div class="position-absolute top-100 start-100 translate-middle">
<span></span>
</div>
</div>
</body>
</html>
Use .translate-middle-x or .translate-middle-y classes, in order to position the elements only in horizontal or vertical direction.
Let us see an example:
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Position</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<style>
span {
border: 2px solid rgb(26, 58, 241);
padding: 30px;
background:#dd1c8c;
}
</style>
</head>
<body>
<div class="position-static">
<div class="position-absolute top-0 start-0">
<span></span>
</div>
<div class="position-absolute top-0 start-50 translate-middle-x">
<span></span>
</div>
<div class="position-absolute top-0 end-0">
<span></span>
</div>
<div class="position-absolute top-50 start-0 translate-middle-y">
<span></span>
</div>
<div class="position-absolute top-50 start-50 translate-middle">
<span></span>
</div>
<div class="position-absolute top-50 end-0 translate-middle-y">
<span></span>
</div>
<div class="position-absolute bottom-0 start-0">
<span></span>
</div>
<div class="position-absolute bottom-0 start-50 translate-middle-x">
<span></span>
</div>
<div class="position-absolute bottom-0 end-0">
<span></span>
</div>
</div>
</body>
</html>
Few more examples
Some more examples are shown below, where .position class is used along with other utility classes provided by Bootstrap:
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Position</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="d-flex p-5 gap-5">
<button type="button" class="btn btn-success position-relative">
Notifications<span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle"><span class="visually-hidden">unread messages</span></span>
</button>
<button type="button" class="btn btn-primary position-relative">
Inbox
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
99+
<span class="visually-hidden">unread messages</span>
</span>
</button>
<button type="button" class="btn btn-warning position-relative">
Messages <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>
</body>
</html>
These classes can be used along with other Bootstrap components to create new ones.
Let us see an example where progress-bar is used with .position utility class:
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Position</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="mb-5 p-3">
<h2 class="text-center">Position</h2>
<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-success rounded-pill">1</button>
<button type="button" class="position-absolute top-0 start-50 translate-middle btn btn-sm btn-warning rounded-pill">2</button>
<button type="button" class="position-absolute top-0 start-100 translate-middle btn btn-sm btn-info rounded-pill">3</button>
<button type="button" class="position-absolute top-50 end-50 translate-middle btn btn-sm btn-danger rounded-pill">4</button>
</div>
</div>
</body>
</html>
”;