Skip to main content

Building a Simple Dashboard Layout

In this video you will learn how to create a simple Dashboard screen for your project.

1. Go to Bootstrap​

Create a project or you can also make use of an existing project to begin with. You can choose any dashboard from Bootstrap and copy its header from Inspect element. Right-click to copy the header.

DrapCode SignUp Form

2. Drop a Component​

Go to Components in DrapCode and drop a Custom HTML Code. Once it opens simply copy the dashboard UI from Bootstrap and paste it in the space and click Embed.

DrapCode SignUp Form

3. Copy the Body​

Go to Bootstrap and open Inspect element and copy the dahsboard body.Then go to Components in DrapCode and drop a Custom HTML Code. Once it opens copy the dashboard UI from Bootstrap and paste it here in this space and click Embed.

DrapCode SignUp Form

4. Preview the Dashboard​

Click Preview and you will be able to view your dashboard.

DrapCode SignUp Form

5. Create Dashboard Elements​

Divide your page into sections by going to Components and choosing Two-Section Layout to add elements to your dashboard for your web app. Then in its settings you can make its 100% fluid and Save the changes.

DrapCode SignUp Form

6. Create a Snippet​

You can create a sidebar using snippets. This will make it dynamic and it will be reflected on every page. For this click Add Snippet. Name your snippet and click Create.

DrapCode SignUp Form

7. Drop a Component​

You can either go to Components and drop a Sidebar component or go to Pre-Built Layouts and choose a sidebar todrag-and-drop. You can customize it as per your preference.

In this similar way, you can create more snippets for other elements such as header for your dashboard and reuse the elements across all the pages of your web app.

DrapCode SignUp Form