Issue #3359437 by mademo, Grimreaper, pdureau: Field display: respect label inline or above

assets/css/component/field.css

+.field--label--inline::after {
+  content: ":";
+}

templates/overrides/system/field.html.twig

@@ -38,18 +38,30 @@
  * @ingroup themeable
  */
 #}
+{{ attach_library('ui_suite_bootstrap/field') }}
 {%
   set title_classes = [
+    'field--label',
+    'field--label--' ~ label_display|clean_class,
     label_display == 'visually_hidden' ? 'visually-hidden',
+    label_display == 'inline' ? 'float-start',
+    label_display == 'inline' ? 'pe-2',
+    'fw-bold',
   ]
 %}
-<div{{ attributes.addClass(classes) }}>
+{% set field_items_attributes = create_attribute({
+  'class': [
+    'field--items',
+    multiple and label_display == 'inline' ? 'float-start',
+  ]
+}) %}
+<div{{ attributes }}>
   {% if not label_hidden %}
     <div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
   {% endif %}
-  <div class="field__items">
+  <div{{ field_items_attributes }}>
     {% for item in items %}
-      <div{{ item.attributes.addClass('field__item') }}>{{ item.content }}</div>
+      <div{{ item.attributes.addClass('field--item') }}>{{ item.content }}</div>
     {% endfor %}
   </div>
 </div>

ui_suite_bootstrap.libraries.yml

@@ -45,6 +45,11 @@ example_carousel:
     theme:
       assets/css/example/carousel.css: {}
 
+field:
+  css:
+    component:
+      assets/css/component/field.css: {}
+
 form:
   css:
     component: