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

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

    <!-- END Site header -->

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

    <!-- END Sidebar -->

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

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

        <!-- END Main content -->

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

        <!-- END Footer -->




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