DashboardKit Documentation
DashboardKit - Documentation

Documentation of DashboardKit Bootstrap Admin Template.

Version :
v1.0
Last Update :
21-12-2020
Author :
DashboardKit
Support :
dashboardkit[at]gmail[dot]com
Structure

Following is default directory structure along with page structure. That helps you understanding the entire DashboardKit template structure.


    src/
    ├── assets/
    │   ├── fonts/
    │   ├── images/
    │   ├── js/
    │   ├── json/
    │   ├── scss/
    │   ├── html/
    ├── .babelrc
    ├── gulpfile.js
    ├── package.json
	├── README.MD


                                                

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

    <head>
        <title>DashboardKit - Most Complete Bootstrap Admin Template</title>
        <!-- HTML5 Shim and Respond.js IE11 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 11]>
        	<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        	<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        	<![endif]-->
        <!-- Meta -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="description" content="" />
        <meta name="keywords" content="">
        <meta name="author" content="DashboardKit" />

        <!-- Favicon icon -->
        <link rel="icon" href="assets/images/favicon.png" type="image/x-icon">

        <!-- font css -->
        <link rel="stylesheet" href="assets/fonts/feather.css">
        <link rel="stylesheet" href="assets/fonts/fontawesome.css">

        <!-- vendor css -->
        <link rel="stylesheet" href="assets/css/style.css">

    </head>

    <body>
        <!-- [ Pre-loader ] start -->
        <div class="loader-bg">
        </div>
        <!-- [ Pre-loader ] End -->

        <!-- [ Mobile header ] start -->
        <div class="pc-mob-header pc-header">
        </div>
        <!-- [ Mobile header ] End -->

        <!-- [ navigation menu ] start -->
        <nav class="pc-sidebar ">
        </nav>
        <!-- [ navigation menu ] end -->

        <!-- [ Header ] start -->
        <header class="pc-header ">
        </header>
        <!-- [ Header ] end -->

        <!-- [ Main Content ] start -->
        <div class="pc-container">
            <div class="pcoded-content">
                <!-- [ breadcrumb ] start -->
                <div class="page-header">
                </div>
                <!-- [ breadcrumb ] end -->
                <!-- [ Main Content ] start -->
                <div class="row">
                    <!-- [ sample-page ] start -->
                    <!-- [ sample-page ] end -->
                </div>
                <!-- [ Main Content ] end -->
            </div>
        </div>
        <!-- [ Main Content ] end -->

        <!-- Warning Section start -->
        <!--[if lt IE 11]>
            <div class="ie-warning">
            </div>
        <![endif]-->
        <!-- Warning Section Ends -->

        <!-- Required Js -->
        <script src="assets/js/vendor-all.min.js"></script>
        <script src="assets/js/plugins/bootstrap.min.js"></script>
        <script src="assets/js/plugins/feather.min.js"></script>
        <script src="assets/js/pcoded.min.js"></script>
    </body>

    </html>
Layouts

This Section explains everything about Page Layouts with its extra available options. Copy code snippet for each options carefully.

This snippet contains HTML Markup to create vertical layout.


    <!-- [ navigation menu ] start -->
	<nav class="pc-sidebar ">
		<div class="navbar-wrapper">
			<div class="m-header">
				<a href="index.html" class="b-brand">
					<!-- ========   change your logo hear   ============ -->
				</a>
			</div>
			<div class="navbar-content">
				<ul class="pc-navbar">
					<li class="pc-item pc-caption">
						<label>Other</label>
						<span>Extra more things</span>
					</li>
					<li class="pc-item pc-hasmenu">
						<a href="#!" class="pc-link"><span class="pc-micon"><i data-feather="menu"></i></span><span class="pc-mtext">Menu levels</span><span class="pc-arrow"><i data-feather="chevron-right"></i></span></a>
						<ul class="pc-submenu">
							<li class="pc-item"><a class="pc-link" href="#!">Menu Level 2.1</a></li>
							<li class="pc-item pc-hasmenu">
								<a href="#!" class="pc-link">Menu level 2.2<span class="pc-arrow"><i data-feather="chevron-right"></i></span></a>
								<ul class="pc-submenu">
									<li class="pc-item"><a class="pc-link" href="#!">Menu level 3.1</a></li>
									<li class="pc-item"><a class="pc-link" href="#!">Menu level 3.2</a></li>
								</ul>
							</li>
							<li class="pc-item pc-hasmenu">
							<li class="pc-item pc-hasmenu">
								<a href="#!" class="pc-link">Menu level 2.3<span class="pc-arrow"><i data-feather="chevron-right"></i></span></a>
								<ul class="pc-submenu">
									<li class="pc-item"><a class="pc-link" href="#!">Menu level 3.1</a></li>
									<li class="pc-item"><a class="pc-link" href="#!">Menu level 3.2</a></li>
								</ul>
							</li>
						</ul>
					</li>
					<li class="pc-item"><a href="sample-page.html" class="pc-link "><span class="pc-micon"><i data-feather="sidebar"></i></span><span class="pc-mtext">Sample page</span></a></li>
				</ul>
			</div>
		</div>
	</nav>
	<!-- [ navigation menu ] end -->

