Styles

Defining named styles with properties that can be applied to multiple elements.

Experience level

This core reference entry is suited for beginner-level builders.

In-depth articles (3)

To learn about this topic more in-depth, we recommend reading the suggested articles below:

Styling

In the article series below, we cover styles, font variables, color variables and how to use custom fonts. This covers the technical side of styling in Bubble.

• Article series: Styling

---

Design and UX (theory and inspiration)

If you are new to design, you may also be interested in checking out our beginner's guide to design where we link to a lot of different resources where you can learn, find inspiration and use resources such as templates, icon packs and style sets:

• Article series: Design and UX

---

Elements

If you are unfamiliar with what elements are and how to place them on the page and assign them responsive properties, the article series below gives an extensive introduction to how you populate your page with sleek and useful elements and make them behave as you want:

• Article series: Elements

Videos (1)

• Getting started with Bubble: Styles

Element type

Select a type from the dropdown, such as Alert, Group, or Repeating Group, to return the existing styles for that .

Search by name

Type the name of an existing style, such as "Standard Alert," to find and edit that style.

Add style

Add a custom style to your application. Choose a name and type, such as "Custom Alert" for "Alerts." Once you define this style's properties, you can apply this style throughout your app in that element's property editor.

Find all elements using this style

Access a shortcut to the App Search Tool, which will return a list of any currently using this style. Clicking on a result in the App Search Tool will take you to the location of that styled element in your application.

Make this style the default

Any new of this type will automatically be created with this style, rather than the predefined styles that come with your application.

Remove this style as the default

Any new elements of this type will no longer be created with this style. Unless you set another default for this element type, new elements will not have a style when created.