Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Collapse]ASP.NET Bootstrap Controls
 [Expand]Getting Started
 [Expand]Grid View
 [Expand]Card View
 [Expand]Charts
 [Expand]Data Editors
 [Expand]Site Navigation
 [Collapse]Site Layout
   Callback Panel
  [Collapse]Form Layout
    Form Layout Rendering
   Page Control
   Popup Control
 [Expand]Redistribution and Deployment
 [Expand]API Reference
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Form Layout Rendering

The Bootstrap Form Layout control's functionality is best understood taking into consideration how it is rendered using Bootstrap classes. This document provides information on Form Layout rendering specifics. You can use this information to construct efficient adaptive form layouts.

The Form Layout control renders itself using the Bootstrap grid system so that the resulting markup can seamlessly integrate with Bootstrap-powered page layouts. Because of this specific, you can approach creating form layouts with DevExpress Bootstrap Controls in the same way you approach creating page layouts using the Bootstrap grid system.

When constructing form layouts, you need to think in terms of the following basic elements.

Expanded Virtual Columns

In accordance with the Bootstrap grid layout paradigm, you can control the adaptive behavior of the Form Layout control by manipulating its virtual columns.

Each Form Layout item can occupy from one to twelve columns in the current row. To specify how many columns an item should occupy, depending on the current screen resolution, use the following properties:

Property Name Description Rendered Bootstrap Classes
BootstrapLayoutItem.ColSpanLg Specifies how many virtual columns should the item occupy on a large screen (1200px or wider) .col-lg-*
BootstrapLayoutItem.ColSpanMd Specifies how many virtual columns should the item occupy on a medium screen (992px or wider) .col-md-*
BootstrapLayoutItem.ColSpanSm Specifies how many virtual columns should the item occupy on a small screen (768px or wider) .col-sm-*
BootstrapLayoutItem.ColSpanXs Specifies how many virtual columns should the item occupy on an extra small screen (less than 768px) .col-xs-*

For example, consider the following declaration.

This declaration will produce the following page markup.

The image below illustrates how this layout automatically responds to switching from medium to small screen resolution.

Expanded Rows

By default, all layout items are rendered within a single Bootstrap grid row (a DIV.row element). Consequently, an item is moved to the next row only if it can not be displayed in the current row (there are not enough vacant virtual columns). To force an item to start a new row, set the items BootstrapLayoutItem.BeginRow property to true.

For example, consider the following declaration.

This declaration will produce the following page markup.

Expanded See Also

How would you rate this topic?​​​​​​​