Getting Started with Gridbox Bootstrap 4 Project

Getting Started with Gridbox Bootstrap 4 Project

Let us see a quick introduction to Gridbox features and Creating your First Simple Bootstrap Project.

Creating Your First Bootstrap Project

  1. Once you logged in – Under the Start with Blank Project Section – Choose Bootstrap 4
  2. Once you enter the project title, it will automatically redirect to the Editor Screen.
QuickStart Screen Gridbox

Dragging your first Bootstrap component

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.

Customizing a Bootstrap Button and Heading using Element Properties

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.

Using Element Properties

Using Code Editor to Modify the Elements

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.

Using Code Editor

Using Block Editor

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.

Using Block Editor

Changing Background Color of Element

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-primary class 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

Applying bg-primary and text-light class

Changing Background by applying Bootstrap Classes

Using Style Manger – Background Color Property

To change background color of an element, under the Decorations -> Background Color

Changing Background Color

This is only the quickstart guide. Please use the Docs to learn more about Gridbox Editor.

Ramakrishna Anand J

Full Stack Developer & CEO - Gridbox.io

Leave a Reply

Close Menu