Tips & Tricks

Bootstrap Studio has lots of powerful features that help you be more productive when building web sites. Here are some that you should know about.

Resize the Stage

Easily resize the stage to view your site on different screen sizes and devices. Learn more in our Bootstrap Grid tutorial.

Collapse/Expand the Side Panels

Click the inner edges of panels to expand them. You can also drag the edges to set them to the width you want.

CSS Multi Selection

Click CSS blocks while holding the Ctrl/Shift (Windows/Linux) or Cmd/Shift (Mac) keys to initiate a multi selection. This gives you quick actions to apply en masse.

CSS Locate Block

Click the file name of a CSS blocks to locate it within the file. See our CSS tutorial to learn more about CSS editing in Bootstrap Studio.

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.

More Tips

Action Trigger
Quickly edit the component label Middle mouse click in the Overview panel
Quickly start editing text Double Click a textual component (also works in the Overview panel)
Quickly change image/icon Double Click an image/icon component (also works in the Overview panel)
Close tab Middle mouse click

Tip: Be sure to check out our Keyboard shortcuts article for additional ways to become more productive with the app.