Selecting and Moving Components

Bootstrap Studio is a visual website editor. You do most things by selecting components, editing their options and dragging them to other parts of the page.

In the app, you select components by clicking them. Selecting a component shows a blue outline around it, and a bar with quick actions:

This is what a selected paragraph looks like.

With these actions you can quickly move the item, edit its text and duplicate it. Keep in mind that not all actions are available on every component. For example text editing isn't shown on images.

Tip: You can select multiple components at once by holding Shift or Cmd/Ctrl while clicking.

The Options Panel

When a component is selected, the Options panel on the right is updated. This is the place where you can modify the styling of the component, control various properties and even create animations.

The Options panel displaying settings for the paragraph.

There are three tabs in the Options panel - Look and Feel, Options and Animations. The settings that are available in these three tabs give you a great deal of control over the design and behavior of components. But if you need even more control, then writing CSS is for you (see the Writing CSS tutorial for more).

One thing to keep in mind, is that some of Bootstrap's components are actually made out of others, like this dropdown:

If you attempt to select it, you will actually select the Button inside it. If you wish to see the options of the Dropdown, you need to go one component up. This is easy to do by clicking the "Up" button ( ) on the selected component, or the entry in the breadcrumbs bar, displayed at at the top of the Options panel:

When an element is selected, you can grab it by the move handle ( ) to drag and drop it into other components.

Tip: You can drag from the Stage and drop components on the Overview panel for greater precision.

Locked Components

Some elements like the HTML and Body are locked and can't be moved (you can recognize them by the small padlock in the Overview panel). This is done so that you don't break the page by mistake. This shouldn't limit you in any way - when a component is locked, this means that you can find many options for controlling it in the Options panel.

Bootstrap Studio knows where components can be dropped and automatically adds CSS classes and other attributes that the Bootstrap Framework expects. You don't even have to think about it.