Container

A Container is a div with pre-defined styles. They are the building blocks of your application and critical for responsive design. Containers are used to structure your application and layout other components/elements in a structured way. You can use flexbox to layout the items within your container.

πŸ“˜

Learn Flexbox

Budibase containers use flexbox to layout components. A great resource for learning flexbox is flexbox froggy.

Container settings

There are several general settings for the container component, most of which are shared with other components as well.

SettingDescription
NameChange the name of your component, and how it reads within the component tree.
DirectionChange the direction of the components nested within your container. You can layout your components in a row (β†’) or a column (↓).
Horizontal alignThe horizontal. align setting is used to align the items on the main axis, the direction in which flex-direction has set the flow. The initial value is left which will line the items up at the start edge of the container, but you could also set the value to right to line them up at the end, or center to line them up in the center.

You can also use the value stretch to take all the spare space between the items, and share it out evenly between the items so there will be an equal amount of space between each item.
Vertical alignThe vertical align property will align the items on the cross axis. The initial value is top which aligns the items along the top of the container (like they're handing from a roof), but you could also set the value to the bottom to align the items along the bottom (like they're standing on the floor), or middle to line them up in the center.

You can also use the value to stretch, to stretch the items to fill the height of the container.
SizeWhere the grow option deals with adding space in the main axis, the shrink property controls how it is taken away.
GapThe gap property sets the gaps (gutters) between items stored within a container. You can select the different sizes of gaps you would like between your items.
WrapSelect the wrap to wrap your components onto multiple lines. This is critical when designing for mobile resolutions.

With nowrap, the items are laid out in a single line which may cause the flex container to overflow.

On Click

By defining actions within the On Click setting, the container will be treated like a button including the cursor change. Any click events of buttons or other containers within a container with On Click actions set will be ignored.

Container background color

You can also splash some color into your apps with containers!

To clear the selected color, click on the X in the bottom right of the panel.

For additional flare, there are a range of gradients available.

TitleGradient
Warm Flame
Night Fade
Spring Warmth
Sunny Morning
Winter Neva
Tempting Azure
Heavy Rain
Deep Blue
Near Moon
Wild Apple
Plum Plate
Peach Kiss
Flamingo Sunrise
Bud Mist
Ballet Slipper
Black Noir

You can also add background colors to your Screens


Component layout

When using containers to layout your components, the most important setting is Direction as this will determine the flow of components. Even the Screen can set a layout direction.

Screen column layout

Screen column layout

Screen row layout

Screen row layout

If you need additional layout you can add containers. For example what if we wanted to group 'THREE' and 'FOUR' in column direction, but have an overall row layout for the screen. In this case we need to add a container and nest P3 and P4 like so:

Combining row and column directions

Combining row and column directions

Containers are the most flexible way to layout your components in the Design section, and you can nest any number of containers with different styles and layout options.

You may however be interested in Using sections or Field groups to get out of the box layouts.


Tab component

A Custom plugin is available here if you wish to add tabs to your app screens!