Template Customization

Modern Admin - Clean Bootstrap 4 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.

If you have knowledge of our PUG template building system you can use PUG template & page config variables to customize it. Refer

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	".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.

Navbar Options

Template <nav> tag has the following navbar customization options as shown in the table. Please Refer line no: 9 in the above HTML Snippet.

Section

Navbar

Classes	Description
`.fixed-top`	To set navbar fixed at top you need to add `.fixed-top` class in navbar `<nav>` tag. For more information please check fixed-top.html.
`.navbar-fixed-bottom`	To set navbar fixed at bottom you need to add `.navbar-fixed-bottom` class in navbar `<nav>` tag.
`.navbar-static-top`	Create a full-width navbar that scrolls away with the page by adding `.navbar-static-top`. Unlike the `.navbar-fixed-*` classes, you do not need to change any padding on the `body`.
`.navbar-brand-center`	This class allow you to set navbar branding portion at center. Add `.navbar-brand-center` class in navbar `<nav>` tag. For more information please check navbar-brand-center.html. This is optional class.
`.navbar-light`	To set navbar light color you need to add `.navbar-light` class in navbar `<nav>` tag. For more information please check navbar-light.html
`.navbar-dark`	To set navbar dark color you need to add `.navbar-dark` class in navbar `<nav>` tag. For more information please check navbar-dark.html
`.navbar-semi-dark`	To set navbar semi dark color you need to add `.navbar-semi-dark` class in navbar `<nav>` tag. For more information please check navbar-semi-dark.html
`.navbar-border`	You can add navbar border bottom by adding `.navbar-border` class in navbar `<nav>` tag. This navbar class is optional.
`.navbar-shadow`	You can also apply navbar shadow bottom by adding `.navbar-shadow` class in navbar `<nav>` tag. This navbar class is optional.
`.disabled`	To disabled navbar menu item link, you need to add `.disabled` class in navigation `<li>` tag. This navigation class is optional. Fore more information please check vertical-nav-disabled-link.html

Navigation (Menu) Options

Note

Modern admin template provides vertical & horizontal navigation options. Below tables shows the both navigation customization options, but most of all are the same.

Vertical Navigation

Below table contain vertical navigation customization options. Please Refer line no: 15 in the above HTML Snippet.

Section

Navigation
vertical

Classes	Description
`.menu-fixed`	To create vertical fixed navigation, you need to add `.menu-fixed` class in navigation `<div>` tag. Fore more information please check vertical-fixed-navigation.html
`.menu-static`	To create vertical static navigation, you need to add `.menu-static` class in navigation `<div>` tag. Fore more information please check vertical-static-navigation.html
`.menu-light`	To create light vertical navigation, you need to add `.menu-light` class in navigation `<div>` tag. Fore more information please check vertical-light-navigation.html
`.menu-dark`	To create dark vertical navigation, you need to add `.menu-dark` class in navigation `<div>` tag. Fore more information please check vertical-dark-navigation.html
`.menu-accordion`	Default vertical navigation type is accordion navigation. To create vertical accordion navigation, you need to add `.menu-accordion` class in navigation `<div>` tag. Fore more information please check vertical-accordion-navigation.html
`.menu-collapsible`	To create vertical collapsible navigation, you need to add `.menu-collapsible` class in navigation `<div>` tag. Fore more information please check vertical-collapsible-navigation.html
`.menu-flipped`	Change navigation menu position to right with the help of flipped navigation menu options. You need to add `.menu-flipped` class in navigation `<div>` tag. Fore more information please check vertical-flipped-navigation.html
`.menu-native-scroll`	To create vertical navigation with native scroll, you need to add `.menu-native-scroll` class in navigation `<div>` tag. This navigation class is optional. Fore more information please check vertical-navigation-native-scroll.html
`.menu-icon-right`	To create vertical navigation right side icons, you need to add `.menu-icon-right` class in navigation `<div>` tag. This navigation class is optional. Fore more information please check vertical-navigation-right-side-icons.html
`.menu-bordered`	To create vertical bordered navigation, you need to add `.menu-bordered` class in navigation `<div>` tag. This navigation class is optional. Fore more information please check vertical-bordered-navigation.html
`.disabled`	To disabled vertical navigation menu link, you need to add `.disabled` class in navigation `<li>` tag. This navigation class is optional. Fore more information please check vertical-nav-disabled-link.html
`.menu-shadow`	You can also apply navigation shadow bottom by adding `.menu-shadow` class in navigation `<div>` tag. This navigation class is optional.

Horizontal Navigation

Below table contain horizontal navigation customization options. Please Refer line no: 15 in the above HTML Snippet.

Section

Navigation
horizontal

Classes	Description
`.navbar-fixed`	To create horizontal fixed navigation, you need to add `.navbar-fixed` class in navigation `<div>` tag. Fore more information please check horizontal-nav-fixed.html
`.navbar-flipped`	To create horizontal flipped navigation, you need to add `.navbar-flipped` class in navigation `<div>` tag. Fore more information please check horizontal-nav-flipped.html
`.navbar-light`	To create light horizontal navigation, you need to add `.navbar-light` class in navigation `<div>` tag. Fore more information please check horizontal-nav-light.html
`.navbar-dark`	To create dark horizontal navigation, you need to add `.navbar-dark` class in navigation `<div>` tag. Fore more information please check horizontal-nav-dark.html
`.navbar-without-dd-arrow`	To remove the horizontal navigation dropdown arrow, you need to add `.navbar-without-dd-arrow` class in navigation `<div>` tag. This navigation class is optional. Fore more information please check horizontal-nav-no-dropdown.html
`.navbar-icon-right`	To create horizontal navigation with right side icons, you need to add `.navbar-icon-right` class in navigation `<div>` tag. This navigation class is optional. Fore more information please check horizontal-nav-right-side-icons.html
`.navbar-border`	Add horizontal navigation border bottom by adding `.navbar-border` class in navbar `<nav>` tag. This navigation class is optional.
`.navbar-shadow`	Add horizontal navigation shadow by adding `.navbar-shadow` class in navbar `<nav>` tag. This navigation class is optional.
`.disabled`	To disabled horizontal navigation menu link, you need to add `.disabled` class in navigation `<li>` tag. This navigation class is optional. Fore more information please check horizontal-nav-disabled.html

Footer Options

Below table contain footer customization options. Please Refer line no: 26 in the above HTML Snippet.

Section

Footer

Classes	Description
`.footer-light`	To set footer light color you need to add `.footer-light` class in footer `<footer>` tag. For more information please check footer-light.html.
`.footer-dark`	To set footer dark color you need to add `.footer-dark` class in footer `<footer>` tag. For more information please check footer-dark.html.
`.footer-transparent`	To set footer transparent color you need to add `.footer-transparent` class in footer `<footer>` tag. For more information please check footer-transparent.html.
`.footer-fixed`	To set footer fixed, you need to add `.footer-fixed` class in footer `<footer>` tag. For more information please check footer-fixed.html.

Template Customization

Back to top