Boxed sidebar

To give you more layout varieties, we implemented a full-width layout with a fixed sidebar on left/right. Also, this sidebar has two color variations.

  1. Page Layout
  2. Variations

Page Layout

Please consider that this layout has a bit different html structure that other layouts.



<!DOCTYPE html>
<html lang="en">
  <head></head>
  <body>

    <!-- Site header -->
    <header class="site-header">

    </header>
    <!-- END Site header -->


    <!-- Sidebar -->
    <aside class="sidebar sidebar-boxed">

    </aside>
    <!-- END Sidebar -->


    <main class="container-fluid">
      <div class="row">

        <!-- Main content -->
        <article class="main-content" role="main">

        </article>
        <!-- END Main content -->


        <!-- Footer -->
        <footer class="site-footer">

        </footer>
        <!-- END Footer -->

      </div>
    </main>

  </body>
</html>

Variations

You can place this sidebar in left or right side of your page. By default it's left-sided, but you can simply add sidebar-right class to the .sidebar-boxed tag.

Also, by adding sidebar-dark class to the .sidebar-boxed you can change the color of the sidebar.


Try it