Bolt Design System

Horizontal Alignment

A single layout item can be horizontally aligned to the start, center, or end.

Important Notes:

This prop is only effective in a single-column layout (e.g. 50%, 67%, and 75%).

Reference the schema for all options. Layout schema

Demo

75% and horizontally aligned start

75% and horizontally aligned center

75% and horizontally aligned end

Twig

{% include '@bolt-layouts-layout/layout.twig' with {
  template: [
    '75',
  ],
  align_items: 'center',
  ...
} only %}

HTML

<bolt-layout template="75" align-items="center">
  <bolt-layout-item>
    <!-- Content goes here -->
  </bolt-layout-item>
</bolt-layout>