nested layout

List element nested in Layout

Drive business and IT collaboration

with nimble Fusion Team development

Develop intelligent workflows fast by combining business expertise with development prowess.

  • Capture objectives with built-in design thinking
  • Quickly build and deploy minimal lovable products
  • Enable users to make immediate workflow adjustments

Discover App Studio

Automate powerful workflows in a no-code environment that centralizes user experience.

Alt text.

A layout nested in a layout

Drive business and IT collaboration

with nimble Fusion Team development

Develop intelligent workflows fast by combining business expertise with development prowess.

  • Capture objectives with built-in design thinking
  • Quickly build and deploy minimal lovable products
  • Enable users to make immediate workflow adjustments

Discover App Studio

Automate powerful workflows in a no-code environment that centralizes user experience.

Alt text. Learn how our low-code platform delivers 598% ROI Alt text.

full bleed layout

Twig Usage
Alt text.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Distinctio consequuntur ipsam consectetur at, quod optio! Neque quo eligendi itaque enim non fugiat odit suscipit qui voluptatum accusantium provident, quis voluptates.

Alt text.
HTML Usage Alt text.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Distinctio consequuntur ipsam consectetur at, quod optio! Neque quo eligendi itaque enim non fugiat odit suscipit qui voluptatum accusantium provident, quis voluptates.

Alt text.

layout display none

Fourths Layout Template. There are four items here. The fourth item has an additional class, u-bolt-hidden@medium.

First Item - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Second Item - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Third Item - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Fourth Item (hidden@medium) - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Tiles Layout Template. There are four items here. The fourth item has an additional class, u-bolt-hidden@medium.

First Item - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Second Item - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Third Item - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Fourth Item (hidden@medium) - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Fourths Layout Template. There are four items here. The third item has an additional class, u-bolt-hidden@medium.

First Item - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Second Item - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Third Item (hidden@medium) - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Fourth Item - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

25/75 Layout Template. There are two items here. The second item has an additional class, u-bolt-hidden@medium.

First Item - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Second Item (hidden@medium) - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

25/75 Layout Template. There are two items here. The first item has an additional class, u-bolt-hidden@medium.

First Item - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Second Item (hidden@medium) - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

layout item order and reset

Make first item last on the breakpoint larger than small and then reset layout to default on medium breakpoint, HTML usage.

Layout item (this will come last once the viewport is larger than the small breakpoint and first again on larger than medium breakpoint due to the reset@from-medium rule)
Layout item
Layout item

Make first item last on the breakpoint larger than small and then reset layout to default on medium breakpoint, TWIG usage.

Layout item (this will come last once the viewport is larger than the small breakpoint and first again on larger than medium breakpoint due to the reset@from-medium rule)
Layout item
Layout item

Use case scenario - one of the element has reseted order, the anotehr hasn't.

Layout item (this will come last once the viewport is larger than the small breakpoint)
Layout item
Layout item
Layout item (this will come first once the viewport is larger than the small breakpoint and try to return to the default order defined by HTML structure when the breakpoint is larger than medium due to the reset@from-medium rule. If this layout item is originally the last one in the HTML structure but another layout item has not been reset and is defined as the last one for example last@from-small, therefore this layout item will not be able to return to its original position defined by the HTML structure but will be the penultimate one.)

nested layout valign items

Nested layout with valign-items="center" option. According to the CSS comment - nested layout has reset all defaults. Everything stays the same except for padding getting zeroed out.

Bolt layout item ISN'T vertically centerd, because lives in nested layout, where options are reset.
Tall item (The height of the layout items will not match. Some more text to make this taller. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla tenetur natus dolore recusandae incidunt odio quasi reiciendis fugiat nihil quod? Assumenda culpa, cupiditate debitis ipsum excepturi tempora similique eum saepe! Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla tenetur natus dolore recusandae incidunt odio quasi reiciendis fugiat nihil quod? Assumenda culpa, cupiditate debitis ipsum excepturi tempora similique eum saepe!)
Bolt layout item is vertically centerd, because lives in first level layout with valign-items="center" option.

layout valign self

padding-top=none, padding-bottom=none and image wrapper with valign-self="end-offset" prop.

 Ready to crush complexity? Delight customers and get work done in a fast-changing world. Explore our technology Woman in a business suit glancing to her right

padding-top=small, padding-bottom=small and image wrapper with valign-self="end-offset" prop.

 Ready to crush complexity? Delight customers and get work done in a fast-changing world. Explore our technology Woman in a business suit glancing to her right

padding-top=medium, padding-bottom=medium and image wrapper with valign-self="end-offset" prop.

 Ready to crush complexity? Delight customers and get work done in a fast-changing world. Explore our technology Woman in a business suit glancing to her right

padding-top=large, padding-bottom=large and image wrapper with valign-self="end-offset" prop.

 Ready to crush complexity? Delight customers and get work done in a fast-changing world. Explore our technology Woman in a business suit glancing to her right

padding-top=xlarge, padding-bottom=xlarge and image wrapper with valign-self="end-offset" prop.

 Ready to crush complexity? Delight customers and get work done in a fast-changing world. Explore our technology Woman in a business suit glancing to her right