Bootstrap Studio

# Themes

Bootstrap Studio comes with a number of alternative themes that you can select for your design. You can also import a fully customized version of Bootstrap and use it in the app.

Themes vs Templates

In Bootstrap Studio with "themes" we refer to customized versions of the Bootstrap framework. Whereas "templates" are the complete preassembled designs you can see in the New Design dialog (Ctrl/Cmd + N).

# Built-in Themes

To select a different theme for your design, you need to open the Settings dialog and choose a different theme from the dropdown. This will change the colors and appearance of things like navbars, buttons, cards and more.

Theme Settings

# Custom Themes

The app also supports importing customized versions of the Bootstrap framework. There are many ways to create custom Bootstrap builds:

  • Using SASS (opens new window) to extend the framework's source files and override theme variables (recommended).
  • Modifying the CSS variables (opens new window) Bootstrap exposes to change the default theme colors and styles.
  • Manually editing the Bootstrap compiled distribution CSS file.
  • Other methods depending on your build tools and the version of Bootstrap you are using.

No matter which approach you go with, the end result should always be a regular CSS file that contains the core of the Bootstrap framework together with any style changes you've added.

TIP

You can see some nice theme examples at bootswatch (opens new window), which also power Bootstrap Studio's built-in themes.

To import the compiled CSS file of your theme, open the Settings dialog and click the Manage Themes button. There you can import your theme and it will show up in the themes dropdown, alongside the built-in ones.

Custom Themes

After importing a theme it will take the name of the file you provided. You can then change the name to your liking using the edit button (Edit Theme Name).

Note

Imported themes take the Bootstrap version of your current design. If you have a Bootstrap 5 design open, and import a custom theme, Bootstrap Studio will assume that the theme is also Bootstrap 5. If you then open a Bootstrap 4 design, your custom theme won't be available in the list since different frameworks are not compatible.

← Dark Mode →