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 - Look & Feel, Options and Animation.

Look & Feel Panel

The look and feel 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 Look & Feel 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 Look & Feel.

Animation Panel

The last panel is Animation. It let's you easily define Scroll and Hover animations on your design. You can check out our animation tutorial to learn more.