Please wait...

1. Introduction

Eagle is the excellent responsive and multipurpose Admin Theme powered with Bootstrap 3.x Framework and Google Material Design. Eagle can be used for any type of web applications dashboard: custom admin panels, admin dashboards, CMS, CRM, SAAS and websites: CMSs, SAAS, CRM, HRMS, Support & Social portal, e-commerce, personal business, corporate. Eagle has a minimal, sleek, clean and intuitive design which makes your next project look awesome and yet user friendly.

Eagle is minimal, sleek, clean and lightweight which makes your next project look awesome and yet user friendly. Eagle has a huge collection of UI Elements, jQuery plugins and works seamlessly on all major web browsers, tablets and phones. User friendly, intuitive, and fun to use. We are keen to release continuous long term updates and lots of new features will be coming soon in the future releases. Once you purchased Eagle Admin, you will be entitled to free download of all future updates for the same license, Have look Eagle today!.

2. File Structure

    Eagle | Material Design Admin Template
    ├─── assets
    │   └─── css files
    │   └─── images files
    │   └─── js files
    ├─── Pages
    │   └─── HTML files
    ├─── plugins
    │   ├─── Jquery plugins
    └─── Index File

Installation Guide

Just simple steps to follow:

keyboard_arrow_right After unzip Theme Files, you will found Admin Theme & Documentation Folder.

keyboard_arrow_right You can view this Theme in any web browser from your desktop computer. Open eagle/index.html in your web browser. Because the files are written in HTML, you do not need an Internet connection in order to display or edit the Theme.

keyboard_arrow_right Start your FTP client (I persoanlly use Filezila which is free) and login. Login to your server. You will need your server name (often times this will be your domain name), username, and password that you setup with the hosting company.

keyboard_arrow_right Locate the domain folder you wish to upload your Theme files to on your server. You are going to want to click and drag every file that you have labeled .html, .css, .php, .js into your FTP client.

keyboard_arrow_rightAs eagle designed for backend panel of your web platform, You need to implement yourself backend code in JAVA, PHP, .NET ,Ruby or any other as per your standers to view dynamic data and layout.

keyboard_arrow_right Once the files are done uploading, rename the file you want to be your home page as 'index.html'.


  • keyboard_arrow_right Bootstrap 3.x Framework

  • keyboard_arrow_right Material Design

  • keyboard_arrow_right Fully Responsive Design

  • keyboard_arrow_right Html5 Markup & CSS3

  • keyboard_arrow_right Fully customizable

  • keyboard_arrow_right Flat UI with clean style

  • keyboard_arrow_right 14 Material color Skins

  • keyboard_arrow_right Light & Dark Sidebar

  • keyboard_arrow_right Many type of layout option

  • keyboard_arrow_right Dashboard with profile widget, stats, charts and many more...

  • keyboard_arrow_right Custom widgets

  • keyboard_arrow_right Custom UI Tabs and Accordions

  • keyboard_arrow_right 1000+ UI Components

  • keyboard_arrow_right Charts and Graphs (Morris, ChartJs, Sparkline, Flot, C3, Chartist, Nvd3, )

  • keyboard_arrow_right Circle Dials (jQuery Knob)

  • keyboard_arrow_right Advance Form Validation (jQuery Form Validation Plug-in)

  • keyboard_arrow_right Tables (jQuery Data , Responsive , Js-grid , Foo-tables, Basic , Editable)

  • keyboard_arrow_right Widgets (Box, Blog, Social, Data, Weather, Chart)

  • keyboard_arrow_right Full Calendar (jQuery Full Calendar)

  • keyboard_arrow_right Custom Radio Buttons and Checkboxes

  • keyboard_arrow_right Lots Of Plugins

  • keyboard_arrow_right Lots Of Form Elements

  • keyboard_arrow_right 3000+ Fonts Icons

  • keyboard_arrow_right Roboto Sans Google fonts

  • keyboard_arrow_right Form Wizards

  • keyboard_arrow_right Form Wizards

  • keyboard_arrow_right Multi File Upload

  • keyboard_arrow_right E-commerce Widgets & pages

  • keyboard_arrow_right Premium Chat Html version

  • keyboard_arrow_right Login pages

  • keyboard_arrow_right 3 Types Of Timeline

  • keyboard_arrow_right Invoice page

  • keyboard_arrow_right 3 Level Dropdown

  • keyboard_arrow_right 404 & 500 Error pages

  • keyboard_arrow_right Well structured code

  • keyboard_arrow_right Detailed Documentation

