Nextro Documentation
Nextro - Documentation

Helper Documentation of Nextro Bootstrap Admin Template.

Version :
v1.0
Last Update :
13-07-2020
Author :
Phoenixcoded
Support :
support@phoenixcoded.net
Structure

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


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


                                                

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

    <head>
        <title>Nextro - 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="Phoenixcoded" />

        <!-- 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)
FAQ
What is Nextro?

Nextro is premium dashboard template comes with tons of layout options, widgets, ready to use pages which completely suitable for any complex project.

Why choose Nextro?

Nextro is made by Phoenixcoded's experience coders and designers. Well tested bug free code, easy to use flexible structure makes Nextro a really differ to other templates. We almost cover every possible plugins, components which helps you start immediately on your project.

What about Item Support?

6 month item support for any bugs, design issue in current version of template. We are not provides support for any custom work implementation.

What is Support Turnaround time?

When you comment or submit the ticket for support. Our team takes it seriously and respond it within a Half or Full day.

Browser Support?

Well tested on IE=>11, Edge, Chrome, Mozilla, Safari, Opera

Change Log

    v1.0
	-----------
	13-7-2020
	-----------

	- Initial release
	- PSD, XD, SKETCH, Starter/Full version folders included in download package.
×