CSS Classes

This table contains all classes related to the content detached left sidebar layout. This is a custom layout classes for content detached left sidebar layout page requirements.

All these options can be set via following classes:

Classes Description
.sidebar-detached.sidebar-left Use these classes as a child of .content-wrapper class to float the sidebar on left side of the content section.
.sidebar Use this class as a child of .sidebar-detached.sidebar-left class to float the sidebar on left side of the content section.
.content-detached.content-right Use these classes as a child of .content-wrapper class to float the content on right side so that left sidebar floats to the left side of the content section.
.content-body Use this class as a child of .content-detached.content-right classes to create some margin on the left side of the content section so that content and sidebar doesn't overlap.

HTML Markup

This section contains HTML Markup to create 3 column detached left sidebar layout. This layout has a navigation, content and left detached sidebar sections with common header and footer sections.

  • Add .sidebar-detached.sidebar-left classes for adjusting detached sidebar section to left side.
  • Add .sidebar class as a child of .sidebar-detached.sidebar-left classes for adjusting detached sidebar section to left side.
  • Add .content-detached.content-right classes for adjusting detached content section to right side.
  • Add .content-body class as a child of .content-detached.content-right classes to create some margin on the left side of the content section.

<!-- BEGIN: Content -->
<div class="app-content content">
  <div class="content-wrapper">
    <!-- Content Header -->
    <div class="content-header row">
      ...
    </div>
    <!--/ Content Header -->

    <!-- Sidebar Detached to Left -->
    <div class="sidebar-detached sidebar-left">
      <div class="sidebar">
        ...
      </div>
    </div>
    <!--/ Sidebar Detached to Left -->

    <!-- Content Detached to Right -->
    <div class="content-detached content-right">
      <div class="content-body">
        ...
      </div>
    </div>
    <!--/ Content Detached to Right -->
  </div>
</div>
<!-- END: Content -->