Grid

Description

The aim of the Lexicon layout framework is to provide a common structural reference that contributes to streamlining the component construction and page composition processes, as well as favoring visual consistency between the different elements of the interface.

Container

.container has a specific max-width for each grid breakpoint (e.g., Atlas 540px wide, 720px wide, 960px wide, and 1248px wide).

<div class="container"></div>

Container Fluid

https://getbootstrap.com/docs/4.0/layout/grid/

Use the .container-fluid class with the .container-fluid-max-{literal}{{/literal}sm|md|lg|xl{literal}}{/literal} class to create fluid containers that don't expand beyond a set width (e.g., For Atlas xl => 1248px).

<div class="container-fluid container-fluid-max-sm"></div>

<div class="container-fluid container-fluid-max-md"></div>

<div class="container-fluid container-fluid-max-lg"></div>

<div class="container-fluid container-fluid-max-xl"></div>

Container Form Lg

Use the .container-form-lg class with the .container class or .container-fluid class to properly space between application controls and the form. This class only modifies the padding on the container.

<div class="container-fluid container-fluid-max-xl container-form-lg"></div>

Container View

Use the .container-view class with the .container class or .container-fluid class to properly space between application controls and view pages (e.g., Card View, Table View, or List View). This class only modifies the padding on the container.

<div class="container-fluid container-fluid-max-xl container-view"></div>