Template Structure

The general template structure is the same throughout the template. All template files have fixed structure consisting of header, top menu, main sidebar menu and page content.

The basic HTML structure is as shown below. You can add different components to suit your needs. You will find a blank page template in the pages folder. You can modify header, top menu and side bar menu of this page and start using it as the basic page template for your project.

<!doctype html>
<html lang ="en">
<head>
    <meta charset="utf-8"/>
    <link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png"/>
    <link rel="icon" type="image/png" href="../assets/img/favicon.png"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <title>Turbo - Bootstrap Material Admin Dashboard Template</title>
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
    <meta name="viewport" content="width=device-width" />
    <link href="css/vendor/bootstrap.min.css" rel="stylesheet" />
    <link href="css/vendor/LineIcons.min.css" rel="stylesheet"/>
    <link href="css/vendor/metisMenu.min.css" rel="stylesheet"/>
    <!--     Fonts and icons     -->
    <link href="css/vendor/mm-vertical.css" rel="stylesheet">
    <!--Style css-->
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>

<body>
    <div class="page-container">
      <div id="sidebar" class="sidebar-nav">
            <div class="header-logo">
                <a href="#">
                    <---img logo---->
                </a>
                 <a href="#">
                    <---img icon---->
                </a>
            </div>
            <div class="user-panel">
                <div class="media">
                    <  -- media panel content---  >
                 </div>
            </div>
            <ul class="vertical-nav-menu metismenu in">
                <li><a href="#"><menu item></a></li>
                <li><a href="#"><menu item></a></li>
                <li><a href="#"><menu item></a></li>
                <li><a href="#"><menu item></a></li>
                <li><a href="#"><menu item></a></li>
                <li><a href="#"><menu item></a></li>
            </ul>
        </div> <  --/.sidebar----  >
        <div class="main-content">
            <div class="top-header">
                 <-----top header------>
            </div>  
            <div class="page-title-area">
                <-----page-title---->
            </div>  
            <div class="body-content">
             <----body content--->
            </div> 
        </div>
        <footer">
            <div class="footer-area">
                <-----FOOTER CONTENT------>
            </div> 
        </footer>  
    </div>
</body>

<!--   Core JS Files   -->
<script src="js/vendor/popper.min.js" type="text/javascript"></script>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/vendor/bootstrap.min.js" type="text/javascript"></script>
<script src="js/vendor/metisMenu.js" type="text/javascript"></script>
<script src="js/vendor/simple-lightbox.min.js" type="text/javascript"></script>
<script src="js/custom.js" type="text/javascript"></script>
<script src="js/vendor/chart/Chart.js"></script>
<script src="js/vendor/chart/chart-init.js"></script>

</html>

Folder Structure

AMEX Aadmin dashboard folder structure

General HTML structure is the same throughout the template. Here is the Folder structure.

Amex
css
base
pages
vendor
apexchart
fonts

webfonts

images
advanced
card
gallery
language
profile
slider
widget

js
vendor
chart
Apexchart



scss
base
layout
module
pages

Sources and Credits

General HTML structure is the same throughout the template. Here is the uses plugin

Js Plugin