Bolt Design System

Gutter

Gutter is the horizontal spacing in between layout items. Row gutter is the vertical spacing in between layout items.

Important Notes:

Reference the schema for all options. Layout schema

Demo

Gutter

large gutter

Row Gutter

small row gutter

Twig

{% include '@bolt-layouts-layout/layout.twig' with {
  gutter: 'large',
  row_gutter: 'small',
  ...
} only %}

HTML

<bolt-layout gutter="large" row-gutter="small">
  <bolt-layout-item>
    <!-- Content goes here -->
  </bolt-layout-item>
  <bolt-layout-item>
    <!-- Content goes here -->
  </bolt-layout-item>
</bolt-layout>