Selecting and Moving

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:

With these actions you can

• - Move the item
• - Select its parent
• - Edit its text
• - Resize its margin and padding
• - Duplicate it
• - Hide it
• - Trash it

Tip

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

Double Clicking

This is a quick way to both select a component and trigger its primary action. For textual components this will switch them to text editing mode, and for components like Images and Icons, it will show the Image or Icon browser respectively.

Resizing Components

Some components like Image, Icon and Column show a small resize handle on the bottom-right. You can drag it to resize them directly in the stage (opens new window), without having to go to the Appearance tab or component options and editing properties from there.

Tips

• You can hold Shift to maintain the aspect ratio of images.
• Note that generally resizing images this way is not recommended since they won't shrink to fit small screens. It's better to activate the "Responsive" setting in the Image options and to restrict the width by placing the image in a Column component.

Resizing Margin and Padding

By clicking on the Resize Margin and Padding icon , you can activate the margin and padding mode. You can drag the handles to increase or decrease the padding and margin of the relevant side.

The app displays a dropdown on the top left for choosing where the changed margins and paddings are stored:

• CSS Props - when this is selected, the resize handles modify the margin and padding CSS rules in the Appearance tab. You can use the Style Target Editor to choose which CSS block will receive these rules.
• Utility Class - when chosen, the resize handles add Bootstrap's m-* and p-* utility classes (opens new window) to the element. From the dropdown next to it you can select which breakpoint the classes will apply to.

Tips

• You can hold Shift for symmetric resizing - the app will change the opposite side as well as the current one.
• You can hold Shift in combination with Ctrl (on Windows and Linux) or Command (macOS) to resize all sides at the same time.
• Middle click a handle to reset its value. This will remove the related utility class or css prop.

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 styles and other attributes if needed.

Tips

• You can drag from the Stage and drop components on the Overview panel for greater precision.
• You can hold Ctrl (Windows/Linux) or Cmd (Mac) when grabbing the move handle, to create copies. Combining this with Shift will create linked copies.

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 component options.

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 and is especially useful when changing the appearance of multiple elements.