Modal Width Variation The modal container's width can be adjusted by the width prop. The default is set to optimal. Important Notes: The full modal takes up the full width of the screen minus the gutters (about 2rem on left and right). The regular modal is 10 out 12 columns wide, about 80% of the screen width. The optimal modal is about 75 characters wide, close to optimal reading length. The auto modal adjusts to the width of the modal content. In most cases, the user must define a max-width in absolute value (do not use relative value such as %) on the modal content to get the desired results. Recommended for advanced usage. The width prop only applies to viewports equal to or above the small breakpoint (~600px). Advanced usage: use an image that has the width attribute defined (e.g. 640) in tandem with auto width modal will allow the image inside the modal to be responsive but does not stretch beyond the specified width. Demo This is a modal set to full width. This is a modal set to regular width. This is a modal set to optimal width. This is a modal set to auto width. A Rock Climber
Twig
{% include '@bolt-components-modal/modal.twig' with {
  content: 'This is a modal set to full width.',
  width: 'full',
  attributes: {
    class: 'js-bolt-modal--width-full',
  },
} only %}
HTML
Not available in plain HTML. Please use Twig.