Reusable element instance
This core reference entry is suited for intermediate-level builders.
Learn more about experience levels.
To learn about this topic more in-depth, we recommend reading the suggested articles below:
Reusable elements
Article: Reusable elements
Elements In this article series, we cover how to work with different element types:
Article series: Elements
Article series: The element hierarchy
Article: The page
Article series: Container elements
Elements that contain other elements.
Article: Visual elements Elements like text, buttons, icons and images.
Article series: Input forms Elements that accept input, such as text and file uploads.
Article: Conditional expressions
Making your elements change appearance in response to varying conditions.
The design tab In this article we cover the different tools available in the design tab.
Article: ´The design tab
Design
Article series focusing on design in general, explaining terminology and offering resources to help you set up a user-friendly, good looking design.
Article series: Design
Article: Responsive design
Building pages that work on all devices, such as a laptop and a phone.
Previewing your app
In this section about how to preview your app in the development environment.
Article: Previewing your app
Bubble Academy: Converting to a Reusable Element Bubble Academy: Designing a Navbar (using reusuable elements to create a navigation bar)
Webinar: Building a Scalable Design System with Gregory John [BubbleCon 2023] Webinar: Building Modular: How Bubble Builds Bubble for Scale [BubbleCon 2023]
Reusable elements are configured in two places:
Definition: the properties of the reusable elements itself.
Instance: the properties of each instance of a reusable element
This article covers the instance properties.
The reusable element instance is the element you place on the page or view. You can place multiple instances of the same reusable element on the same page, and each instance can have its own individual properties.
Visual
Content
Data source
The data source for the reusable element. The data type is defined on the reusable element itself.
Properties
Sets the values for this instance's custom properties. To add or remove properties, edit the reusable element definition directly.
Size
Sets the width and height of the element. These properties depend on the layout configuration of the parent element.
Height
Sets the width/height of the element. The column, row and align layouts have a more flexible way to set element position.
Fixed
Sets the width of the element as a fixed value.
Pixels: sets the width to a fixed pixel value
Percentage: sets the width to a percentage of the parent container
Fit
The element’s width and height automatically adjust based on the size of its child elements. To add a mininum and/or maximum value, click the + symbol.
Min: the minimum width/height, defined as a pixel value or percentage of the parent container.
Max: the maximum width/height, defined as a pixel value or percentage of the container.
Fill
The element's width and height fills the available space in the parent container. To add a mininum and/or maximum value, click the + symbol.
Min: the minimum width/height, defined as a pixel value or percentage of the parent container.
Max: the maximum width/height, defined as a pixel value or percentage of the container.
Parent container has a fixed layout
Width/height
Sets the widht/height of the element. The fixed layout has a more rigid way of setting element size, based on static pixel values.
Fixed
Sets the width of an element as a fixed pixel value.
Layout
Alignment
Parent layout: Column
In a column layout, a child element's property is restricted to the vertical axis.
Left
Elements are aligned to the left edge.
Center
Elements are aligned to the vertical center of the container.
Right
Elements are aligned to the right edge.
Parent layout: Row
In a row layout, a child element's alignment property is restricted to the horizontal axis.
Top
Elements are aligned to the top edge of the container
Center
Elements are aligned to the horizontal center of the container.
Bottom
Elements are aligned to the bottom edge of the container.
Parent layout: Align
In an align layout, a child element's property is restricted to one of nine cells in a 3x3 grid. Any element placed within the same cell will overlap.
Top-left
Elements are aligned to the top-left corner of the container.
Top-center
Elements are aligned to the top edge and horizontally centered within the container.
Top-right
Elements are aligned to the top-right corner of the container.
Center-left
Elements are vertically centered and aligned to the left edge of the container.
Center
Elements are vertically and horizontally centered within the container.
Center-right
Elements are vertically centered and aligned to the right edge of the container.
Bottom-left
Elements are aligned to the bottom-left corner of the container.
Bottom-center
Elements are aligned to the bottom edge and horizontally centered within the container.
Bottom-right
Elements are aligned to the bottom-right corner of the container.
Parent layout: Fixed
Elements are positioned using fixed X and Y coordinates, defined in pixels.
Spacing
Padding
Defines the internal spacing between an element’s content and its border in a static pixel value. Padding adds space inside the element, without affecting its position relative to other elements.
Padding must be set on the reusable element definition.
Margin
Defines the external spacing between an element and surrounding elements.
Margin adds space outside the element’s border. It affects the distance between elements and influences layout positioning.
Style
Style sets the visual design of the element, including properties such as colors, fonts, borders, shadows and other appearance settings.
Styles are shared across elements. When multiple elements use the same style, updating the style will automatically update all elements that reference it.
Style selector
Select the style to apply to the selected element.
Edit style
To edit the style, click the edit style icon. The changes to that style will apply to all elements using that style.
Detach style
Detaching the style will disconnect the element from the current style, but keep the formatting of the style until you make changes to it. This only affects the selected element.
Overriden styles
You can override a style on one or more elements, using the defined style properties but allowing you to make individual changes to styling properties that apply only to the selected element(s).
Overridden styles will be marked with an Overridden labelI.
You can reset the selected element's style by clicking the Reset icon.
Interaction
Workflows
Shows the workflows connected to the selected element. Click the + symbol to create a new workflow associated with that element. The list of available events differs based on which element is selected.
Shortcut: To quickly add a workflow to a selected element, press Cmd+K on macOS or Ctrl+K on Windows. The shortcut defaults to the most likely event for that element type.
Visibility
Visible on page load
Enable this to make the element visible by default. This checkbox makes the element visible every time the page loads or reloads. Change the visibility of the element based on certain conditions in the Conditional section in the property editor or with a show/hide element action in a workflow.
Collapse when hidden
Enable this to make the element collapse its height and width to 0 pixels when hidden. This allows surrounding elements to automatically shift into the freed space, preventing empty gaps in the layout.
This is commonly used in single-page applications, where elements are shown and hidden dynamically as users navigate, without leaving the page.
Allow vertical scrolling
When enabled, the reusable element can scroll vertically if its content exceeds the element's height.
Options
ID attribute
A unique identifier assigned to the element. This can be used to reference the element in custom code, such as JavaScript or CSS, using document.getElementById() or CSS selectors.
For this property to be visible, you need to enable Expose the option to add an ID attribute to HTML elements in Settings – Advanced options.
Last updated
Was this helpful?