Bolt Design System

Button Display

The display of a button can be changed from inline to block (full width), and there is an extra option to make it transform from inline to block at the small breakpoint.

Important Notes:

When display prop is set to inline@from-small, it means the button is block display below the small breakpoint, and transform to inline display from small breakpoint and up. Resize the browser to see the demo below.

Demo

Twig

{% include '@bolt-elements-button/button.twig' with {
  content: 'This is a full width button',
  display: 'block',
  attributes: {
    type: 'button'
  }
} only %}

HTML

<button type="button" class="e-bolt-button e-bolt-button--block">This is a full width button</button>