Let us see a quick introduction to Gridbox features and Creating your First Simple Bootstrap Project.
- Once you logged in – Under the Start with Blank Project Section – Choose Bootstrap 4
- Once you enter the project title, it will automatically redirect to the Editor Screen.
On the left corner of the editor click on this icon
Now you can find all essential components that you need to build a Web App / Website / Any HTML prototype.
With Element Properties you can customize headings, button colors, tables, etc… by applying bootstrap classes. Almost all the settings will add a specific class to the element (e.g.
<button class="btn btn-primary">Learn</button>). You can see the list of possible settings for any element. You can refer Bootstrap docs for specific parameters.
Gridbox allows you to build and design websites without a single line of code. At the same time, it lets you access the HTML source with ease: you can type, modify, copy/paste anything you want from the HTML editor and when you click on the “Save Changes” – you can see the canvas changing.
With Block Editor you can instantly edit the code of the particular block or component on the fly without the opening the full page code editor.
Style Manager allows you access to all CSS properties available for the selected element. You can simply enter these values in their appropriate fields and see the style applied to your elements on the canvas instantly.
Let us try to change the Jumbotron Background Color in two different ways:
- By applying
bg-primaryclass in the “classes” in the style manager (bg-primary is a default Bootstrap Background Color Class) – Fore more options refer Colors in Bootstrap Docs.
- Using Style Manger – Background Color Property
To change background color of an element, under the Decorations -> Background Color
This is only the quickstart guide. Please use the Docs to learn more about Gridbox Editor.