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.

12161216

📘

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.

265265

Setting

Description

Name

Change the name of your component, and how it reads within the component tree.

Direction

Change the direction of the components nested within your container. You can layout your components in a row (→) or a column (↓).

Horizontal align

The 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 align

The 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.

Size

Where the grow option deals with adding space in the main axis, the shrink property controls how it is taken away.

Gap

The 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.

Wrap

Select 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.

Container background color

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

241241

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.

Title

Gradient

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


Did this page help you?