Alignment#

Every component in Bumbag has the ability to set an alignX or alignY prop, allowing the component to be aligned horizontally or vertically.

Vertical alignment#

I am aligned to the center

Editable example

<Box alignY="center" border="default" height="250px">
  I am aligned to the center
</Box>

<Box alignY="center" border="default" height="250px">
  I am aligned to the center
</Box>

I am aligned to the top

Editable example

<Box alignY="top" border="default" height="250px">
  I am aligned to the top
</Box>

<Box alignY="top" border="default" height="250px">
  I am aligned to the top
</Box>

I am aligned to the bottom

Editable example

<Box alignY="bottom" border="default" height="250px">
  I am aligned to the bottom
</Box>

<Box alignY="bottom" border="default" height="250px">
  I am aligned to the bottom
</Box>

I am aligned to the center

Editable example

<Box alignX="center" border="default">
  I am aligned to the center
</Box>

<Box alignX="center" border="default">
  I am aligned to the center
</Box>

I am aligned to the left

Editable example

<Box alignX="left" border="default">
  I am aligned to the left
</Box>

<Box alignX="left" border="default">
  I am aligned to the left
</Box>

I am aligned to the right

Editable example

<Box alignX="right" border="default">
  I am aligned to the right
</Box>

<Box alignX="right" border="default">
  I am aligned to the right
</Box>

On this page