Overview

Components and options for laying out your LCUI project, including wrapping containers, a simple grid system.

Containers

Containers are the most basic layout element LCUI and are required when using our default grid system. Choose from a fixed-width container or fluid-width.

While containers can be nested, most layouts do not require a nested container.

  1. <w class="container">
  2.   <!-- Content here -->
  3.   <w class="docs-example-container-header"></w>
  4.   <w class="docs-example-container-sidebar"></w>
  5.   <w class="docs-example-container-body">
  6.     <w class="docs-example-container-content"></w>
  7.   </w>
  8. </w>

Use .container-fluid for a full width container, spanning the entire width of the viewport.

  1. <w class="container-fluid">
  2.   <!-- Content here -->
  3.   <w class="docs-example-container-header"></w>
  4.   <w class="docs-example-container-sidebar"></w>
  5.   <w class="docs-example-container-body">
  6.     <w class="docs-example-container-content"></w>
  7.   </w>
  8. </w>