Getting Started
Content & Layout
Components
Utilities

Position

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

Example

Arrange elements easily with the edge position utilities.

Use classes -

  • .top-{0-10} for vertical top position
  • .right-{0-10} for horizontal right position
  • .bottom-{0-10} for vertical bottom position
  • .left-{0-10} for horizontal left position
  • .absolute-center to absolutely position element in center
.top-{0-10}
.right-{0-10}
.left-{0-10}
.bottom-{0-10}
center 



    

        .top-{0-10}
    

    

        .right-{0-10}
    

    

        .left-{0-10}
    

    

        .bottom-{0-10}
    

    

        center

Fixed top

Position an element at the top of the viewport, from edge to edge. Be sure you understand the ramifications of fixed position in your project; you may need to add additional CSS.



...

Fixed bottom

Position an element at the bottom of the viewport, from edge to edge. Be sure you understand the ramifications of fixed position in your project; you may need to add additional CSS. 



...

Sticky top

Position an element at the top of the viewport, from edge to edge, but only after you scroll past it. This uses CSS’s position: sticky, which isn’t fully supported in all browsers. 



...