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>