This layout is in a testing phase, do not use any code examples from the docs for production sites.
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)
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 end
Short item (end)
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!)
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>