Positions

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

Common values

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>

                <div class="position-top-auto">...</div>
                <div class="position-right-auto">...</div>
                <div class="position-bottom-auto">...</div>
                <div class="position-left-auto">...</div>

                <div class="position-top-0">...</div>
                <div class="position-right-0">...</div>
                <div class="position-bottom-0">...</div>
                <div class="position-left-0">...</div>

                <div class="position-top-50">...</div>
                <div class="position-right-50">...</div>
                <div class="position-bottom-50">...</div>
                <div class="position-left-50">...</div>

Responsive classes

Small devices (tablets, 576px and up)

              
                <div class="position-sm-absolute">...</div>

Medium devices (tablets, 768px and up)

              
                <div class="position-md-absolute">...</div>

                <div class="top-md-0">...</div>
                <div class="right-md-0">...</div>
                <div class="bottom-md-0">...</div>
                <div class="left-md-0">...</div>

Large devices (desktops, 992px and up)

              
                <div class="position-lg-absolute">...</div>

                <div class="top-lg-0">...</div>
                <div class="right-lg-0">...</div>
                <div class="bottom-lg-0">...</div>
                <div class="left-lg-0">...</div>

Important