add .minimenu in <body> tag to to create Collapse layout.


    <body class="minimenu">
    </body>

add .pc-horizontal in <body> tag to to create Horizontal layout.

add .bg-dark in <header> tag.

replace <nav> wich given balow.

add hole content of page in .container


    <body class="pc-horizontal">
        <div class="container">
            <!-- [ Header ] start -->
            <header class="pc-header bg-dark">
                <div class="container">
                    <div class="header-wrapper">
                        <!-- header content -->
                    </div>
                </div>
            </header>
            <!-- [ Header ] end -->
            <!-- [ navigation menu ] start -->
            <nav class="topbar">
                <div class="container">
                    <div class="navbar-wrapper">
                        <ul class="pc-navbar">
                            <li class="pc-item pc-hasmenu dropdown">
                                <a href="#!" class="pc-link dropdown-toggle" data-display="static" data-toggle="dropdown"><span class="pc-micon"><i data-feather="menu"></i></span><span class="pc-mtext">Menu levels</span><span class="pc-arrow"><i data-feather="chevron-right"></i></span></a>
                                <ul class="pc-submenu dropdown-menu">
                                    <li class="pc-item"><a class="pc-link" href="#!">Menu Level 2.1</a></li>
                                    <li class="pc-item pc-hasmenu dropdown">
                                        <a href="#!" class="pc-link dropdown-toggle" data-display="static" data-toggle="dropdown">Menu level 2.2<span class="pc-arrow"><i data-feather="chevron-right"></i></span></a>
                                        <ul class="pc-submenu dropdown-menu">
                                            <li class="pc-item"><a class="pc-link" href="#!">Menu level 3.1</a></li>
                                            <li class="pc-item"><a class="pc-link" href="#!">Menu level 3.2</a></li>
                                            <li class="pc-item"><a class="pc-link" href="#!">Menu level 3.3</a></li>
                                        </ul>
                                    </li>
                                    <li class="pc-item pc-hasmenu dropdown">
                                        <a href="#!" class="pc-link dropdown-toggle" data-display="static" data-toggle="dropdown">Menu level 2.3<span class="pc-arrow"><i data-feather="chevron-right"></i></span></a>
                                        <ul class="pc-submenu dropdown-menu">
                                            <li class="pc-item"><a class="pc-link" href="#!">Menu level 3.4</a></li>
                                            <li class="pc-item"><a class="pc-link" href="#!">Menu level 3.5</a></li>
                                            <li class="pc-item"><a class="pc-link" href="#!">Menu level 3.6</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li class="pc-item"><a href="#!" class="pc-link"><span class="pc-micon"><i data-feather="sidebar"></i></span><span class="pc-mtext">Sample page</span></a></li>
                        </ul>
                    </div>
                </div>
            </nav>
            <!-- [ navigation menu ] end -->
            <!-- [ Header ] end -->

            <!-- [ Main Content ] start -->
            <div class="pc-container">
                <div class="container">
                    <div class="pcoded-content">
                        <!-- [ breadcrumb ] start -->
                        <div class="page-header">
                        </div>
                        <!-- [ breadcrumb ] end -->
                        <!-- [ Main Content ] start -->
                        <div class="row">
                        </div>
                        <!-- [ Main Content ] end -->
                    </div>
                </div>
            </div>
            <!-- [ Main Content ] end -->
        </div>
    </body>

