Template Template controls how the layout behaves. There are many options available to accommodate all kinds of use cases. Important Notes: Single-column: 50, 67, and 75 represent the percentage of width for the layout items. Layout item width is full if no template is set. Layout items can be horizontally centered only in a single-column layout. Multi-column: again, numbers represent percentage. Combinations of 25, 50, 67, and 75 can be used as long as they add up to 100 (eg. 25/50/25@from-small). These options must be used with the @from-* breakpoint postfix. @from-small means starting from small breakpoint and beyond; @from-medium means starting from medium breakpoint and beyond. Traditional: even columns can be created with halves, thirds, and fourths. These options also must be used with the @from-* breakpoint postfix. Special: flag is a common layout that contains an image on the left and text content on the right; tiles renders even-width layout items that will wrap once they hit a certain min-width. --l-bolt-layout-flag-media-width and --l-bolt-layout-tile-min-width CSS custom properties are available to further customize the Flag and Tiles templates. Reference the schema for all options. Layout schema Demo Single-column full 50% 67% 75% Multi-column 67% 33% 33% 67% 75% 25% 25% 75% 25% 50% 25% 50% 25% 25% 25% 25% 50% Traditional halves halves thirds thirds thirds fourths fourths fourths fourths Special flag media flag content tile tile tile tile tile tile tile tile tile tile

Twig

{% include '@bolt-layouts-layout/layout.twig' with { template: [ '67/33@from-small', '75/25@from-medium', ], ... } only %}

HTML

<bolt-layout template="67/33@from-small 75/25@from-medium"> <bolt-layout-item> <!-- Content goes here --> </bolt-layout-item> <bolt-layout-item> <!-- Content goes here --> </bolt-layout-item> </bolt-layout>