Bootstrap ASP.NET WebForms - Layout Control Enhancements (v18.1)

Now that the DXperience v18.1 release is available, let's dive into the new features of our Bootstrap Form Layout control.

The DevExpress ASP.NET Bootstrap Form Layout control helps you to build efficient and adaptive form layouts using the Bootstrap grid system.

Layout Groups

Let's start with the new 'Layout Groups' and 'Tabbed Layout Groups'. These Layout Groups serve as containers for Layout Items and allow you to create well organized forms that look great.

Tabbed Login Form

Image may be NSFW.
Clik here to view.

For example, you can easily create a "Login and Register" tabbed form with the Bootstrap Form Layout control. All you need is one tabbed layout group in the control’s Items collection with two layout groups: 'Login' and 'Register'. These groups contain layout items (with editors) to input typical data that's required to login or register for a website. Here's the sample code outline:

<dx:BootstrapFormLayout runat="server" ID="BootstrapFormLayout1">
	<Items>
		<dx:BootstrapTabbedLayoutGroup>
			<Items>
				<dx:BootstrapLayoutGroup Caption="Login">
					<Items>
						...
					</Items>
				</dx:BootstrapLayoutGroup>
				<dx:BootstrapLayoutGroup Caption="Register">
					<Items>
						...
					</Items>
				</dx:BootstrapLayoutGroup>
			</Items>
		</dx:BootstrapTabbedLayoutGroup>
	</Items>
</dx:BootstrapFormLayout>

Adaptive

The Bootstrap Grid system provides classes for different screen sizes. The DevExpress Bootstrap controls help you to leverage these features of the Bootstrap Grid system.

To help you make your layouts more adaptive, some of the layout items support BootstrapLayoutItem.ColSpanXl / ColSpanLg / ColSpanMd / ColSpanSm / ColSpanXs properties. This allows you to define different values depending on the current screen resolution. For example, here the layout changes column count based on the width:

Image may be NSFW.
Clik here to view.

Non-tabbed

Non-tabbed layout groups are useful to visually separate and group a form's sections without using tabs.

Image may be NSFW.
Clik here to view.

Before the v18.1 release, you would need several Form Layout controls to create non-tabbed layout groups. Now, you can add the required groups or another layout group’s Items collection to the control:

<dx:BootstrapFormLayout runat="server" ID="BootstrapFormLayout1">
	<Items>
		<dx:BootstrapLayoutGroup Caption="Registration form">
			<Items>
				<dx:BootstrapLayoutGroup Caption="Authorization Data">
					<Items>
						...
					</Items>
				</dx:BootstrapLayoutGroup>
				<dx:BootstrapLayoutGroup Caption="Personal Data">
					<Items>
						...
					</Items>
				</dx:BootstrapLayoutGroup>
				<dx:BootstrapLayoutItem ColSpanXs="12">
					...
				</dx:BootstrapLayoutItem>
			</Items>
		</dx:BootstrapLayoutGroup>
	</Items>
</dx:BootstrapFormLayout>

Take a look at all of the new features of our Bootstrap Layout control here: ASP.NET Core & WebForms Bootstrap – Layout Control Enhancements (v18.1)

Like it?

We'd love to hear your feedback about the new features of the DevExpress ASP.NET Bootstrap control. Drop me a line below, thanks.

Email: mharry@devexpress.com

Twitter: @mehulharry

Image may be NSFW.
Clik here to view.