Bolt Design System

Vertical Alignment for Individual Layout Item

A particular layout item can be vertically aligned itself to start, center, or end, ignoring the vertical aligment on the layout level.

Important Notes:

If vertical alignment is set, layout items cannot match each other’s height even if 100% height is used. Do not use this prop if equal height layout items are desired.

This prop is only effective in a multi-column layout.

For regular options, they are only effective when applied to the shorter item.

For advanced usage, the offset options can even offset the top or bottom padding of the layout. This is useful when a design calls for a layout item to touch the edge of the layout.

If you intend to vertically align all layout items uniformly, please use the prop on the layout level. View layout vertical alignment

Demo

Regular Alignments

Vertically aligned itself start

Short item (start)

Tall item (Some more text to make this taller. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla tenetur natus dolore recusandae incidunt odio quasi reiciendis fugiat nihil quod? Assumenda culpa, cupiditate debitis ipsum excepturi tempora similique eum saepe!)

Vertically aligned itself center

Short item (center)

Vertically aligned itself end

Short item (end)

Offset Alignments

Vertically aligned itself start-offset

Layout item (start-offset)

Layout item

Vertically aligned itself end-offset

Layout item (end-offset)

Layout item

Offset Use Cases

Vertically aligned itself start-offset

Layout item

The other layout item (the image) is using start-offset.

Vertically aligned itself end-offset

Layout item

The other layout item (the image) is using end-offset.

Twig

{% set layout_items %}
  {% include '@bolt-layouts-layout/layout-item.twig' with {
    content: 'Short item',
    align_self: 'end',
  } only %}
  {% include '@bolt-layouts-layout/layout-item.twig' with {
    content: 'Long item (Some more text to make this taller. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla tenetur natus dolore recusandae incidunt odio quasi reiciendis fugiat nihil quod? Assumenda culpa, cupiditate debitis ipsum excepturi tempora similique eum saepe!)'
  } only %}
{% endset %}

{% include '@bolt-layouts-layout/layout.twig' with {
  content: layout_items,
  template: [
    'halves',
  ],
} only %}

HTML

<bolt-layout template="halves">
  <bolt-layout-item align-self="end">
    <!-- Shorter content goes here -->
  </bolt-layout-item>
  <bolt-layout-item>
    <!-- Longer content goes here -->
  </bolt-layout-item>
</bolt-layout>