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