Fix UI breaking on forms on Bootstrap Grid system

Signed-off-by: Takuya Noguchi <takninnovationresearch@gmail.com>

ee/app/views/admin/_namespace_plan.html.haml

@@ -2,7 +2,8 @@
 - return unless Gitlab::CurrentSettings.should_check_namespace_plan?
 
 .form-group.row
-  = f.label :plan, class: 'col-form-label col-sm-2'
+  .col-sm-2.col-form-label
+    = f.label :plan
   .col-sm-10
     = f.fields_for :gitlab_subscription do |f|
       = f.select :hosted_plan_id, Plan.pluck(:title, :id),

ee/app/views/admin/licenses/new.html.haml

@@ -27,12 +27,14 @@
             Enter license key
 
   .form-group.row.license-file
-    = f.label :data_file, "License file", class: 'col-form-label col-sm-2'
+    .col-sm-2.col-form-label
+      = f.label :data_file, "License file"
     .col-sm-10
       = f.file_field :data_file, accept: ".gitlab-license,.gitlab_license,.txt", class: "form-control"
 
   .form-group.row.license-key
-    = f.label :data, "License key", class: 'col-form-label col-sm-2'
+    .col-sm-2.col-form-label
+      = f.label :data, "License key"
     .col-sm-10
       = f.text_area :data, class: "form-control license-key-field", rows: 20
 

ee/app/views/admin/users/_admin_notes.html.haml

 %fieldset
   %legend= _('Admin notes')
   .form-group.row
-    .col-sm-2.text-right
-      = f.label :note, _('AdminNote|Note'), class: 'col-form-label'
-    .col-sm-10= f.text_area :note, class: 'form-control'
+    .col-sm-2.col-form-label.text-right
+      = f.label :note, _('AdminNote|Note')
+    .col-sm-10
+      = f.text_area :note, class: 'form-control'

ee/app/views/ldap_group_links/_form.html.haml

@@ -2,15 +2,15 @@
   = form_for [group, LdapGroupLink.new] do |f|
     .form-holder
       .form-group.row
-        = f.label :cn, class: 'col-form-label col-sm-2' do
-          LDAP Server
+        .col-sm-2.col-form-label
+          = f.label :cn, "LDAP Server"
         .col-sm-10
           = f.select :provider, ldap_server_select_options, {}, class: 'form-control'
 
       - if ::License.feature_available?(:ldap_group_sync_filter)
         .form-group.row
-          = f.label :cn, class: 'col-form-label col-sm-2' do
-            Sync method
+          .col-sm-2.col-form-label
+            = f.label :cn, "Sync method"
           .col-sm-10
             .form-check
               = radio_button_tag :sync_method, :group, true, class: 'form-check-input'
@@ -22,8 +22,8 @@
                 LDAP user filter
 
       .form-group.row.cn-link
-        = f.label :cn, class: 'col-form-label col-sm-2' do
-          LDAP Group cn
+        .col-sm-2.col-form-label
+          = f.label :cn, "LDAP Group cn"
         .col-sm-10
           = f.hidden_field :cn, placeholder: 'Ex. QA group', class: 'xxlarge ajax-ldap-groups-select input-mn-300 qa-ldap-group-cn-select'
           .form-text.text-muted
@@ -33,8 +33,8 @@
 
       - if ::License.feature_available?(:ldap_group_sync_filter)
         .form-group.row.filter-link
-          = f.label :filter, class: 'col-form-label col-sm-2' do
-            LDAP User filter
+          .col-sm-2.col-form-label
+            = f.label :filter, "LDAP User filter"
           .col-sm-10
             = f.text_field :filter, placeholder: 'Ex. (&(objectCategory=person)(objectClass=developer))', class: 'form-control xxlarge input-mn-300 qa-ldap-user-filter-text-field'
             .form-text.text-muted
@@ -44,8 +44,8 @@
               If you do not belong to this LDAP user filter you will lose ownership of #{group.name}.
 
       .form-group.row
-        = f.label :group_access, class: 'col-form-label col-sm-2' do
-          LDAP Access
+        .col-sm-2.col-form-label
+          = f.label :group_access, "LDAP Access"
         .col-sm-10
           = f.select :group_access, options_for_select(GroupMember.access_level_roles), {}, class: 'form-control'
           .form-text.text-muted

ee/app/views/namespaces/_shared_runners_minutes_setting.html.haml

@@ -3,8 +3,8 @@
 - form = local_assigns.fetch(:form)
 
 .form-group.row
-  = form.label :shared_runners_minutes_limit, class: 'col-form-label col-sm-2' do
-    Pipeline Minutes Quota
+  .col-sm-2.col-form-label
+    = form.label :shared_runners_minutes_limit, "Pipeline Minutes Quota"
   .col-sm-10
     = form.number_field :shared_runners_minutes_limit, class: 'form-control', min: 0
     %span.form-text.text-muted#shared_runners_minutes_limit_help_block

ee/app/views/shared/issuable/_approvals.html.haml

@@ -8,8 +8,8 @@
 - can_update_approvers = can?(current_user, :update_approvers, issuable)
 
 .form-group.row
-  = form.label :approver_ids, class: 'col-form-label col-sm-2' do
-    Approvers
+  .col-sm-2.col-form-label
+    = form.label :approver_ids, "Approvers"
   .col-sm-10
     #js-mr-approvals-input{ data: { 'project_id': @target_project.id,
       'can_edit': can?(current_user, :update_approvers, issuable).to_s,

ee/changelogs/unreleased/12658-css-label-in-forms-with-bootstrap4.yml

+---
+title: Fix UI breaking on forms on Bootstrap Grid system
+merge_request: 14581
+author: Takuya Noguchi
+type: fixed