Grid

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.

Check the Lexicon Grid Pattern for a more in-depth look at the motivations and proper usage of this.

Container

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

Base
Breakpoint (min-width) Container (max-width)
576px 540px
768px 720px
992px 960px
1200px 1140px
Atlas
Breakpoint (min-width) Container (max-width)
576px 540px
768px 720px
992px 960px
1280px 1248px
container 
<div class="container"></div>

Container Fluid

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

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

Base
Name Container Fluid (max-width)
.container-fluid-max-sm 540px
.container-fluid-max-md 720px
.container-fluid-max-lg 960px
.container-fluid-max-xl 1140px
Atlas
Name Container Fluid (max-width)
.container-fluid-max-sm 540px
.container-fluid-max-md 720px
.container-fluid-max-lg 960px
.container-fluid-max-xl 1248px
container-fluid-max-sm
container-fluid-max-md
container-fluid-max-lg
container-fluid-max-xl 
<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.

f you need additional breakpoints such as .container-form-sm|md|xl, you will need to define them yourself.

Form Title

<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.

Item Title Size Status Creation Date Modification Date
PNG Wings eu, pumpkin spice robusta, kopi-luwak mocha caffeine froth grounds. 700KB Approved 6 days ago 4 days ago 
<div class="container-fluid container-fluid-max-xl container-view"></div>