Last updated
Last updated
This core reference entry is suited for beginner-level builders.
The following responsive properties are generally available for all . also have responsive layout types that determine what additional layout properties its have. These are outlined in the section.
Custom: Default setting.
Full width: Sets page width to 1200.
Centered: Sets page width to 980.
Mobile: Sets page width to 380.
Set the width of the page while in UI Builder mode. This option is only available for responsive container layout types (i.e. not Fixed) since these containers at the page level will grow to fit whatever the screen size is in run-mode. In the Responsive tab, you will be able to drag the canvas to see how the layout reacts to different screen sizes.
The container layout type of the parent container. Clicking edit brings you to the property editor of the parent container.
Check this box to maintain the current of the element as the parent container is resized. Only available for shapes, icons, and images.
Check this box if you want the element to maintain a fixed width as the parent container resizes. If not, you will need to specify a minimum and maximum width.
Enter the width of the element in pixels.
Specify the smallest width the element should be allowed to get as the parent container resizes. This value can be set in pixels or percentage relative to the parent container.
Specify the largest width the element should be allowed to get as the parent container resizes. This value can be set in pixels or percentage relative to the parent container. If left blank, the maximum width will default to infinite, which means it will stay as wide as the parent container.
Note: Child elements will always try to grow to their max width, unless restricted by other elements or its parent container.
Check this box to shrink this container to the width of the widest child element or its min width. Otherwise, the container will grow to its max width or the width of its parent container, whatever is smaller.
Check this box if you want the element to maintain a fixed height even if its content or parent container grows. If not, you will need to specify a minimum and maximum height.
Enter the height of the element in pixels.
Specify the smallest height you want the element to get in pixels or percentage relative to the parent container.
Specify the largest height you want the element to get in pixels or percentage relative to the parent container. If left blank, the maximum height will default to infinite, which means it will stay as tall as the parent container.
Note: Child elements will always try to grow to their max height, unless restricted by other elements or its parent container.
Check this box to shrink this container to the height of the tallest child element. Otherwise, the container will grow to its max height or height of its parent container, whatever is smaller.
Note: This setting is only available on container elements inside a parent container with a layout type of align to parent or column.
Enter the x-axis position of the element’s top left corner relative to the parent container in pixels.
Enter the y-axis position of the element’s top left corner relative to the parent container in pixels.
Check this box to collapse or remove the element from its parent container when the element is not visible. This will free up space for other elements to move (if applicable). If unchecked, the element will still be invisible, it will just continue taking up space in the parent element. This checkbox is the way to replicate hidden functionality from the legacy responsive engine.
Check this box to add a scrollbar to the group container when the content is longer than the max height of the group container.
Scrollbars, especially when in repeating groups, can sometimes cause elements to appear slightly different than designed on certain browsers and devices. This is because Bubble relies on the end-user's operating system and browser to determine how a scrollbar should look.
Select this option from the Arrange or right click menu when multiple elements are selected to group the elements in a Fixed container.
Select this option from the Arrange or right click menu when multiple elements are selected to group the elements in a Row container.
Select this option from the Arrange or right click menu when multiple elements are selected to group the elements in a Column container.
Select this option from the Arrange or right click menu when multiple elements are selected to group the elements in an Align-to-Parent con1tainer.
Check this box to specify gap spacing between child elements in your Row or Column container. If the container has a Row container, you will be able to specify both row-gap and column-gap values. If your container has a Column container layout, you will be able to specify row-gap values. Gap values will move the position of child elements accordingly and reduce the amount of available space to grow within the parent container - if the child elements are variable width or height.
Specify a value in pixels. The row gap value defines the vertical distance between rows of child elements in a parent container. In a Row container layout, the row gap value defines a consistent distance between the first row of child elements as elements wrap to the next row. In a Column container layout, the row gap value defines a consistent distance between child elements as they are stacked vertically.
Specify a value in pixels. The column gap value defines the horizontal distance between child elements in a parent container and is only available in Row container layouts.
In this section about how to in the development environment.
Article:
Bubble Academy: (list of videos related to elements)
Note: Gap controls are supported by newer versions of most browsers with the exception of Internet Explorer. Refer to to see if your users browsers are supported.