Template Customization

Template Customization

Modern Admin - Clean Bootstrap 4.3.1 Dashboard HTML Template provides different types of id, classes & attributes to customize the template.

This template can be customize directly from HTML code, please refer below section for more information.

HTML Snippet

Below HTML Snippet is the structutre of this template, you can use the defined id, class & attributes to customize the it.

              
                <html lang="en" data-textdirection="ltr" class="loaded">
                <head>
                ...
                </head>
                <!-- BODY -->
                <body data-open="click" data-menu="vertical-menu" data-col="2-columns" class="vertical-layout vertical-menu 2-columns  fixed-navbar  pace-done menu-expanded">

                    <!-- NAVBAR -->
                    <nav class="header-navbar navbar navbar-with-menu fixed-top navbar-semi-light bg-gradient-x-grey-blue">
                      ...
                    </nav>
                    <!--/ NAVBAR -->

                    <!-- NAVIGATION - MENU -->
                    <div data-scroll-to-active="true" class="main-menu menu-fixed menu-light menu-accordion menu-shadow">
                    ...
                    </div>
                    <!--/ NAVIGATION - MENU -->

                    <!-- CONTENT -->
                    <div class="app-content content container-fluid">
                    ...
                    </div>
                    <!--/ CONTENT -->

                    <footer class="footer footer-static footer-dark navbar-border">
                      ...
                    </footer>

                </body>
                <!--/ BODY -->
                </html>
              
             

Body Options

Template <body> tag has the following page customization options as shown in the table. Please Refer line no: 6 in the above HTML Snippet.

Section
Body
Attribute Values / Classes Description
data-open "hover", "click" Set data-open attribute value hover/click to open the dropdown on hover/click.
data-menu "vertical-menu", "horizontal-menu" This attribute use for the referance to know the menu type, Set data-menu attribute value "vertical-menu" for vertical menu type and "horizontal-menu" for horizontal menu type.
data-col "1-column", "2-columns", "content-left-sidebar", "content-right-sidebar", "content-detached-left-sidebar", "content-detached-right-sidebar" This attribute use for the referance to know the page columns, Set data-menu attribute value based on your column structure requirement, for demo please check the template layout section.
class ".vertical-layout .vertical-menu", ".horizontal-layout .horizontal-menu" For verticl layout & menu you use ".vertical-layout .vertical-menu" classes & for horizontal layout & menu use ".horizontal-layout .horizontal-menu" classes.
class ".vertical-layout .vertical-menu .material-vertical-layout", ".horizontal-layout .horizontal-menu .material-horizontal-layout", ".horizontal-layout .horizontal-menu .material-horizontal-nav" For material-based vertical layout & menu you use ".vertical-layout .vertical-menu .material-vertical-layout" classes & for material-based horizontal layout & menu use ".horizontal-layout .horizontal-menu .material-horizontal-layout" classes & for material-based horizontal nav layout & menu use ".horizontal-layout .horizontal-menu .material-horizontal-layout .material-horizontal-nav" classes.
class ".boxed-layout" For boxed layout use this class along with ".container" class.
class ".fixed-navbar" This is optional class and you need to include only if your layout navbar is fixed.
class ".menu-collapsed" For default collapsed menu, replace mentioned class with "menu-expanded" class.