add .modern-layout in <body> tag to to create modern layout.

add .bg-dark in <header> tag.

remove logo section from navbar and add it in <header> wich given balow.


    <body class="modern-layout ">
        <!-- [ navigation menu ] start -->
        <nav class="pc-sidebar light-sidebar ">
        </nav>
        <!-- [ navigation menu ] end -->

        <!-- [ Header ] start -->
        <header class="pc-header bg-dark ">
            <div class="header-wrapper">
                <div class="m-header d-flex align-items-center mr-2">
                    <a href="index.html" class="b-brand">
                        <!-- ========   change your logo hear   ============ -->
                        <img src="assets/images/logo.png" alt="" class="logo logo-lg">
                    </a>
                </div>
                <!-- header content hear -->
            </div>
        </header>
        <!-- [ Header ] end -->

        <!-- [ Main Content ] start -->
        <div class="pc-container">
            <!-- [ breadcrumb ] start -->
            <div class="page-header">
            </div>
            <!-- [ breadcrumb ] end -->

            <!-- [ Main Content ] start -->
            <div class="pcoded-content">
            </div>
            <!-- [ Main Content ] end -->
        </div>
    </body>

add .advance-layout in <body> tag to to create advance layout.

add .bg-primary in <header> tag.

remove logo section from navbar and add it in <header> wich given balow.


    <body class="modern-layout ">
        <!-- [ navigation menu ] start -->
        <nav class="pc-sidebar light-sidebar ">
        </nav>
        <!-- [ navigation menu ] end -->

        <!-- [ Header ] start -->
        <header class="pc-header bg-primary ">
            <div class="header-wrapper">
                <div class="m-header d-flex align-items-center mr-2">
                    <a href="index.html" class="b-brand">
                        <!-- ========   change your logo hear   ============ -->
                        <img src="assets/images/logo.png" alt="" class="logo logo-lg">
                    </a>
                </div>
                <!-- header content hear -->
            </div>
        </header>
        <!-- [ Header ] end -->

        <!-- [ Main Content ] start -->
        <div class="pc-container">
            <!-- [ breadcrumb ] start -->
            <div class="page-header">
            </div>
            <!-- [ breadcrumb ] end -->

            <!-- [ Main Content ] start -->
            <div class="pcoded-content">
            </div>
            <!-- [ Main Content ] end -->
        </div>
    </body>

add .pc-horizontal and .layout-topbar in <body> tag to to create topbar layout.

remove logo section from navbar and add it in <header> wich given balow.


    <body class="pc-horizontal layout-topbar ">
        <!-- [ navigation menu ] start -->
        <!-- ===================== -->
        <!-- remove navbar content -->
        <!-- ===================== -->
        <!-- [ navigation menu ] end -->

        <!-- [ Header ] start -->
        <header class="pc-header ">
            <div class="container">
                <div class="header-wrapper">
                    <div class="m-header">
                        <a href="index.html" class="b-brand">
                            <!-- ========   change your logo hear   ============ -->
                            <img src="assets/images/logo-dark.png" alt="" class="logo logo-lg">
                        </a>
                    </div>
                    <!-- header content hear -->
                </div>
            </div>
        </header>
        <!-- [ Header ] end -->

        <!-- [ Main Content ] start -->
        <div class="pc-container">
            <div class="container">
                <div class="pcoded-content">
                    <!-- [ breadcrumb ] start -->
                    <div class="page-header">
                    </div>
                    <!-- [ breadcrumb ] end -->
                    <!-- [ Main Content ] start -->
                    <div class="row">
                    </div>
                    <!-- [ Main Content ] end -->
                </div>
            </div>
        </div>
    </body>

add .tab-layout in <body> tag to to create tab layout.

