[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Collapse]ASP.NET Bootstrap Controls
  ASP.NET Bootstrap Controls - Overview
 [Expand]Getting Started
 [Expand]Demos and Sample Applications
 [Expand]Project Configuration
 [Expand]Grid View
 [Expand]Card View
 [Expand]Scheduler
 [Expand]Spreadsheet
 [Expand]Rich Text Editor
 [Expand]Charts
  Sparkline
 [Expand]Data Editors
 [Expand]Site Navigation
 [Collapse]Site Layout
   Callback Panel
  [Collapse]Form Layout
    Form Layout Rendering
   Page Control
   Popup Control
  File Manager
 [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]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

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 or 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.ColSpanXl Specifies the number of virtual columns an item occupies on screens with a resolution bigger than or equal to 1200px. .col-xl-*
BootstrapLayoutItem.ColSpanLg Specifies the number of virtual columns an item occupies on screens with a resolution bigger than or equal to 992px. .col-lg-*
BootstrapLayoutItem.ColSpanMd Specifies the number of virtual columns a layout item occupies on screens with a resolution bigger than or equal to 768px. .col-md-*
BootstrapLayoutItem.ColSpanSm Specifies the number of virtual columns an item occupies on screens with a resolution bigger than or equal to 576px. .col-sm-*
BootstrapLayoutItem.ColSpanXs Specifies the number of virtual columns an item occupies on screens with a resolution less than 576px. .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.

The BootstrapLayoutGroup class also exposes ColSpanXX properties, which you can use to align items within a layout group.

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

Is this topic helpful?​​​​​​​