HTML Beginning

keyboard_arrow_right After unzip the Theme files you can see eagle/pages/extra-page/blank.html folder. That file contain the following common structure.

keyboard_arrow_right By using blank.html you are free to modify depending on the customization you require. If you would like to add/edit UI elements, Widget, Data Tables or charts.

 <!DOCTYPE html>
 <html lang="en">

 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
 <title>Eagle | The Only Large Material Admin Template</title>
 <!-- Favicon -->
 <link rel="icon" href="favicon.png" type="image/x-icon">

 <link href="../plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">
 <link href="../plugins/bootstrap/css/bootstrap.css" rel="stylesheet">
 <link href="../plugins/node-waves/waves.css" rel="stylesheet">
 <link href="../plugins/animate-css/animate.css" rel="stylesheet">
 <link href="../plugins/spinkit/spinkit.css" rel="stylesheet">

 <link href="../assets/css/style.css" rel="stylesheet">
 <link href="../assets/css/layout.css" rel="stylesheet">
 <link href="../assets/css/themes/main_theme.css" rel="stylesheet">

 <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
 <!--[if lt IE 9]>
 <script src=""></script>
 <script src=""></script>


This code is for the loader when page load

<div class="page-loader-wrapper">
<div class="loader">
        <div class="sk-wave">
            <div class="sk-rect sk-rect1 bg-cyan"></div>
            <div class="sk-rect sk-rect2 bg-cyan"></div>
            <div class="sk-rect sk-rect3 bg-cyan"></div>
            <div class="sk-rect sk-rect4 bg-cyan"></div>
            <div class="sk-rect sk-rect5 bg-cyan"></div>
        <p>Please wait...</p>


Left Side Bar & Right Sidebar

This code is for Left Side Bar & Right Sidebar

<!-- sidebar-->
<aside class="aside">
    <!-- START Sidebar (left)-->
    <div class="aside-inner">
        <nav data-sidebar-anyclick-close="" class="sidebar">
            <!-- START sidebar nav-->
            <ul class="nav menu">
                    <a href="documentation/index.html" title="Documentation">
                        <em class="material-icons">whatshot</em>
            <!-- END sidebar nav-->
    <!-- #END# Sidebar (left)-->
<!-- offsidebar-->
<aside class="offsidebar hide">
    <!-- START Off Sidebar (right)-->
        <div role="tabpanel">
            <!-- Nav tabs-->
            <ul role="tablist" class="nav nav-tabs nav-tabs-inline nav-justified">
                <li role="presentation" class="active">
                    <a href="#app-skins" aria-controls="app-settings" role="tab" data-toggle="tab">
                        <em class="material-icons">color_lens</em>
                <li role="presentation">
                    <a href="#app-settings" aria-controls="app-chat" role="tab" data-toggle="tab">
                        <em class="material-icons">settings</em>
            <!-- Tab panes-->
            <div class="tab-content">
                <div id="app-skins" role="tabpanel" class="tab-pane fade in active">
                    <ul class="skin_selector" id="sidebar_clr_selector">
                        <h2>Sidebar Skins</h2>
                        <li data-theme="light" class="active">
                            <div class="grey"></div>
                        <li data-theme="dark">
                            <div class="black"></div>
                    <ul class="skin_selector" id="skin_selector">
                        <h2>Navbar Skins</h2>
                        <li data-theme="red">
                            <div class="red"></div>
                        <li data-theme="pink">
                            <div class="pink"></div>
                        <li data-theme="purple">
                            <div class="purple"></div>
                <div id="app-settings" role="tabpanel" class="tab-pane fade">
                    <div class="demo-settings ">
                        <ul class="setting-list">
                            <h2>Layout Settings</h2>
                                <div class="switch">
                                    <label><input id="chk-fixed" type="checkbox"  data-toggle-state="layout-fixed"><span class="lever switch-col-grey"></span></label>
                                <div class="switch">
                                    <label><input id="chk-boxed" type="checkbox" data-toggle-state="layout-boxed"><span class="lever switch-col-grey"></span></label>
                                <div class="switch">
                                    <label><input id="chk-collapsed" type="checkbox" data-toggle-state="aside-collapsed"><span class="lever switch-col-grey"></span></label>
                                <span>Collapsed Text</span>
                                <div class="switch">
                                    <label><input id="chk-collapsed-text" type="checkbox" data-toggle-state="aside-collapsed-text"><span class="lever switch-col-grey"></span></label>
    <!-- #END# Off Sidebar (right)-->


