diff --git a/ui/src/app/form/component/templates/ObjectFieldTemplate.js b/ui/src/app/form/component/templates/ObjectFieldTemplate.js
index 0fe0089e4..2297f40d6 100644
--- a/ui/src/app/form/component/templates/ObjectFieldTemplate.js
+++ b/ui/src/app/form/component/templates/ObjectFieldTemplate.js
@@ -47,7 +47,7 @@ const ObjectFieldTemplate = ({
                         <Row>{uiSchema.layout.groups.map((group, rIdx) => (
                             <React.Fragment key={rIdx}>
                             {properties.some(p => group.fields.indexOf(p.name) > -1) &&
-                                <Col lg={group.size} key={rIdx}  className={`d-empty-none ${group.classNames}`}>
+                                <Col { ...group.sizes } key={rIdx} className={`d-empty-none ${group.classNames}`}>
                                     {group.title && <legend><Translate value={group.title} /></legend>}
                                     {properties.filter(p => group.fields.indexOf(p.name) > -1).map((element, eIdx) => (
                                         <React.Fragment key={eIdx}>{element.content}</React.Fragment>
diff --git a/ui/src/app/metadata/domain/attribute/CustomAttributeDefinition.js b/ui/src/app/metadata/domain/attribute/CustomAttributeDefinition.js
index 308c3e14a..d4fb6bb87 100644
--- a/ui/src/app/metadata/domain/attribute/CustomAttributeDefinition.js
+++ b/ui/src/app/metadata/domain/attribute/CustomAttributeDefinition.js
@@ -11,7 +11,9 @@ export const CustomAttributeDefinition = {
         layout: {
             groups: [
                 {
-                    size: 6,
+                    sizes: {
+                        lg: 6
+                    },
                     classNames: '',
                     fields: [
                         'name',
@@ -23,7 +25,9 @@ export const CustomAttributeDefinition = {
                     ]
                 },
                 {
-                    size: 6,
+                    sizes: {
+                        lg: 6
+                    },
                     classNames: 'bg-light border rounded p-4',
                     fields: [
                         'defaultValue',
diff --git a/ui/src/app/metadata/domain/provider/definition/BaseProviderDefinition.js b/ui/src/app/metadata/domain/provider/definition/BaseProviderDefinition.js
index b94258159..095ed7ea4 100644
--- a/ui/src/app/metadata/domain/provider/definition/BaseProviderDefinition.js
+++ b/ui/src/app/metadata/domain/provider/definition/BaseProviderDefinition.js
@@ -130,7 +130,9 @@ export const HttpMetadataResolverAttributesSchema = {
             {
                 title: 'label.http-security-attributes',
                 classNames: 'bg-light border rounded px-4 pt-4 pb-3 mb-4',
-                size: 12,
+                sizes: {
+                    xs: 12
+                },
                 fields: [
                     'disregardTLSCertificate'
                 ]
@@ -138,7 +140,9 @@ export const HttpMetadataResolverAttributesSchema = {
             {
                 title: 'label.http-connection-attributes',
                 classNames: 'bg-light border rounded px-4 pt-4 pb-3 mb-4',
-                size: 12,
+                sizes: {
+                    xs: 12
+                },
                 fields: [
                     'connectionRequestTimeout',
                     'connectionTimeout',
@@ -148,7 +152,9 @@ export const HttpMetadataResolverAttributesSchema = {
             {
                 title: 'label.http-proxy-attributes',
                 classNames: 'bg-light border rounded px-4 pt-4 pb-3 mb-4',
-                size: 12,
+                sizes: {
+                    xs: 12
+                },
                 fields: [
                     'proxyHost',
                     'proxyPort',
@@ -159,7 +165,9 @@ export const HttpMetadataResolverAttributesSchema = {
             {
                 title: 'label.http-caching-attributes',
                 classNames: 'bg-light border rounded px-4 pt-4 pb-3 mb-4',
-                size: 12,
+                sizes: {
+                    xs: 12
+                },
                 fields: [
                     'httpCaching',
                     'httpCacheDirectory',
@@ -169,7 +177,9 @@ export const HttpMetadataResolverAttributesSchema = {
             },
             {
                 classNames: 'd-none',
-                size: 12,
+                sizes: {
+                    xs: 12
+                },
                 fields: [
                     'tlsTrustEngineRef',
                     'httpClientSecurityParametersRef',
diff --git a/ui/src/app/metadata/domain/provider/definition/DynamicHttpMetadataProviderDefinition.js b/ui/src/app/metadata/domain/provider/definition/DynamicHttpMetadataProviderDefinition.js
index 6c2952bdf..d6a8d6b34 100644
--- a/ui/src/app/metadata/domain/provider/definition/DynamicHttpMetadataProviderDefinition.js
+++ b/ui/src/app/metadata/domain/provider/definition/DynamicHttpMetadataProviderDefinition.js
@@ -117,7 +117,11 @@ export const DynamicHttpMetadataProviderWizard = {
         layout: {
             groups: [
                 {
-                    size: 8,
+                    sizes: {
+                        xs: 12,
+                        lg: 8,
+                        xxl: 6
+                    },
                     classNames: 'bg-light border rounded px-4 pt-4 pb-3 mb-4',
                     fields: [
                         'name',
@@ -125,13 +129,21 @@ export const DynamicHttpMetadataProviderWizard = {
                     ]
                 },
                 {
-                    size: 8,
+                    sizes: {
+                        xs: 12,
+                        lg: 8,
+                        xxl: 6
+                    },
                     fields: [
                         'enabled'
                     ]
                 },
                 {
-                    size: 8,
+                    sizes: {
+                        xs: 12,
+                        lg: 8,
+                        xxl: 6
+                    },
                     fields: [
                         'xmlId',
                         'requireValidMetadata',
@@ -140,19 +152,31 @@ export const DynamicHttpMetadataProviderWizard = {
                     ]
                 },
                 {
-                    size: 8,
+                    sizes: {
+                        xs: 12,
+                        lg: 8,
+                        xxl: 6
+                    },
                     fields: [
                         'dynamicMetadataResolverAttributes'
                     ],
                 },
                 {
-                    size: 8,
+                    sizes: {
+                        xs: 12,
+                        lg: 8,
+                        xxl: 6
+                    },
                     fields: [
                         'metadataFilters'
                     ],
                 },
                 {
-                    size: 8,
+                    sizes: {
+                        xs: 12,
+                        lg: 8,
+                        xxl: 6
+                    },
                     fields: [
                         'httpMetadataResolverAttributes'
                     ]
diff --git a/ui/src/app/metadata/domain/provider/definition/ExternalMetadataProviderDefinition.js b/ui/src/app/metadata/domain/provider/definition/ExternalMetadataProviderDefinition.js
index a72d3601d..ee432dcc4 100644
--- a/ui/src/app/metadata/domain/provider/definition/ExternalMetadataProviderDefinition.js
+++ b/ui/src/app/metadata/domain/provider/definition/ExternalMetadataProviderDefinition.js
@@ -35,7 +35,11 @@ export const ExternalMetadataProviderWizard = {
         layout: {
             groups: [
                 {
-                    size: 8,
+                    sizes: {
+                        xs: 12,
+                        lg: 8,
+                        xxl: 6
+                    },
                     classNames: 'bg-light border rounded px-4 pt-4 pb-3 mb-4',
                     fields: [
                         'name',
@@ -43,7 +47,11 @@ export const ExternalMetadataProviderWizard = {
                     ]
                 },
                 {
-                    size: 8,
+                    sizes: {
+                        xs: 12,
+                        lg: 8,
+                        xxl: 6
+                    },
                     fields: [
                         'xmlId',
                         'description',
diff --git a/ui/src/app/metadata/domain/provider/definition/FileBackedHttpMetadataProviderDefinition.js b/ui/src/app/metadata/domain/provider/definition/FileBackedHttpMetadataProviderDefinition.js
index e1d94ccaf..adfa2c4ad 100644
--- a/ui/src/app/metadata/domain/provider/definition/FileBackedHttpMetadataProviderDefinition.js
+++ b/ui/src/app/metadata/domain/provider/definition/FileBackedHttpMetadataProviderDefinition.js
@@ -75,7 +75,11 @@ export const FileBackedHttpMetadataProviderWizard = {
         layout: {
             groups: [
                 {
-                    size: 8,
+                    sizes: {
+                        xs: 12,
+                        lg: 8,
+                        xxl: 6
+                    },
                     classNames: 'bg-light border rounded px-4 pt-4 pb-3 mb-4',
                     fields: [
                         'name',
@@ -83,7 +87,11 @@ export const FileBackedHttpMetadataProviderWizard = {
                     ]
                 },
                 {
-                    size: 8,
+                    sizes: {
+                        xs: 12,
+                        lg: 8,
+                        xxl: 6
+                    },
                     fields: [
                         'xmlId',
                         'metadataURL',
@@ -97,19 +105,31 @@ export const FileBackedHttpMetadataProviderWizard = {
                     ]
                 },
                 {
-                    size: 8,
+                    sizes: {
+                        xs: 12,
+                        lg: 8,
+                        xxl: 6
+                    },
                     fields: [
                         'reloadableMetadataResolverAttributes'
                     ],
                 },
                 {
-                    size: 8,
+                    sizes: {
+                        xs: 12,
+                        lg: 8,
+                        xxl: 6
+                    },
                     fields: [
                         'metadataFilters'
                     ],
                 },
                 {
-                    size: 8,
+                    sizes: {
+                        xs: 12,
+                        lg: 8,
+                        xxl: 6
+                    },
                     fields: [
                         'httpMetadataResolverAttributes'
                     ]
diff --git a/ui/src/app/metadata/domain/provider/definition/FileSystemMetadataProviderDefinition.js b/ui/src/app/metadata/domain/provider/definition/FileSystemMetadataProviderDefinition.js
index 1cb158d80..98135208d 100644
--- a/ui/src/app/metadata/domain/provider/definition/FileSystemMetadataProviderDefinition.js
+++ b/ui/src/app/metadata/domain/provider/definition/FileSystemMetadataProviderDefinition.js
@@ -42,7 +42,11 @@ export const FileSystemMetadataProviderWizard = {
         layout: {
             groups: [
                 {
-                    size: 8,
+                    sizes: {
+                        xs: 12,
+                        lg: 8,
+                        xxl: 6
+                    },
                     classNames: 'bg-light border rounded px-4 pt-4 pb-3 mb-4',
                     fields: [
                         'name',
@@ -50,7 +54,11 @@ export const FileSystemMetadataProviderWizard = {
                     ]
                 },
                 {
-                    size: 8,
+                    sizes: {
+                        xs: 12,
+                        lg: 8,
+                        xxl: 6
+                    },
                     fields: [
                         'xmlId',
                         'metadataFile',
@@ -58,7 +66,11 @@ export const FileSystemMetadataProviderWizard = {
                     ]
                 },
                 {
-                    size: 8,
+                    sizes: {
+                        xs: 12,
+                        lg: 8,
+                        xxl: 6
+                    },
                     fields: [
                         'reloadableMetadataResolverAttributes'
                     ]
diff --git a/ui/src/app/metadata/domain/provider/definition/LocalDynamicMetadataProviderDefinition.js b/ui/src/app/metadata/domain/provider/definition/LocalDynamicMetadataProviderDefinition.js
index 948df7788..49a56e11f 100644
--- a/ui/src/app/metadata/domain/provider/definition/LocalDynamicMetadataProviderDefinition.js
+++ b/ui/src/app/metadata/domain/provider/definition/LocalDynamicMetadataProviderDefinition.js
@@ -41,7 +41,11 @@ export const LocalDynamicMetadataProviderWizard = {
         layout: {
             groups: [
                 {
-                    size: 8,
+                    sizes: {
+                        xs: 12,
+                        lg: 8,
+                        xxl: 6
+                    },
                     classNames: 'bg-light border rounded px-4 pt-4 pb-3 mb-4',
                     fields: [
                         'name',
@@ -49,14 +53,22 @@ export const LocalDynamicMetadataProviderWizard = {
                     ]
                 },
                 {
-                    size: 8,
+                    sizes: {
+                        xs: 12,
+                        lg: 8,
+                        xxl: 6
+                    },
                     fields: [
                         'xmlId',
                         'sourceDirectory'
                     ]
                 },
                 {
-                    size: 8,
+                    sizes: {
+                        xs: 12,
+                        lg: 8,
+                        xxl: 6
+                    },
                     fields: [
                         'dynamicMetadataResolverAttributes'
                     ],
diff --git a/ui/src/app/metadata/domain/source/definition/OidcSourceDefinition.js b/ui/src/app/metadata/domain/source/definition/OidcSourceDefinition.js
index 11192fe18..49dc9d360 100644
--- a/ui/src/app/metadata/domain/source/definition/OidcSourceDefinition.js
+++ b/ui/src/app/metadata/domain/source/definition/OidcSourceDefinition.js
@@ -20,14 +20,19 @@ export const OidcSourceEditor = defaultsDeep({
                 groups: [
                     {
                         classNames: 'bg-light border rounded px-4 pt-4 mb-4',
-                        size: 6,
+                        sizes: {
+                            xs: 12,
+                            xxl: 9
+                        },
                         fields: [
                             'protocolSupportEnum',
                             'nameIdFormats'
                         ],
                     },
                     {
-                        size: 12,
+                        sizes: {
+                            xs: 12
+                        },
                         fields: [
                             'extensions'
                         ],
@@ -93,14 +98,19 @@ export const OidcSourceWizard = defaultsDeep({
                 groups: [
                     {
                         classNames: 'bg-light border rounded px-4 pt-4 mb-4',
-                        size: 6,
+                        sizes: {
+                            xs: 12,
+                            lg: 6
+                        },
                         fields: [
                             'protocolSupportEnum',
                             'nameIdFormats'
                         ],
                     },
                     {
-                        size: 12,
+                        sizes: {
+                            xs: 12
+                        },
                         fields: [
                             'extensions'
                         ],
diff --git a/ui/src/app/metadata/domain/source/definition/SourceDefinition.js b/ui/src/app/metadata/domain/source/definition/SourceDefinition.js
index 542dd83a4..344350c15 100644
--- a/ui/src/app/metadata/domain/source/definition/SourceDefinition.js
+++ b/ui/src/app/metadata/domain/source/definition/SourceDefinition.js
@@ -92,7 +92,9 @@ export const SourceBase = {
         layout: {
             groups: [
                 {
-                    size: 6,
+                    sizes: {
+                        xs: 12
+                    },
                     fields: [
                         'protocol',
                         'serviceProviderName',
@@ -101,49 +103,66 @@ export const SourceBase = {
                     ]
                 },
                 {
-                    size: 6,
+                    sizes: {
+                        xs: 6
+                    },
                     fields: [
                         'contacts'
                     ],
                 },
                 {
-                    size: 12,
+                    sizes: {
+                        xs: 12
+                    },
                     fields: [
                         'mdui'
                     ],
                 },
                 {
-                    size: 12,
+                    sizes: {
+                        xs: 12
+                    },
                     fields: [
                         'serviceProviderSsoDescriptor'
                     ],
                 },
                 {
-                    size: 6,
+                    sizes: {
+                        xs: 12,
+                        xxl: 8
+                    },
                     fields: [
                         'logoutEndpoints'
                     ],
                 },
                 {
-                    size: 12,
+                    sizes: {
+                        xs: 12
+                    },
                     fields: [
                         'securityInfo'
                     ],
                 },
                 {
-                    size: 6,
+                    sizes: {
+                        xs: 12
+                    },
                     fields: [
                         'assertionConsumerServices'
                     ],
                 },
                 {
-                    size: 6,
+                    sizes: {
+                        xs: 12
+                    },
                     fields: [
                         'relyingPartyOverrides'
                     ],
                 },
                 {
-                    size: 6,
+                    sizes: {
+                        xs: 12
+                    },
                     fields: [
                         'attributeRelease'
                     ],
@@ -212,7 +231,10 @@ export const SourceBase = {
             layout: {
                 groups: [
                     {
-                        size: 6,
+                        sizes: {
+                            xs: 12,
+                            xxl: 8
+                        },
                         fields: [
                             'authenticationRequestsSigned',
                             'wantAssertionsSigned',
@@ -257,7 +279,10 @@ export const SourceBase = {
             layout: {
                 groups: [
                     {
-                        size: 6,
+                        sizes: {
+                            xs: 12,
+                            lg: 6
+                        },
                         fields: [
                             "displayName",
                             "informationUrl",
@@ -265,7 +290,10 @@ export const SourceBase = {
                         ],
                     },
                     {
-                        size: 6,
+                        sizes: {
+                            xs: 12,
+                            lg: 6
+                        },
                         fields: [
                             "privacyStatementUrl",
                             "logoUrl",
@@ -374,62 +402,93 @@ export const SourceWizard = {
         layout: {
             groups: [
                 {
-                    size: 6,
+                    sizes: {
+                        xs: 12,
+                        lg: 6,
+                        xxl: 6
+                    },
                     classNames: 'bg-light border rounded px-4 pt-4 pb-3',
                     fields: [
                         'organization',
                     ],
                 },
                 {
-                    size: 6,
+                    sizes: {
+                        xs: 12,
+                        lg: 6,
+                        xxl: 6
+                    },
                     fields: [
                         'contacts'
                     ],
                 },
                 {
-                    size: 12,
+                    sizes: {
+                        xs: 12
+                    },
                     fields: [
                         'mdui'
                     ],
                 },
                 {
-                    size: 6,
+                    sizes: {
+                        xs: 12,
+                    },
                     fields: [
                         'serviceProviderSsoDescriptor'
                     ],
                 },
                 {
-                    size: 6,
+                    sizes: {
+                        xs: 12,
+                        lg: 6
+                    },
                     fields: [
                         'logoutEndpoints'
                     ],
                 },
                 {
-                    size: 12,
+                    sizes: {
+                        xs: 12
+                    },
                     fields: [
                         'securityInfo'
                     ],
                 },
                 {
-                    size: 6,
+                    sizes: {
+                        xs: 12,
+                        lg: 6
+                    },
                     fields: [
                         'assertionConsumerServices'
                     ],
                 },
                 {
-                    size: 6,
+                    sizes: {
+                        xs: 12,
+                        lg: 12,
+                        xl: 8,
+                        xxl: 6,
+                    },
                     fields: [
                         'relyingPartyOverrides'
                     ],
                 },
                 {
-                    size: 6,
+                    sizes: {
+                        xs: 12,
+                        lg: 6
+                    },
                     fields: [
                         'attributeRelease'
                     ],
                 },
                 {
-                    size: 6,
+                    sizes: {
+                        xs: 12,
+                        lg: 6
+                    },
                     fields: []
                 }
             ]
diff --git a/ui/src/testing/uiSchema.js b/ui/src/testing/uiSchema.js
index 7a181d1ca..27aadaee8 100644
--- a/ui/src/testing/uiSchema.js
+++ b/ui/src/testing/uiSchema.js
@@ -7,7 +7,9 @@ const schema = {
     "layout": {
         "groups": [
             {
-                "size": 6,
+                "sizes": {
+                    "xs": 12,
+                },
                 "fields": [
                     "protocol",
                     "serviceProviderName",
@@ -16,49 +18,66 @@ const schema = {
                 ]
             },
             {
-                "size": 6,
+                "sizes": {
+                    "xs": 6,
+                },
                 "fields": [
                     "contacts"
                 ]
             },
             {
-                "size": 12,
+                "sizes": {
+                    "xs": 12,
+                },
                 "fields": [
                     "mdui"
                 ]
             },
             {
-                "size": 12,
+                "sizes": {
+                    "xs": 12,
+                },
                 "fields": [
                     "serviceProviderSsoDescriptor"
                 ]
             },
             {
-                "size": 6,
+                "sizes": {
+                    "xs": 12,
+                    "xxl": 8
+                },
                 "fields": [
                     "logoutEndpoints"
                 ]
             },
             {
-                "size": 12,
+                "sizes": {
+                    "xs": 12,
+                },
                 "fields": [
                     "securityInfo"
                 ]
             },
             {
-                "size": 6,
+                "sizes": {
+                    "xs": 12,
+                },
                 "fields": [
                     "assertionConsumerServices"
                 ]
             },
             {
-                "size": 6,
+                "sizes": {
+                    "xs": 12,
+                },
                 "fields": [
                     "relyingPartyOverrides"
                 ]
             },
             {
-                "size": 6,
+                "sizes": {
+                    "xs": 12,
+                },
                 "fields": [
                     "attributeRelease"
                 ]
@@ -132,7 +151,10 @@ const schema = {
         "layout": {
             "groups": [
                 {
-                    "size": 6,
+                    "sizes": {
+                        "xs": 12,
+                        "xxl": 8,
+                    },
                     "fields": [
                         "authenticationRequestsSigned",
                         "wantAssertionsSigned",
@@ -183,7 +205,10 @@ const schema = {
         "layout": {
             "groups": [
                 {
-                    "size": 6,
+                    "sizes": {
+                        "lg": 6,
+                        "xs": 12,
+                    },
                     "fields": [
                         "displayName",
                         "informationUrl",
@@ -191,7 +216,10 @@ const schema = {
                     ]
                 },
                 {
-                    "size": 6,
+                    "sizes": {
+                        "lg": 6,
+                        "xs": 12,
+                    },
                     "fields": [
                         "privacyStatementUrl",
                         "logoUrl",