CSS Classes

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

All these options can be set via following classes:

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

HTML Markup

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

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

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

    <!-- Content Detached to Left -->
    <div class="content-detached content-left">
      <div class="content-body">
        ...
      </div>
    </div>
    <!--/ Content Detached to Left -->

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