replace hole <nav> content which given below


    <body class="tab-layout ">
    	<!-- [ navigation menu ] start -->
    	<nav class="pc-sidebar light-sidebar">
    		<div class="tab-container">
    			<ul class="tab-sidemenu bg-primary nav flex-column" role="tablist" aria-orientation="vertical">
    				<li class="active"><a class="nav-link" data-cont="navigation" data-toggle="tooltip" title="navigation" data-placement="right"><i data-feather="monitor"></i></a></li>
    				<li class=""><a class="nav-link" data-cont="admin" data-toggle="tooltip" title="admin" data-placement="right"><i data-feather="gift"></i></a></li>
    				<li class=""><a class="nav-link" data-cont="ui" data-toggle="tooltip" title="ui" data-placement="right"><i data-feather="layers"></i></a></li>
    			</ul>
    			<div class="navbar-wrapper">
    				<div class="m-header">
    					<a href="index.html" class="b-brand">
    						<!-- ========   change your logo hear   ============ -->
    						<img src="assets/images/logo-dark.png" alt="" class="logo logo-lg">
    						<img src="assets/images/logo-sm.png" alt="" class="logo logo-sm">
    					</a>
    				</div>
    				<div class="navbar-content">
    					<div class="pc-tabcontent" data-value="navigation">
                            <ul class="pc-navbar">
    							<li class="pc-item pc-caption">
    								<label>Other</label>
    							</li>
    							<li class="pc-item pc-hasmenu">
    								<a href="#!" class="pc-link"><span class="pc-micon"><i data-feather="menu"></i></span><span class="pc-mtext">Menu levels</span><span class="pc-arrow"><i data-feather="chevron-right"></i></span></a>
    								<ul class="pc-submenu">
    									<li class="pc-item"><a class="pc-link" href="#!">Menu Level 2.1</a></li>
    									<li class="pc-item pc-hasmenu">
    										<a href="#!" class="pc-link">Menu level 2.2<span class="pc-arrow"><i data-feather="chevron-right"></i></span></a>
    										<ul class="pc-submenu">
    											<li class="pc-item"><a class="pc-link" href="#!">Menu level 3.1</a></li>
    											<li class="pc-item"><a class="pc-link" href="#!">Menu level 3.2</a></li>
    										</ul>
    									</li>
    									<li class="pc-item pc-hasmenu">
    									<li class="pc-item pc-hasmenu">
    										<a href="#!" class="pc-link">Menu level 2.3<span class="pc-arrow"><i data-feather="chevron-right"></i></span></a>
    										<ul class="pc-submenu">
    											<li class="pc-item"><a class="pc-link" href="#!">Menu level 3.1</a></li>
    											<li class="pc-item"><a class="pc-link" href="#!">Menu level 3.2</a></li>
    										</ul>
    									</li>
    								</ul>
    							</li>
    							<li class="pc-item disabled"><a href="#!" class="pc-link "><span class="pc-micon"><i data-feather="power"></i></span><span class="pc-mtext">Disabled menu</span></a></li>
    							<li class="pc-item"><a href="sample-page.html" class="pc-link "><span class="pc-micon"><i data-feather="sidebar"></i></span><span class="pc-mtext">Sample page</span></a></li>
    						</ul>
    					</div>
    					<div class="pc-tabcontent" data-value="admin">
                            <ul class="pc-navbar">
    							<li class="pc-item pc-caption">
    								<label>Other</label>
    							</li>
    							<li class="pc-item disabled"><a href="#!" class="pc-link "><span class="pc-micon"><i data-feather="power"></i></span><span class="pc-mtext">Disabled menu</span></a></li>
    							<li class="pc-item"><a href="sample-page.html" class="pc-link "><span class="pc-micon"><i data-feather="sidebar"></i></span><span class="pc-mtext">Sample page</span></a></li>
                                <li class="pc-item pc-hasmenu">
                                    <a href="#!" class="pc-link"><span class="pc-micon"><i data-feather="menu"></i></span><span class="pc-mtext">Menu levels</span><span class="pc-arrow"><i data-feather="chevron-right"></i></span></a>
                                    <ul class="pc-submenu">
                                        <li class="pc-item"><a class="pc-link" href="#!">Menu Level 2.1</a></li>
                                        <li class="pc-item pc-hasmenu">
                                            <a href="#!" class="pc-link">Menu level 2.2<span class="pc-arrow"><i data-feather="chevron-right"></i></span></a>
                                            <ul class="pc-submenu">
                                                <li class="pc-item"><a class="pc-link" href="#!">Menu level 3.1</a></li>
                                                <li class="pc-item"><a class="pc-link" href="#!">Menu level 3.2</a></li>
                                            </ul>
                                        </li>
                                        <li class="pc-item pc-hasmenu">
                                        <li class="pc-item pc-hasmenu">
                                            <a href="#!" class="pc-link">Menu level 2.3<span class="pc-arrow"><i data-feather="chevron-right"></i></span></a>
                                            <ul class="pc-submenu">
                                                <li class="pc-item"><a class="pc-link" href="#!">Menu level 3.1</a></li>
                                                <li class="pc-item"><a class="pc-link" href="#!">Menu level 3.2</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
    						</ul>
    					</div>
    					<div class="pc-tabcontent" data-value="ui">
                            <ul class="pc-navbar">
    							<li class="pc-item pc-caption">
    								<label>Other</label>
    							</li>
    							<li class="pc-item disabled"><a href="#!" class="pc-link "><span class="pc-micon"><i data-feather="power"></i></span><span class="pc-mtext">Disabled menu</span></a></li>
    							<li class="pc-item"><a href="sample-page.html" class="pc-link "><span class="pc-micon"><i data-feather="sidebar"></i></span><span class="pc-mtext">Sample page</span></a></li>
    						</ul>
    					</div>
    				</div>
    			</div>
    		</div>
    	</nav>
    	<!-- [ navigation menu ] end -->
    </body>
