Horizontal container
License

Horizontal container

By default, contents are displayed in Boomla vertically, one after the other. This app displays all contents horizontally next to each other.

Examples

Note: the red images are for demonstration purposes only, they each stand for a content. They are not part of the horizontal container app.

Normal content flow

item-red-d40000-900.png
item-red-d40000-700.png
item-red-d40000-500.png
item-red-d40000-300.png
item-red-d40000-100.png

Horizontal container

item-red-d40000-900.png
item-red-d40000-700.png
item-red-d40000-500.png
item-red-d40000-300.png
item-red-d40000-100.png

Content spacing

item-red-d40000-900.png
item-red-d40000-700.png
item-red-d40000-500.png
item-red-d40000-300.png
item-red-d40000-100.png
item-red-d40000-900.png
item-red-d40000-700.png
item-red-d40000-500.png
item-red-d40000-300.png
item-red-d40000-100.png
item-red-d40000-900.png
item-red-d40000-700.png
item-red-d40000-500.png
item-red-d40000-300.png
item-red-d40000-100.png

Horizontal align

Left

item-red-d40000-900.png
item-red-d40000-700.png
item-red-d40000-500.png
item-red-d40000-300.png
item-red-d40000-100.png

Center

item-red-d40000-900.png
item-red-d40000-700.png
item-red-d40000-500.png
item-red-d40000-300.png
item-red-d40000-100.png

Right

item-red-d40000-900.png
item-red-d40000-700.png
item-red-d40000-500.png
item-red-d40000-300.png
item-red-d40000-100.png

Space between

item-red-d40000-900.png
item-red-d40000-700.png
item-red-d40000-500.png
item-red-d40000-300.png
item-red-d40000-100.png

Space around

item-red-d40000-900.png
item-red-d40000-700.png
item-red-d40000-500.png
item-red-d40000-300.png
item-red-d40000-100.png

Space evenly

item-red-d40000-900.png
item-red-d40000-700.png
item-red-d40000-500.png
item-red-d40000-300.png
item-red-d40000-100.png

Vertical align

Top

red-w40-h60-900.png
item-red-d40000-700.png
red-w40-h100-500.png
red-w40-h20-300.png
red-w40-h80-100.png

Center

red-w40-h60-900.png
item-red-d40000-700.png
red-w40-h100-500.png
red-w40-h20-300.png
red-w40-h80-100.png

Bottom

red-w40-h60-900.png
item-red-d40000-700.png
red-w40-h100-500.png
red-w40-h20-300.png
red-w40-h80-100.png

Stretch

red-w40-h100-900.png
red-w40-h100-700.png
red-w40-h100-500.png
red-w40-h100-300.png
red-w40-h100-100.png

Note: stretch affects the space available for the content. It doesn't mean the content will be automatically stretched, it is up to the application to support this functionality when it makes sense.

Wrap

When the contents do not fit in a row, they are wrapped into multiple rows

red-w200-900.png
red-w200-700.png
red-w200-500.png
red-w200-300.png
red-w200-100.png

Empty horizontal container

drop contents here