CSS Classes

For full layout, you need to remove .container-xxl class that included with .content-wrapper class.

All these options can be set via following classes:

Classes Description
.container-xxl.p-0 You can create layout full by removing .container-xxl.p-0 classes along with .content-wrapper and .content-area-wrapper classes.

HTML Markup

This section contains HTML Markup to create layout full. You need to remove the .container-xxl.p-0 classes along with .content-wrapper and .content-area-wrapper classes. Default layout of the template comes with boxed layout but you can create full layout with below changes.

Vuexy has a ready to use starter kit, you can use this layout directly by using layout-full.html.


<!DOCTYPE html>
<html lang="en">
  <head>
    ...
  </head>
  <body class="vertical-layout vertical-menu-modern navbar-floating footer-static" data-menu="vertical-menu-modern">

    <!-- BEGIN: Navbar -->
    <nav class="header-navbar navbar navbar-expand-lg align-items-center floating-nav navbar-light navbar-shadow">
      ...
    </nav>
    <!-- END: Navbar -->

    <!-- BEGIN: Main Menu -->
    <div class="main-menu menu-fixed menu-light menu-accordion menu-shadow" data-scroll-to-active="true">
      ...
    </div>
    <!-- END: Main Menu -->

    <!-- BEGIN: Content -->
    <div class="app-content content">

        <!-- Content-wrapper -->
        <div class="content-wrapper container-xxl p-0">   <!-- Remove from here -->
          ...
        </div>

    </div>
    <!-- END: Content -->

    <!-- Begin: Footer -->
    <footer class="footer footer-static footer-light">
      ...
    </footer>
    <!-- END: Footer -->

  </body>
</html>