Position

Goodkit Exclusive

Additional responsive positioning utilities.

Bootstrap Documentation

  • .top-{sm|md|lg|xl}-left - positions an element in the top left corner.
  • .top-{sm|md|lg|xl}-right - positions an element in the top right corner.
  • .top-{sm|md|lg|xl}-center - positions an element on top centered horizontally.
  • .bottom-{sm|md|lg|xl}-left - positions an element in the bottom left corner.
  • .bottom-{sm|md|lg|xl}-right - positions an element in the bottom right corner.
  • .bottom-{sm|md|lg|xl}-center - positions an element on bottom centered horizontally.
<div class="position-absolute top-left"></div>
<div class="position-absolute top-right"></div>
<div class="position-absolute top-center"></div>
<div class="position-absolute bottom-left"></div>
<div class="position-absolute bottom-right"></div>
<div class="position-absolute bottom-center"></div>

<!-- Responsive -->
<div class="position-absolute top-center top-md-left"></div>
<div class="position-absolute bottom-center bottom-lg-right"></div>