This is a quick tutorial that will explain the basics about designing websites with Bootstrap Studio. We have an entire collection of guides in the Help menu above, and also on our website.
1. The application window
The window is divided into three parts. You have two panels on the left - Components and Overview; two panels on the right - Settings and Design, and the center area,
which holds the Stage.
The Stage is where you see a preview of the page, drag and drop components and edit text.
2. Selecting Components
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 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.
When a component is selected, the Settings 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.
There are three tab in the Settings 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 Help>Tutorials and Guides menu 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 Settings panel:
3. Editing Text
Some elements like paragraphs, spans and buttons can be edited within a rich text editor. You can make text bold,italic, underlined, add links and more.
Just double click an element to edit its content, or press the pencil button ( ) when the component is focused.
Tip: You can press the Enter key while an element is selected to start editing it, Ctrl+D/Cmd+D to duplicate and Delete to delete it. There is a list of supported keyboard shortcuts for power users on our website.
4. Drag and Drop
When an element is selected, you can grab it by the move handle ( ) to drag and drop it into other 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.
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.
Tip: You can drag from the Stage and drop components on the Overview panel for greater precision.
There is a large number of components available to you. You can see them in the Components panel's Studio tab. All standard Bootstrap components are supported, and even basic HTML elements like span,
div, section and more.
Components are organized into collapsible groups - Text, Image, Forms etc. You also have a special "User" group, where you can place components which you create yourself. This is a good way to extract pieces
of your designs which you need often. We will cover this in the Help>Tutorials and Guides>Custom Components tutorial.
The Online tab holds a large number of community contributed components like headers, footers, pricing tables and more, which you can search and install.
6. Opening and Saving
The documents that you create in Bootstrap Studio are called Designs. You can open them and save them as files with the .bsdesign extension.
Double clicking one of these files in your file manager will open them in Bootstrap Studio. You can duplicate designs and work on multiple versions at once.
You're ready to rock and roll!
You now know enough to create your first webpage! There are quite a few powerful features that we haven't mentioned. You can learn about them by checking the tutorials in the Help menu or by visiting the Forum.