Bolt Design System

Vertical Alignment

A group of layout items can be vertically aligned to the start, center, or end.

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.

Reference the schema for all options. Layout schema

Demo

Vertically aligned start

Short item

Tall item (The height of the layout items will not match. 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 center

Short item

Vertically aligned end

Short item

Twig

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

HTML

<bolt-layout template="halves" valign-items="center">
  <bolt-layout-item>
    <!-- Content goes here -->
  </bolt-layout-item>
</bolt-layout>