Web apps include a wide range of elements designed for browser-based interfaces. These range from basic visual elements like text and images to interactive components like buttons, inputs, and containers, giving you everything you need to build responsive web pages.
Many web elements are shared conventions found across most modern web apps, while others are specific to Bubble. Below is a list of the elements available when building for the web.
Containers
Element | Description |
Group | The most basic and versatile container type. Used to organize elements, control layout, and hold data. |
Repeating group | Displays a list of items by repeating a set of elements for each entry in the data source. |
Popup | An overlay centered on the screen that appears above other elements, typically used for focused interactions like forms, messages, or confirmation dialogs. |
Floating group | A container that stays fixed to a side of the screen as the user scrolls, ideal for headers, sidebars, or floating action buttons. |
Group focus | An overlay anchored to a specific element that hides automatically when the user clicks outside of it. Useful for menus, tooltips, and inline pickers. |
Table | Displays a list of items in a structured, column-based layout with support for headers, sticky rows, and grid-like designs. |
Visual elements
Element | Description |
Text | Displays static or dynamic text on the page. |
Button | A clickable element that can trigger a workflow when pressed. |
Icon | Displays a small graphic symbol, often used for actions, navigation, or visual cues. |
Link | A clickable element that navigates to another page or external URL. |
Image | Displays a static or dynamic image on the page. |
Shape | Displays a rectangle. |
Alert | A temporary message that appears on the page to give the user feedback, such as a confirmation or error notice. |
Video | Embeds a video player, supporting YouTube and Vimeo. |
HTML | Renders custom HTML directly on the page, useful for embedding third-party components or content. |
Map | Displays an interactive map with optional markers. |
Built on Bubble | A small badge that links to Bubble's homepage, showing that your app was built with Bubble. |
Input forms
Element | Description |
Input | A single-line field for entering short text, numbers, emails, or other short values. |
Multiline input | A multi-line field for entering longer text, such as descriptions, comments, or messages. |
Checkbox | A clickable element that lets users toggle a yes/no value. |
Dropdown | A collapsible list of options that lets users select a single value. |
Searchbox | A text field that lets users search for items in a list as they type. Also supports Google Maps addresses. |
Radio buttons | A group of options where users can select one value from a set of choices. |
Slider input | A slider control for selecting a numeric value within a defined range. |
Date/time picker | A picker for selecting dates, times, or both. |
Picture uploader | Lets users upload an image file, with an image preview built in. |
File uploader | Lets users upload files of any type. |
Multi dropdown | A collapsible list of options that lets users select multiple values at once. |
Reusable element
Reusable elements are containers that can contain other elements and workflows. This container can be reused across your app.
Article:Reusable element