Skip Navigation
Within Foundations

Layout Alignment

The Layout alignment classes handle the position a containers children will be aligned to base on the flexbox alignment sytems

Alignment positions include: start, center, end and space-between

Please see respective classes below:

  • uscb-layout-align-flex-start
  • uscb-layout-align-center
  • uscb-layout-align-flex-end
  • uscb-layout-align-space-between

Responsive Classes

The layout alignmnet API supports global responsive breakpoints such as sm, md, lg and xl, see below chart.

Break Point
Media Query

sm

max-width: 576px

gt-sm

min-width: 576px

md

max-width: 768px

gt-md

min-width: 768px

lg

max-width: 992px

gt-lg

min-width: 992px

xl

max-width: 1200px

Examples

  • uscb-layout-align-flex-start-sm
  • uscb-layout-align-flex-start-md
  • uscb-layout-align-flex-start-lg
  • uscb-layout-align-center-sm

Responsive Classes

  • uscb-layout-align-start-start
  • uscb-layout-align-start-center
  • uscb-layout-align-start-end
  • uscb-layout-align-center-start
  • uscb-layout-align-center-center
  • uscb-layout-align-center-end
  • uscb-layout-align-end-start
  • uscb-layout-align-end-center
  • uscb-layout-align-end-end