Main Content & Footer

This code is for page content & footer

<!-- Main section-->
    <!-- Page content-->
    <div class="content-wrapper">
        <div class="container-fluid">
            <div class="page-header">
                <h2>Blank Page</h2>
                <ol class="breadcrumb">
                    <li><a href="../../index.html">Home</a></li>
                    <li class="active">Pages</li>

<!-- FOOTER-->
    <span>© 2017 - Eagle Template By <b class="col-blue">Bylancer</b></span>



keyboard_arrow_right After unzip the Theme files you can see eagle/assets/css folder. That css folder contains color,lib,pre-load.css & style.css

keyboard_arrow_right I am using one main CSS file name is style.css in this theme which you are free to modify depending on the customization you require. If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

    @import url(materialize.css);
    @import url(,400,500,700&subset=cyrillic-ext,latin-ext);
    @import url(;

    body {
    background-color: #f2f2f2;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    font-family: 'Roboto', sans-serif;

    .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    text-shadow: rgba(0, 0, 0, .15) 0 0 1px;

    .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    line-height: 1.2;
    color: #424242;

    h6, .h6 {
    margin-bottom: 5px;
    font-size: 13px;
    font-weight: 600;



This is code structure for card.

    <div class="card">
        <div class="card-header">
                Static Control
            <small>Card Description Here..</small>
            <ul class="card-controls m-r-5">
                <li><a href="javascript:void(0);" class="card-fullscreen"><i class="material-icons">fullscreen</i></a></li>
                <li><a href="javascript:void(0);" class="card-collapse"><i class="material-icons">expand_more</i></a></li>
                <li><a href="javascript:void(0);" class="card-refresh"><i class="material-icons">loop</i></a></li>
                <li><a href="javascript:void(0);" class="card-remove"><i class="material-icons">close</i></a></li>
        <div class="body">
            etiam lacinia netus dictum magnis per facilisi sociosqu. Volutpat. Ridiculus nostra.


Helper Classes

Please checkout helper classes by click on below button

Check Out Here

Layout Option

There are many layout option you can easily choose your favourite option

Fixed layout Just add class .layout-fixed to body tag
Boxed layout Just add class .layout-boxed to body tag
Collapsed Sidebar Just add class .aside-collapsed to body tag
Collapsed Text Just add class .aside-collapsed-text to body tag
Float Just add class .aside-float to body tag


Js Use of it
jquery.js, bootstrap.js, waves.js, jquery.slimscroll.js These are main file for theme. Slimscroll for smooth scroll and wave is for wave-effect of button or other elements
screenfull.js This is used for full screen
layout.js This is main file for layout option
demo.js This is main file for skin and side bar colors


Once again, thank you so much for purchasing this theme. I'd be glad to help you if you have any questions relating to this theme. I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the support forums and asking your question in the Item Discussion section.