Page Layout

Apex Admin provides 2 types of page layouts viz.: 1 Column and 2 Columns.

Below you can find how to use these layouts. We have provided CSS Classes, HTML Markup for usage.

Tip: These classes and markup are flexible and can be remixed and extended with ease.

1 Column

CSS Classes

This table contains all classes related to the 1 column layout. This is a custom layout for full width page requirements.

All these options can be set via following classes:

Value/Class Description
1-column You can create 1 column layout by adding .1-column class in <body> tag and set data-col as 1-column.

HTML Markup

This section contains HTML Markup to create 1 column layout. You need to add the .1-column class in the <body> tag as show in below. Please note that 1 column layout do not have Navigation section and it has inner starter-kit pages links with icons in Navbar.

Apex has a ready to use starter kit, you can use this layout directly by using the 1-column.html. 

<html class="loaded" lang="en">
    <head>
        ...
    </head>
    <body class="vertical-layout vertical-menu 1-column menu-expanded" data-menu="vertical-menu" data-col="1-column">

        <!-- Navbar starts -->
        <nav class="navbar navbar-expand-lg navbar-light header-navbar">
            ...
        </nav>
        <!-- Navbar ends -->

        <div class="wrapper">
            <div class="main-panel">
                <div class="main-content">
                    <div class="content-overlay"></div>
                    <!-- Page Content starts -->
                    <div class="content-wrapper">
                        ...
                    </div>
                    <!-- Page Content ends -->
                </div>

                <!-- Footer starts -->
                <footer class="footer">
                    ...
                </footer>
                <!-- Footer ends -->
            </div>
        </div>
    </body>
</html>
1 Column