The Options Panel

Bootstrap Studio is a visual website editor. When you select a component, the sidebar is updated with multiple options for customizing it, organized in three tabs - Appearance, Options and Animation.

Appearance Panel

The Appearance tab gives you a quick way to edit various CSS properties visually. You can control element dimensions, colors, fonts and filters.

Every customization here is inserted as a CSS property. By default, these properties are applied to the element's style attribute, but you can change the CSS block that the generated CSS is to be inserted in from the dropdown on the top.

Note: Although the app lets you set a width and height easily, you should aim not to do this often, as it can break your page's responsiveness. Instead try to to use the bootstrap grid.

Options Panel

The options panel gives you access to all settings that are made available by the bootstrap framework. This includes textual options, responsive display, flexbox, borders and accessibility settings.

The Options panel displaying settings for a paragraph.

In contrast to the Appearance panel which works with CSS directly, the settings in the Options panel work with Bootstrap's classes. There is some duplication between the two, but it's recommended to use the options in this tab over those in Appearance.

Animation Panel

The last panel is Animation, which lets you easily define smooth CSS animations that are triggered on Scroll, Hover or Page Load.

A lot of different effects and settings are available, which are explored in our animation tutorial.