### Position

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

Position on Bootstrap

##### Common values

Quick positioning classes are available, though they responsive.

The classes are named using the format `position-{option}` for `xs` and `position-{breakpoint}-{option}` for `sm`,`md`,`lg,` `xl`, and `xxl`.

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

.all-0

    <div class="position-relative bg-200 mb-4" style="height: 200px;">
      <div class="p-3 bg-900 rounded-1 position-absolute top-0 start-0" data-bs-theme="light"></div>
      <div class="p-3 bg-900 rounded-1 position-absolute top-0 end-0" data-bs-theme="light"></div>
      <div class="p-3 bg-900 rounded-1 position-absolute top-50 start-50" data-bs-theme="light"></div>
      <div class="p-3 bg-900 rounded-1 position-absolute bottom-50 end-50" data-bs-theme="light"></div>
      <div class="p-3 bg-900 rounded-1 position-absolute bottom-0 start-0" data-bs-theme="light"></div>
      <div class="p-3 bg-900 rounded-1 position-absolute bottom-0 end-0" data-bs-theme="light"></div>
    </div>
    <div class="position-relative" style="height: 100px; width: 100px" data-bs-theme="light">
      <div class="bg-900 rounded-1 text-white d-flex flex-center position-absolute all-0">.all-0</div>
    </div>

##### 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-200" style="height: 200px;">
      <div class="p-3 bg-900 rounded-1 position-absolute top-0 start-50 translate-middle-x" data-bs-theme="light"></div>
      <div class="p-3 bg-900 rounded-1 position-absolute top-50 start-0 translate-middle-y" data-bs-theme="light"></div>
      <div class="p-3 bg-900 rounded-1 position-absolute top-50 start-50 translate-middle" data-bs-theme="light"></div>
      <div class="p-3 bg-900 rounded-1 position-absolute top-50 end-0 translate-middle-y" data-bs-theme="light"></div>
      <div class="p-3 bg-900 rounded-1 position-absolute bottom-0 start-50 translate-middle-x" data-bs-theme="light"></div>
    </div>

#### Register

Please create your free Falcon account

Name
Email address
Password
Confirm Password
I accept the terms and privacy policy

or register with
google
facebook

##### Settings

Set your own customized style

##### Color Scheme

Choose the perfect color mode for your app.

##### RTL Mode

Switch your language direction

RTL Documentation

##### Fluid Layout

Toggle container layout system

Fluid Documentation

##### Navigation Position

Select a suitable navigation system for your web application

##### Vertical Navbar Style

Switch between styles for your vertical navbar

See Documentation

##### Like What You See?

Get Falcon now and create beautiful dashboards with hundreds of widgets.

Purchase
customize