How to Create an Admin Panel with a Bootstrap Template

You have decided to create an admin panel for the backend of your website. And you want to create one with minimum time and less effort. The quickest way to create one is to go online and get yourself a nice, good-looking admin template that is just the right one for your admin template.

So first things first. Admin templates are pre-built web pages built using HTML, CSS, and JavaScript for facilitating developers getting the application up really quickly. They don’t have to start from scratch. All they have to do is customize it and make the changes that they need. Then they can spend the rest of the time the integrating the admin panel with the database.

Step 1 – Getting an Admin Template You Love

Before buying admin templates know what your requirements are and have a clear idea about what you want in terms of design and the functionalities. Otherwise, it is very easy to get overwhelmed by the number of templates that you will find.

Go through your design requirements. Know what all functionalities you would need in your template and what plugins are better suited for serving those functionalities. And then go search for one. It wil help you narrow down choices and make an informed decision.

Read More: Things to Consider Before Selecting/Using an Admin Template

I will be using StarAdmin free bootstrap admin template as an example. The template has a nice and clean design and the quality of the code is great. I find it just right to create a simple admin panel. And it is free. Also, the template is updated to the latest version of Bootstrap, Bootstrap 4 beta.

Step 2 – The Design of the Admin Panel

So how can you create a dashboard with an admin template? How to get started? To understand that let us create a dashboard of our own using an admin template.

First, let’s go through our requirement. The design that I need of the dashboard is as given in the picture.

 Example of admin template using star admin

and this the screen below the fold.

The dashboard can be divided into three parts. The navbar on the top, the sidebar on the left and the main content area. The sidebar and the navbar are common to all the pages. The content area is where all the necessary widgets go.

The top navbar of the dashboard has the navbar brand “Star” on the left end. Let us keep it that way. Next, in the navbar, there is a hamburger icon on the left. On the right end, there is a button with refresh icon, a bell icon with the number of notifications indicated and an envelope icon with an indication of the number of messages. At the end, there is a profile picture of the user.

In the left sidebar, there is only one menu item, the dashboard, for now.

In the content area, In the first card, we have a bar graph and a donut chart. The bar graph displays the types of traffic that flow into the website and the donut chart displays the device sources of the traffic.

Just below that, we have three cards that display the number of visitors, sales, and the revenue followed by another card. The last card displays the source country that the traffic is coming from on a map and more details like the conversion rate and bounce rate from each country in a table. And finally, there is the footer.

Step 3 – Let’s Get Coding

Now that we have established our requirements and decided upon the template that we are going to use, let’s get to the part where we lay our foundation and start coding step-by-step.

Installation

Before starting coding make sure to install Git, Node.js, and npm. Gulp is used as the build tool. Installing Gulp requires that you have Node installed on your computer.

This creates the foundation for the development of the dashboard.

Keep Everything Organized

Next, to keep everything organized, create a folder with the name “my-dashboard”. Let’s keep all our files in this folder.

Download the Template

Open the command prompt and change the directory path to the project folder and download the template. enter the command git clone https://github.com/BootstrapDash/StarAdmin-Free-Bootstrap-Admin-Template.git.  This will download the template to your folder. Or you can download the template files as a zip folder.

Install Dependencies

After downloading the template enter the command npm install for installing all the dependencies in package.json file in the folder node_modules. After all these steps have been done, we are all set to create our dashboard.

Gulp Serve

Next, go to the command prompt, and enter the command gulp serve in the command prompt. This will open up the index.html file of the template in the default browser.

Edit the Code

Now let us start creating our dashboard. There is a blank page in the template where we can begin from. Another way is to edit the existing index.html page and edit the page. To do this, open the page in a code editor.

The navbar

In the first part, that is the navbar, the search box is not needed. So remove the code for that. At the right end, there are two extra icons that are needed. As there is Font Awesome already included in the template, all I need to do now is find the code for the right icon.

There is a refresh icon, a bell icon, and an envelope icon. When you hit ‘save’ is gulp task is running, the browser will refresh and the changes will be automatically displayed on the browser.

After adding the code, the top navbar part is done.

The sidebar

The second part is the left sidebar. The sidebar has only one list item, that is the dashboard. So we need to remove or comment the rest of the list items. After doing that there are only the profile picture and the dashboard menu item in the sidebar.

The content area

The third part is the content area. In the index.html page, the first element that you see on the top of the page is the four small cards in the same row. In our design, we have a bar chart and a donut chart.

There is no bar chart on the index page, so I head to the charts page where I have all the charts I need. I get the code for the bar chart. The bar chart and the donut chart show related data. So, both the data are placed in the same card within the same row. The below code shows how it is done.

The data displayed originally on the charts are not the data that are required in the design. So go to the chart.js file and change the data to be displayed. Later this data can be changed dynamically when connected with the database to show the real-time changes in data.

After the two charts, there are three small cards that display the number of visitors, sales, and revenue. These cards are taken from the index page of the template. But on the index page, there are four cards in the row and we have only three per row. So, we need to make some necessary changes.

Also, there are no icons on the cards, so we head straight to the widgets page where there are similar cards with icons. Copy the code for the icons and paste them where it is needed.

And finally what we need is the table and the chart. We already have a similar component on the widgets page. So we take that code and copy paste it into the dashboard and make the necessary changes in the data.

So, that creates our dashboard. Now we can start adding and changing styles according to the specific needs. Customize the template to make it your own and have fun with it.

Summary

Let’s go through all of the above steps in short

  1. Decide on the requirements.
  2. Find the right template and download.
  3. Install tools like npm, gulp etc. to automate and speed up the development.
  4. Install all the dependencies of the template.
  5. Edit the code to get the admin panel of your design.

Bootstrap admin templates really help you jump-start your project. You don’t have to build everything from the ground up. All you need to do is find the right template and then you are good to go. It is better to make sure that template you have is the right one otherwise, you will end up wasting all the time that you intended to save.

BootstrapDash believes in providing the best, efficient and quality free and premium bootstrap admin panel template to get your web application up and running easily and quickly. Visit our website to get to know more about our products. Want to create a stunning website of your own? Start learning