Position

Use these shorthand utilities for quickly configuring the position of an element.

Position values

Quick positioning classes are available, though they are not responsive.

Arrange elements

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 position
  • 50 - for 50% edge position
  • 100 - for 100% edge position
vue
<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>

Center elements

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.

vue
<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.

vue
<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>

Examples

Here are some real life examples of these classes:

vue
<template>
 <b-button
  color="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
  color="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
  color="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.

vue
<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"
   color="primary"
   size="sm"
   rounded="pill"
   style="width: 2rem; height: 2rem"
  >
   1
  </b-button>
  <b-button
   position="absolute"
   :top="0"
   :start="50"
   translate="middle"
   color="primary"
   size="sm"
   rounded="pill"
   style="width: 2rem; height: 2rem"
  >
   2
  </b-button>
  <b-button
   position="absolute"
   :top="0"
   :start="100"
   translate="middle"
   color="secondary"
   size="sm"
   rounded="pill"
   style="width: 2rem; height: 2rem"
  >
   3
  </b-button>
 </b-div>
</template>

See Also

Container

Grid

Columns

Gutters

Css grid

Display

Flex

Float