Position

Goodkit Exclusive

Additional responsive positioning utilities.

Bootstrap Documentation

  • .top-{sm|md|lg|xl}-start - positions an element in the top left corner.
  • .top-{sm|md|lg|xl}-end - 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}-start - positions an element in the bottom left corner.
  • .bottom-{sm|md|lg|xl}-end - 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-start"></div>
<div class="position-absolute top-end"></div>
<div class="position-absolute top-center"></div>
<div class="position-absolute bottom-start"></div>
<div class="position-absolute bottom-end"></div>
<div class="position-absolute bottom-center"></div>

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