# Options Panel

On the top right-hand side of the Bootstrap Studio window is the Options panel. It is populated with a multitude of settings that let you modify everything about the look and feel of your designs.

Options Panel Tabs

It consists of three main tabs:

  1. Appearance – Holds smart, user-friendly inputs for changing the CSS properties of the selected components.
  2. Options – It gives you a quick access to to all settings that are made available by the bootstrap framework.
  3. Animations – Let's you define smooth CSS animations that are triggered on Scroll, Hover or Page Load

# Appearance

In this tab you can find controls for adjusting the CSS of components. All changes are reflected in real time in the stage, meaning you can see how changing a property is reflected in your design.

There are inputs for most of the commonly used CSS properties - from simple things like padding and borders to more complex CSS like transforms and filters. All of the inputs are visual and easy to use.

Appearance Panel


You can click the Margin label to reveal margin-top, margin-bottom, margin-left and margin-right sub properties. The same goes for Padding and others.

# Style Target Editor

Every customization in the Appearance panel 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 Style Target Editor.

Select CSS Block

If you want to quickly add a new CSS block or edit the current one you can do it easily with these options:

  • Edit Button - Quickly edit the CSS block's selector or move the block to another CSS file.

Select CSS Block

  • Edit Button - Create a new CSS block. It will be selected as the new target automatically and you can start adding styles to the new block right away.

Select CSS Block


If you enter a selector that includes an id or class names that the selected component doesn't have, the editor will add them automatically.

# Options

Depending on the selected component, Bootstrap Studio shows all settings that are made available by the bootstrap framework. This includes textual options, responsive display, flexbox, borders and accessibility settings.

Options Panel

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 whenever possible.

# Animations

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

Animations Panel

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

# Multiselections

The visual editing workflow of Bootstrap Studio is made more powerful with multi-selections. Hold Ctrl/Shift (for Windows and Linux) or Cmd/Shift (on Mac) while clicking, to add components to a multiselection. This lets you change their appearance simultaneously.

This is a great productivity boost for those who prefer the visual nature of the app. For those of you who prefer writing code, you can achieve similar results by assigning class names to your HTML elements and writing CSS, as laid out in our CSS guide.

# Collapsing / Expanding

Like most panels in the Bootstrap Studio app, you can adjust its size and collapse/expand it. When the Options panel is collapsed, each of the tabs can be accessed quickly by clicking the respective icon.