## Position

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

Position on Bootstrap

### Position values

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

    .position-static
    .position-relative
    .position-absolute
    .position-sticky
    .fixed-top
    .fixed-bottom

#### Arrange Elements

Arrange elements easily with the edge positioning utilities. The format is `{property}-{position}.` has special utility class `.all-0` to give full height/width to child element of parent element.

    <!-- need to check-->
    <div class="position-relative bg-body-secondary mb-4" style="height: 200px;">
      <div class="p-3 bg-body-quaternary rounded-1 position-absolute top-0 start-0"></div>
      <div class="p-3 bg-body-quaternary rounded-1 position-absolute top-0 end-0"></div>
      <div class="p-3 bg-body-quaternary rounded-1 position-absolute top-50 start-50"></div>
      <div class="p-3 bg-body-quaternary rounded-1 position-absolute bottom-50 end-50"></div>
      <div class="p-3 bg-body-quaternary rounded-1 position-absolute bottom-0 start-0"></div>
      <div class="p-3 bg-body-quaternary rounded-1 position-absolute bottom-0 end-0"></div>
    </div>
    <div class="position-relative" style="height: 100px; width: 100px">
      <div class="bg-body-quaternary rounded-1 text-white d-flex flex-center position-absolute all-0">.all-0</div>
    </div>

.all-0

#### Center Elements

In addition, you can also center the elements with the transform utility classes `.translate-middle`, `.translate-middle-x` , `.translate-middle-y`. Responsive variations also exist for `transform-middle`, For example: `transform-{xxl|xl|lg|md|sm}-middle-{x|y}`.

    <div class="position-relative bg-body-secondary" style="height: 200px;">
      <div class="p-3 bg-body-quaternary rounded-1 position-absolute top-0 start-50 translate-middle-x"></div>
      <div class="p-3 bg-body-quaternary rounded-1 position-absolute top-50 start-0 translate-middle-y"></div>
      <div class="p-3 bg-body-quaternary rounded-1 position-absolute top-50 start-50 translate-middle"></div>
      <div class="p-3 bg-body-quaternary rounded-1 position-absolute top-50 end-0 translate-middle-y"></div>
      <div class="p-3 bg-body-quaternary rounded-1 position-absolute bottom-0 start-50 translate-middle-x"></div>
    </div>

##### On this page

##### Demo widget

I need help with something

I can’t reorder a product I previously ordered

How do I place an order?

My payment method not working

##### Eric

Ask us anything – we’ll get back to you here or by email within 24 hours.

##### Theme Customizer

Explore different styles according to your preferences

##### Color Scheme

Light
Dark
Auto

##### RTL

Change text direction

##### Support Chat

Toggle support chat

##### Navigation Type

Vertical
Horizontal
Combo
Dual nav

##### Vertical Navbar Appearance

Default Default
Darker Lighter

##### Horizontal Navbar Shape

Default
Slim

##### Horizontal Navbar Appearance

Default
Darker Lighter
Purchase template
customize