Menu brand background

    <div class="m-header">
    </div>

add bg-primary class in .m-header to set Blue color in Menu brand


    <div class="m-header bg-primary">
    </div>

add bg-danger class in .m-header to set Red color in Menu brand


    <div class="m-header bg-danger">
    </div>

add bg-warning class in .m-header to set Yellow color in Menu brand


    <div class="m-header bg-warning">
    </div>

add bg-info class in .m-header to set cyan color in Menu brand


    <div class="m-header bg-info">
    </div>

add bg-success class in .m-header to set success color in Menu brand


    <div class="m-header bg-success">
    </div>

add bg-dark class in .m-header to set dark color in Menu brand


    <div class="m-header bg-dark">
    </div>
Light Sidebar background

add light-sidebar class in .pc-sidebar to set Light color in Sidemenu


<nav class="pc-sidebar light-sidebar">
</nav>
Plugins
Plugins Name Plugins page use Link
Bootstrap default.html View Resource
Animation animation.html View Resource
Apexcharts chart-am.html View Resource
Calender full-calendar.html View Resource
Charts chart-chartjs.html View Resource
Ck-Editor editor-classic.html View Resource
Color-Picker form-picker.html View Resource
Clipboard layout-static.html View Resource
Ekko-lightbox ac_lightbox.html View Resource
Data-Table tbl_datatable.html View Resource
Date Picker ac-datepicker-component.html View Resource
Highchart chart-highchart.html View Resource
knob chart chart-knob.html View Resource
Peity chart chart-peity.html View Resource
File-Upload file-upload.html View Resource
Form-Mask form-masking.html View Resource
Form-validation form-validation.html View Resource
Forms Wizard form-wizard.html View Resource
JQuery Default.html View Resource
JQuery ui ac_gridstack.html View Resource
Syntax Highlighter ac_syntax_highlighter.html View Resource
Light-Box2 ac_lightbox.html View Resource
Moment notes.html View Resource
Map-Google map-google.html View Resource
Max-length form-elements-advance.html View Resource
Multi-select form-select.html View Resource
Notification ac_notification.html View Resource
Pnotify ac_pnotify.html View Resource
Range-Slider ac_rangeslider.html View Resource
Rating ac_rating.html View Resource
Select2 form-select.html View Resource
Scroll js All Page ( Menu ) View Resource
Sweet Alert ac_alert.html View Resource
Tags form-elements-advance.html View Resource
Extra Assets References
Used Font
Font Description Link
Google Font Inter View Resource
Font Icons
Font Icon Description Link
Feather Icon i.e. default font icon icon-feather.html View Resource
Font Awesome Icon icon-fontawsome.html View Resource
Flag Icon icon-flag.html View Resource
Material Icon icon-material.html View Resource
Simple Line Icon icon-simple-line.html View Resource
Themify Icon icon-themify.html View Resource
Images reference
Link
Icon Finder
Unsplash Images
Elements Photos (i.e. not included in package)
Change Log

    v1.0
	-----------
	21-12-2020
	-----------

	- Initial release
×