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.

Selecting Components

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.

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:

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

Moving Components

When an element is selected, you can grab it by the move handle ( ) to drag and drop it into other components. Bootstrap Studio knows where components can be dropped and automatically adds CSS classes and other attributes that the Bootstrap framework expects.

Tip: You can also 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 necessary so that Bootstrap Studio can guarantee that your page remains in a consistent state and can't be broken accidentally.

Locked components 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.

Component Multi Selection

Click components while holding the Ctrl/Shift (Windows/Linux) or Cmd/Shift (Mac) keys to initiate a multi selection. You can move or delete the selected components as a group. This works in both the Overview panel and the Stage.