Features

Create your Own Website Provider
Earn money from google adsens
Easy Setup
Build full Bootstrap 4 components customizations
Generate and download the project as HTML
Share Projects between Users

What is this ?

Booststrap 4 Generator helps you make your frontend coding easier without needing to be an expert in JavaScript, HTML5 or CSS3, Insert and customize components then preview , generate and download the complete final code as HTML/Bootstrap 5. Also You can provide this script for your users with sharing the project with each other.

How to install the product ?

Extract zip file and upload the contents inside “application” directory to your website directory
Open the application on your browser for example: www.yourwebsite.com/
You need to make sure the server meets these requirements:

PHP ≥ 7.2
OpenSSL PHP Extension
PDO PHP Extension
Mbstring PHP Extension

Make surre that direcory /files and directory /system/storage/app and directory /system/storage/log have permission 777
Fill form fields with your Website name and access information like the following
Click install to continue
Congratulations your application has been installed successfully
Now you can login with your email and password

How it is working ?

After you can login as a User. You can do the following:

1- Create Projects
2- Create Pages, templates and modals for each project
3- Add/customize/delete componnent on for each page / template / modals
4- Share Project with other users
5- Preview / download the complete project as HTML pages
6- Update User Profile

If login as an Administrator User. You can do more as the following:

1- See all projects for each user with full control
2- Add / Enable / Disable / Update / Delete Users

What is the project ?

The Project is the main content of pages for example a website or application. You can Find the list of your project or shared project with you on the dashboard of the application.

- You can create new project by Clicking the 'Create a project' button on the dashboard and type the project name and save it.

- Once the data has been saved to database it's redirect to the Project Editor mode to get start adding pages and componnents.

- Also You can delete the whole project from dashboard by clicking the trash icon on the right of the project row.

- You can Enter the project Editor mode by clicking the eye icon on the right of the project row.

What is the Project Editor mode ?

The Project Editor mode is the Full Project controller of pages, rows, components, Sass, css and generator.

1- Project Pages and Templates

The main project Contents and contents of 3 types:

1- Pages: Main Pages of project
2- Templates: Contents can include in pages
3- Modal: Bootstrap Modal template

What The icons do ?

1- Eye icon to preview the page (Pages only)
2- Pencile icon: To edit page name
3- Hand icon: to select current page or template to edit
4- Trash icon: to delete the page

2- Page Rows

The main rows on current page/template that will contain the components later, contents 2 tag names:

Div: to make a Division tag. Click on pencile icon to edit div details
Form: To make a form tag. Click on pencile icon to edit form details

Also each row has 8 types:

Blank: is a pure element
Row: is a row element with class row for bootstrap
Container: is bootstrap container which sets a max-width at each responsive breakpoint
Container Fluid: is bootstrap container-fluid which is width: 100% at all breakpoints
Small Container: is bootstrap container-sm
Medium Container: is bootstrap container-md
Large Container: is bootstrap container-lg
Extral Large Container: is bootstrap container-xl

3- Page Componnents

Components is the elements and contents of the page

- How to Create a componnent

Search and Choose the componnent from the componnents list on the left tools by click insert:
Click On the componnent that has been added to the page:
Customize the componnent by the propreties list on the right

4- Project Settings

Edit Current project name and sass file

- Project Sass file

By this tool you can add Sass or css for the project as you want also you can update project name. Don't forget to click save project button

5- Share Project to Other user

Click the share icon on the left tools, you will find a list of users that has access to the current project and you can add or revoke the share for each user.