Content Left Sidebar
Back to top
Content Left Sidebar
  1. Home
  2. Layouts
  3. Content Left Sidebar

CSS Classes

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

All these options can be set via following classes:

Classes Description
.content-left-sidebar You can create 3 column left layout by adding .content-left-sidebar class in <body> tag.
.sidebar-left In this layout sidebar should be float in left side, so .sidebar-left class needs to add in sidebar wrapper.
.content-right In this layout content should be float in right side, so .content-right class needs to add in content wrapper.

HTML Markup

This section contains HTML Markup to create 3 column left sidebar layout. You need to add the .content-left-sidebar class in the <body> tag as show in below. This layout has a navigation, content and left sidebar sections with common header & footer.

  • Contain the .content-right class for adjusting content section in right side.
  • Contain the .sidebar-left class for adjusting sidebar section in left side.
Markup
<!DOCTYPE html>
<html lang="en">
  <head></head>
  <body data-menu="vertical-menu-modern" class="vertical-layout vertical-menu-modern content-left-sidebar navbar-sticky footer-static menu-expanded" data-col="content-left-sidebar">
    <!-- BEGIN Content-->
    <div class="app-content content">
        <div class="content-area-wrapper">
            <!-- sidebar left-->
            <div class="sidebar-left">
                <div class="sidebar">
                    ...
                </div>
            </div>
            <!-- sidebar left Ends-->

            <!-- content right-->
            <div class="content-right">
                ...
            </div>
            <!-- content right Ends-->
        </div>
    </div>
    <!-- END Content-->
  </body>
</html>