Customizing your Design

Many people find the default bootstrap look a bit dull and dated. For that reason, Bootstrap Studio offers variety of customization options.

There are three main ways to customize your design. By changing the theme to one of the built-ins, importing an entirely custom theme, and by customizing the CSS of your page on an ad-hoc basis.

Bootstrap Themes

Open the Design Settings dialog by clicking the 'Settings' button, located in the main menu. Then choose the theme you like from the dropdown menu and click 'SAVE'. This will automatically change your project's theme.

Custom Themes

In case you want to use your own theme, you can import custom Bootstrap themes. Open the Design Settings dialog and click on the 'MANAGE THEMES' button. There, you can import your theme CSS file, and it will be available to use in all your designs.

Note: Only CSS files are supported as custom themes. Each theme file must contain the full Bootstrap framework. You can see some examples at bootswatch.

Look and Feel

Another easy way to customize the design of your sites, is to use the Look and Feel tab in the Options panel (located on the right side of the app). From there, you can modify various CSS properties for the selected component.

By default, all styles are applied to the style attribute of the element. This is a quick and dirty way to apply css styling, but it is generally considered a bad practice. We recommend that you create a class name or id, and select it in the dropdown.