Skip to content

Using alignment

You can align items inside flex and grid layouts.

Align a component relative to its container with align-self

_

align-self=start

_

align-self=center

_

align-self=end

_

align-self=auto

_

align-self=baseline

_

align-self=stretch

_ center
_ stretch

Align the content of a component with align-text

template
  <Button align-text="start">🐌</Button>
  <Button align-text="center">🐌</Button>
  <Button align-text="end">🐌</Button>
  <Button icon="bi-star" align-text="stretch">🐌</Button>
  <Button icon="bi-star" align-text="space-out">🐌</Button>