How to Create a Multi-Language Application in Bubble

Go to Settings in the left sidebar and click the Languages tab. You will see your default language, usually English. Click 'Add a new language' and select the languages you want to support — for example, Spanish, French, and Arabic. Each language creates a new column in the translation table. Bubble lists every text string in your app in this table. You can also export the translation file as a CSV, send it to translators, and import the completed translations back.

In the Settings → Languages tab, you will see a table with your default language text in the first column and empty columns for each added language. Click into each cell and type the translation. This covers button labels, placeholder text on inputs, static text elements, and error messages. For dynamic text from the database, you need a different approach — store translated versions in separate fields on your Data Type such as 'title_en', 'title_es', 'title_fr' or use a Translation Data Type that links translations to the original record.

In the Design tab, create a Dropdown or a set of flag icon buttons for language selection. For a dropdown approach, add a Dropdown element and set its choices to your supported languages. When the dropdown value changes, create a workflow that uses Bubble's built-in Set language action from the Navigation actions to switch the app language. For a persistent preference, save the language choice to the Current User's profile using Make changes to Current User so it loads on their next visit.

If you support Arabic, Hebrew, or other RTL languages, your layout needs to mirror. Add an HTML element with a script that detects the current language and sets the page direction. When an RTL language is selected, apply document.body.dir = 'rtl' via JavaScript. Also use Bubble's conditional formatting: on each Row container, add a condition that changes alignment when the language is RTL. Test thoroughly — some elements like icons and navigation may need individual RTL adjustments.

Dates and currencies display differently across locales. For dates, use Bubble's :formatted as operator with locale-specific format strings. Create conditional formatting on text elements that shows different date formats based on the current language. For currencies, create an Option Set called Currency Locale with attributes for symbol, position, decimal separator, and thousands separator. Display prices using dynamic text that combines the symbol and formatted number based on current locale settings.

Add a field to your User Data Type called 'preferred_language' of type text. When a user changes their language via the switcher, add a workflow step to save the selection: Make changes to Current User → preferred_language = selected language. On the Page is loaded event, add a Set language action set to Current User's preferred_language with an Only When condition that the field is not empty. This ensures returning users automatically see the app in their chosen language.