Use these shorthand utilities for quickly configuring the position of an element.
Quick positioning classes are available, though they are not responsive.
Arrange elements easily with the edge positioning utilities. The format is position="{position}"
.
Where property is one of:
top
- for the vertical top
position start
- for the horizontal left
position (in LTR)bottom
- for the vertical bottom
position end
- for the horizontal right
position (in LTR) Where position is one of:
0
- for 0
edge position50
- for 50%
edge position100
- for 100%
edge position<template>
<div class="bd-example-position-utils">
<b-div position="relative">
<b-div
position="absolute"
:top="0"
:start="0"
/>
<b-div
position="absolute"
:top="0"
:end="0"
/>
<b-div
position="absolute"
:top="50"
:start="50"
/>
<b-div
position="absolute"
:bottom="50"
:end="50"
/>
<b-div
position="absolute"
:bottom="0"
:start="0"
/>
<b-div
position="absolute"
:bottom="0"
:end="0"
/>
</b-div>
</div>
</template>
<style src="./example_position.scss" scoped></style>
In addition, you can also center the elements with the transform utility attribute 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.
<template>
<div class="bd-example-position-utils">
<b-div position="relative">
<b-div
position="absolute"
:top="0"
:start="0"
translate="middle"
/>
<b-div
position="absolute"
:top="0"
:start="50"
translate="middle"
/>
<b-div
position="absolute"
:top="0"
:start="100"
translate="middle"
/>
<b-div
position="absolute"
:top="50"
:start="0"
translate="middle"
/>
<b-div
position="absolute"
:top="50"
:start="50"
translate="middle"
/>
<b-div
position="absolute"
:top="50"
:start="100"
translate="middle"
/>
<b-div
position="absolute"
:top="100"
:start="0"
translate="middle"
/>
<b-div
position="absolute"
:top="100"
:start="50"
translate="middle"
/>
<b-div
position="absolute"
:top="100"
:start="100"
translate="middle"
/>
</b-div>
</div>
</template>
<style src="./example_position.scss" scoped></style>
By adding
translate="middle-x"
or translate="middle-y"
classes, elements can be positioned only in horizontal or vertical direction.
<template>
<div class="bd-example-position-utils">
<b-div position="relative">
<b-div
position="absolute"
:top="0"
:start="0"
/>
<b-div
position="absolute"
:top="0"
:start="50"
translate="middle-x"
/>
<b-div
position="absolute"
:top="0"
:end="0"
/>
<b-div
position="absolute"
:top="50"
:start="0"
translate="middle-y"
/>
<b-div
position="absolute"
:top="50"
:start="50"
translate="middle"
/>
<b-div
position="absolute"
:top="50"
:end="0"
translate="middle-y"
/>
<b-div
position="absolute"
:bottom="0"
:start="0"
/>
<b-div
position="absolute"
:bottom="0"
:start="50"
translate="middle-x"
/>
<b-div
position="absolute"
:bottom="0"
:end="0"
/>
</b-div>
</div>
</template>
<style src="./example_position.scss" scoped></style>
Here are some real life examples of these classes:
<template>
<b-button
button="primary"
position="relative"
>
Mails
<b-span
class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-secondary"
positon="absolute"
top="0"
start="100"
badge
rounded="pill"
background-color="secondary"
>
+99
<b-span
class="visually-hidden"
visually-hidden
>
unread messages
</b-span>
</b-span>
</b-button>
<b-button
button="dark"
position="relative"
>
Marker
<svg
width="1em"
height="1em"
viewBox="0 0 16 16"
class="position-absolute top-100 start-50 translate-middle mt-1 bi bi-caret-down-fill"
fill="#212529"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z" />
</svg>
</b-button>
<b-button
button="primary"
position="relative"
>
Alerts
<b-span
class="position-absolute top-0 start-100 translate-middle badge border border-light rounded-circle bg-danger p-2"
positon="absolute"
top="0"
start="100"
badge
border
border-color="light"
rounded="circle"
background-color="danger"
padding="2"
>
<b-span
class="visually-hidden"
visually-hidden
>
unread messages
</b-span>
</b-span>
</b-button>
</template>
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.
<template>
<b-div
position="relative"
margin="4"
>
<Progress style="height: 1px">
<ProgressBar
style="width: 50%"
aria-valuenow="50"
aria-valuemin="0"
aria-valuemax="100"
/>
</Progress>
<b-button
position="absolute"
:top="0"
:start="0"
translate="middle"
button="primary"
size="sm"
rounded="pill"
style="width: 2rem; height: 2rem"
>
1
</b-button>
<b-button
position="absolute"
:top="0"
:start="50"
translate="middle"
button="primary"
size="sm"
rounded="pill"
style="width: 2rem; height: 2rem"
>
2
</b-button>
<b-button
position="absolute"
:top="0"
:start="100"
translate="middle"
button="secondary"
size="sm"
rounded="pill"
style="width: 2rem; height: 2rem"
>
3
</b-button>
</b-div>
</template>