BootstrapLayoutGroup Class

Represents a layout group within the BootstrapFormLayout control.

Namespace: DevExpress.Web.Bootstrap

Assembly: DevExpress.Web.Bootstrap.v24.2.dll

Declaration

C#

public class BootstrapLayoutGroup :
    LayoutGroup,
    IBootstrapLayoutGroup,
    IBootstrapLayoutItemBase

VB.NET

Public Class BootstrapLayoutGroup
    Inherits LayoutGroup
    Implements IBootstrapLayoutGroup,
               IBootstrapLayoutItemBase

Remarks

A layout group (BootstrapLayoutGroup) is a container for layout items and other layout groups. A group stores its child items in the Items collection.

A layout group exposes ColSpanXX properties, which allow you to align layout groups based on the display resolution in the same way, in which you align layout items (see the Default FormLayout demo). Note that a layout group cannot be placed in one Bootstrap grid row with a layout item. If there are an item and a group in one layout item collection, the group is placed on a new row as if it had the BeginRow property set to true.

A layout group exposes the Decoration property which can be set to either Card or None. If this property is set to Card, the group has a border and can display caption provided that the ShowCaption property is set to true.

<dx:BootstrapFormLayout runat="server">
    <Items>
        <dx:BootstrapLayoutGroup Caption="Personal Information">
            <Items>
                <dx:BootstrapLayoutItem Caption="First Name" ColSpanMd="4">
                    <ContentCollection>
                        <dx:ContentControl>
                            <dx:BootstrapTextBox runat="server" Text="Nancy" />
                        </dx:ContentControl>
                    </ContentCollection>
                </dx:BootstrapLayoutItem>
                <dx:BootstrapLayoutItem Caption="Last Name" ColSpanMd="4">
                    <ContentCollection>
                        <dx:ContentControl>
                            <dx:BootstrapTextBox runat="server" Text="Davolio" />
                        </dx:ContentControl>
                    </ContentCollection>
                </dx:BootstrapLayoutItem>
                <dx:BootstrapLayoutItem Caption="Birth Date" ColSpanMd="4">
                    <ContentCollection>
                        <dx:ContentControl>
                            <dx:BootstrapDateEdit runat="server" Date="12/8/1948" />
                        </dx:ContentControl>
                    </ContentCollection>
                </dx:BootstrapLayoutItem>
            </Items>
        </dx:BootstrapLayoutGroup>
    </Items>
</dx:BootstrapFormLayout>

Note

Online Demo: Form Layout - Groups

Inheritance

Object

StateManager

CollectionItem

LayoutItemBase

LayoutGroupBase

LayoutGroup

BootstrapLayoutGroup