Layout Containers and Forms

Wrapping containers for responsive layouts.

How To

  1. Step 1: Include LambdaEx Framework in Logi Info Application. Include LambdaEx Framework in Logi Info Application.
Containers

Requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable.

Fluid Layout
Content Area...
<Division Class="container-fluid" HtmlDiv="True"> <Label Caption="..." /> </Division>
<Division Class="container-fluid" HtmlDiv="True">
  <Label Caption="..." />
</Division>
Boxed Layout
Content Area...
<Division Class="container" HtmlDiv="True"> <Label Caption="..." /> </Division>
<Division Class="container" HtmlDiv="True">
  <Label Caption="..." />
</Division>
Forms

Add .form-inline to your form (which doesn't have to be a form) for left-aligned and inline-block controls. This only applies to forms within viewports that are at least 768px wide.

May require custom widths

Inputs and selects have width: 100%; applied by default in Bootstrap. Within inline forms, we reset that to width: auto; so multiple controls can reside on the same line. Depending on your layout, additional custom widths may be required.

Inline Example
Username:
Password:
Sign in
<Division Class="form-inline" HtmlDiv="True"> <Division Class="form-group" HtmlDiv="True"> <InputText Caption="Username: " CaptionClass="form-control-label ThemeBold" Class="form-control" Placeholder="Email" /> </Division> <Division Class="form-group mx-sm-3" HtmlDiv="True"> <InputPassword Caption="Password: " CaptionClass="form-control-label ThemeBold" Class="form-control" Placeholder="Password" /> </Division> <Label HtmlTag="a" Caption="Sign in" Class="btn btn-primary"> <EventHandler DhtmlEvent="href"> <Action Type="Javascript" Javascript="void(0)" /> </EventHandler> </Label> </Division>
<Division Class="form-inline" HtmlDiv="True">
  <Division Class="form-group" HtmlDiv="True">
    <InputText Caption="Username: " CaptionClass="form-control-label ThemeBold" Class="form-control" Placeholder="Email" />
  </Division>
  <Division Class="form-group mx-sm-3" HtmlDiv="True">
    <InputPassword Caption="Password: " CaptionClass="form-control-label ThemeBold" Class="form-control" Placeholder="Password" />
  </Division>
  <Label HtmlTag="a" Caption="Sign in" Class="btn btn-primary">
    <EventHandler DhtmlEvent="href">
      <Action Type="Javascript" Javascript="void(0)" />
    </EventHandler>
  </Label>
</Division>
Horizontal Example
Username:
Password:
Sign in
<Division Class="form-horizontal" HtmlDiv="True"> <Division Class="form-group" HtmlDiv="True"> <InputText Caption="Username: " CaptionClass="form-control-label ThemeBold" Class="form-control" Placeholder="Email" /> </Division> <Division Class="form-group" HtmlDiv="True"> <InputPassword Caption="Password: " CaptionClass="form-control-label ThemeBold" Class="form-control" Placeholder="Password" /> </Division> <Label HtmlTag="a" Caption="Sign in" Class="btn btn-primary"> <EventHandler DhtmlEvent="href"> <Action Type="Javascript" Javascript="void(0)" /> </EventHandler> </Label> </Division>
<Division Class="form-horizontal" HtmlDiv="True">
  <Division Class="form-group" HtmlDiv="True">
    <InputText Caption="Username: " CaptionClass="form-control-label ThemeBold" Class="form-control" Placeholder="Email" />
  </Division>
  <Division Class="form-group" HtmlDiv="True">
    <InputPassword Caption="Password: " CaptionClass="form-control-label ThemeBold" Class="form-control" Placeholder="Password" />
  </Division>
  <Label HtmlTag="a" Caption="Sign in" Class="btn btn-primary">
    <EventHandler DhtmlEvent="href">
      <Action Type="Javascript" Javascript="void(0)" />
    </EventHandler>
  </Label>
</Division>