Bootstrap Studio Keyboard Shortcuts

There is a large number of keyboard shortcuts available for use in Bootstrap Studio, which is a great way to speed up your workflow when creating web designs.

Action Windows/Linux Mac
Save Design Ctrl + S Command + S
Open Design Ctrl + O Command + O
New Design Ctrl + N Command + N
Export Design Ctrl + E Command + E
Close Design Ctrl + W Command + W
Publish Design Online Ctrl + P Command + P
Toggle Browser Preview Ctrl + I Command + I
Copy Selected Component Ctrl + C Command + C
Paste Component Ctrl + V Command + V
Paste Linked Component Ctrl + Shift + V Command + Shift + V
Add Component Label Ctrl + L Command + L
Focus Parent Component Ctrl + Up Arrow Command + Up Arrow
Focus Child Component Ctrl + Down Arrow Command + Down Arrow
Focus Next Sibling Ctrl + Right Arrow Command + Right Arrow
Focus Previous Sibling Ctrl + Left Arrow Command + Left Arrow
Duplicate Focused Component Ctrl + D Command + D
Delete Focused Component Delete Forward Delete
Zoom In Ctrl + Command +
Zoom Out Ctrl - Command -
Reset Zoom Ctrl + 0 Command + 0

Text Editing Shortcuts

Action Windows/Linux Mac
Edit Text Element Enter Enter
Empty Text Element And Edit Backspace Delete
Bold Ctrl + B Command + B
Italic Ctrl + I Command + I
Underline Ctrl + U Command + U
Toggle Link Ctrl + K Command + K
Insert New Line Shift + Enter Shift + Enter
Insert Non-Breaking Space ( ) Shift + Space Shift + Space
Delete Left Word Ctrl + Backspace Option + Delete
Delete Right Word Ctrl + Delete Option + Forward Delete
Move To Start Of Line Home Command + Left Arrow
Move To End Of Line End Command + Right Arrow
Move To Previous Word Ctrl + Left Arrow Option + Left Arrow
Move To Next Word Ctrl + Right Arrow Option + Right Arrow
Select Previous Word Ctrl + Shift + Left Arrow Option + Shift + Left Arrow
Select Next Word Ctrl + Shift + Right Arrow Option + Shift + Right Arrow
Select All Text Ctrl + A Command + A

JavaScript Code Editing Shortcuts

Most Sublime Text keyboard shortcuts are supported. Windows/Linux, Mac

Mouse Tips & Tricks

Action Trigger
Collapse/expand the side panels Click the inner edges of panels
Start a multiple selection of CSS blocks Ctrl/Cmd/Shift + Click in the CSS editor
Quickly navigate to the file and line of a CSS block Click the file name of blocks in the Styles tab
Start a multiple selection of components Ctrl/Cmd/Shift + Click a component (also works in the Overview panel)
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