How to create a Responsive Admin Template using Light Bootstrap Dashboard

We are going to use Light Bootstrap Dashboard, a free Bootstrap Admin Template

Hello happy coders!

In this mega tutorial, you’ll teach you how to create a responsive admin template using Light Bootstrap Dashboard(LBD) on Bootstrap 4.

All the source file are available on Github and our website so you can start using them immediately and for free.

The first thing you should do is to download LBD.

We will use the template file as an example for WordPress admin. At the final of this tutorial you will get a replica for:

Dashboard page
Posts page
Appearance page

Oh. and everything will be responsive, of course 😁

That’s being said..let’s begin.

Add Navigation Icons to Dashboard

At this moment our template page looks like this.

Step 1. Change the page name

Head to the text editor and open template.html. By the way, I’m using Atom as a text editor.

I’ve changed the name of the page to Creative Tim’s Blog

<div class=”logo”>
      <a href=”https://www.creative-tim.com" class=”simple-text”>
         Creative Tim’s Blog
      </a>
</div>

Step 2. Let’s add refresh icon

Let’s go to Font Awesome and get refresh icon 

For the refresh icon, I’ll just replace the dashboard icon.

<ul class=”nav navbar-nav navbar-left”>
 <li>
 <a href=”#” class=”dropdown-toggle” data-toggle=”dropdown”>
 <i class=”fa fa-refresh”></i> 10
 </a>
 </li>

Step 3. Delete dashboard text

WordPress has the page located inside of the content. In our dashboard, we have the location inside the navigation bar.

I will take it out of our navigation, and we will add it later inside the content so it will look like WP.

So at the moment, I’ll just delete a class="navbar-brand" href="#">Dashboard</a> within the button.

Step 4. Add the comments icon

I’ll use the following icon 

To add additional icons, duplicate the refresh icon area within <li>

<li>
 <a href=”#” class=”dropdown-toggle” data-toggle=”dropdown”>
 <i class=”fa fa-refresh”></i> 10
 </a>
 </li>

Step 5. Add more icons ❤

The icon I’ll use: 

Step 6. Add SEO Button

Here we use only text.

<li>
 <a href=”#” class=”dropdown-toggle” data-toggle=”dropdown”>
 SEO
 </a>
 </li>

The left navbar should look like this:

<div class=”collapse navbar-collapse”>
 <ul class=”nav navbar-nav navbar-left”>
 <li>
 <a href=”#” class=”dropdown-toggle” data-toggle=”dropdown”>
 <i class=”fa fa-refresh”></i> 10
 </a>
 </li>
 <li>
 <a href=”#” class=”dropdown-toggle” data-toggle=”dropdown”>
 <i class=”fa fa-comments-o”></i> 0
 </a>
 </li>
 <li>
 <a href=”#” class=”dropdown-toggle” data-toggle=”dropdown”>
 <i class=”fa fa-plus”></i> New Post
 </a>
 </li>
 <li>
 <a href=”#” class=”dropdown-toggle” data-toggle=”dropdown”>
 SEO
 </a>
 </li>
 </ul>

<ul class=”nav navbar-nav navbar-right”>
 <li class=”dropdown”>
 <a href=”#” class=”dropdown-toggle” data-toggle=”dropdown”>
 Howdy, Nice Goddady
 <b class=”caret”></b>
 </a>
 <ul class=”dropdown-menu”>
 <li><a href=”#”>Action</a></li>
 <li><a href=”#”>Another action</a></li>
 <li><a href=”#”>Something</a></li>
 <li><a href=”#”>Another action</a></li>
 <li><a href=”#”>Something</a></li>
 <li class=”divider”></li>
 <li><a href=”#”>Separated link</a></li>
 </ul>
 </li>