Use these helpers for quickly configuring the position of an element.
Quick positioning classes are available, though they are not responsive.
<div class="Position-static">...</div>
<div class="Position-relative">...</div>
<div class="Position-absolute">...</div>
<div class="Position-fixed">...</div>
<div class="Position-sticky">...</div>
Arrange elements easily with the edge positioning utilities. The format is {property}-{position}
.
Where property is one of:
top
- for the vertical top
positionleft
- for the horizontal left
positionbottom
- for the vertical bottom
positionright
- for the horizontal right
positionWhere position is one of:
0
- for 0
edge position50
- for 50%
edge position100
- for 100%
edge position You can add more position values by adding entries to the $position-values
Sass map variable.
<div class="Position-relative Position-example Bg-secondary Bg-alpha-20">
<div class="Position-absolute Top-0 Start-0"></div>
<div class="Position-absolute Top-0 End-0"></div>
<div class="Position-absolute Top-50 End-50"></div>
<div class="Position-absolute Bottom-50 Start-50"></div>
<div class="Position-absolute Bottom-0 Start-0"></div>
<div class="Position-absolute Bottom-0 End-0"></div>
</div>
.Position-example {
height: 200px;
.Position-absolute {
width: 2em;
height: 2em;
background-color: #212529;
border-radius: 0.25rem;
border: 1px solid var(--ls-border-color);
}
}
In addition, you can also center the elements with the transform utility class .Translate-middle
.
This class applies the transformations translateX(-50%)
and translateY(-50%)
to the element which, in combination with the edge positioning utilities, allows you to absolute center an element.
<div class="Position-relative Position-example Bg-secondary Bg-alpha-20">
<div class="Position-absolute Top-0 Start-0 Translate-middle"></div>
<div class="Position-absolute Top-0 Start-50 Translate-middle"></div>
<div class="Position-absolute Top-0 Start-100 Translate-middle"></div>
<div class="Position-absolute Top-50 Start-0 Translate-middle"></div>
<div class="Position-absolute Top-50 Start-50 Translate-middle"></div>
<div class="Position-absolute Top-50 Start-100 Translate-middle"></div>
<div class="Position-absolute Top-100 Start-0 Translate-middle"></div>
<div class="Position-absolute Top-100 Start-50 Translate-middle"></div>
<div class="Position-absolute Top-100 Start-100 Translate-middle"></div>
</div>
By adding .translate-middle-x
or .translate-middle-y
classes, elements can be positioned only in horizontal or vertical direction.
<div class="Position-relative Position-example Bg-secondary Bg-alpha-20">
<div class="Position-absolute Top-0 Start-0"></div>
<div class="Position-absolute Top-0 Start-50 Translate-middle-x"></div>
<div class="Position-absolute Top-0 End-0"></div>
<div class="Position-absolute Top-50 Start-0 Translate-middle-y"></div>
<div class="Position-absolute Top-50 Start-50 Translate-middle"></div>
<div class="Position-absolute Top-50 End-0 Translate-middle-y"></div>
<div class="Position-absolute Bottom-0 Start-0"></div>
<div class="Position-absolute Bottom-0 Start-50 Translate-middle-x"></div>
<div class="Position-absolute Bottom-0 End-0"></div>
</div>
Here are some real life examples of these classes:
You can use these classes with existing components to create new ones. Remember that you can extend its functionality by adding entries to the $position-values
variable.
<div class="W-100 P-5 D-flex Justify-content-center PB-4">
<div class="Position-relative" style="width: 100%">
<div class="Progress Progress-thin-3 MB-3">
<div class="Progress-bar" style="width: 50%" role="progressbar"
aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<button type="button" style="width: 3rem; height: 3rem"
class="Position-absolute Top-0 Start-0 Translate-middle Btn Btn-sm Btn-primary Rounded-pill">
1
</button>
<button type="button" style="width: 3rem; height: 3rem"
class="Position-absolute Top-0 Start-50 Translate-middle Btn Btn-sm Btn-primary Rounded-pill">
2
</button>
<button type="button" style="width: 3rem; height: 3rem"
class="Position-absolute Top-0 Start-100 Translate-middle Btn Btn-sm Btn-secondary Rounded-pill">
3
</button>
</div>
</div>
Position utilities are declared in our utilities API in Utils/_position.scss
.
$utilities: (
"Position": (
Class: Position, Properties: position, Important: true,
Values: (static relative absolute fixed sticky)
),
"Top": (
Class: Top, Properties: top, Important: true,
Values: $position-values
),
"Bottom": (
Class: Bottom, Properties: bottom, Important: true,
Values: $position-values
),
"Start": (
Class: Start, Properties: left, Important: true,
Values: $position-values
),
"End": (
Class: End, Properties: right, Important: true,
Values: $position-values
),
"Translate-middle": (
Class: Translate-middle, Properties: transform, Important: true,
Values: (null: translate(-50%, -50%), x: translateX(-50%), y: translateY(-50%),)
),