Merge branch 'bootstrap-checkbox' into 'master'

Fix checkbox/radio button structure

Closes #46766 and #46719

See merge request gitlab-org/gitlab-ce!19254

43 files changed, 205 insertions, 215 deletions

diff --git a/app/views/admin/application_settings/_account_and_limit.html.haml b/app/views/admin/application_settings/_account_and_limit.html.haml
index f40dd347eb3..07f9ea0865b 100644
--- a/app/views/admin/application_settings/_account_and_limit.html.haml
+++ b/app/views/admin/application_settings/_account_and_limit.html.haml
@@ -5,8 +5,8 @@
     .form-group.row
       .offset-sm-2.col-sm-10
         .form-check
-          = f.label :gravatar_enabled do
-            = f.check_box :gravatar_enabled
+          = f.check_box :gravatar_enabled, class: 'form-check-input'
+          = f.label :gravatar_enabled, class: 'form-check-label' do
             Gravatar enabled
     .form-group.row
       = f.label :default_projects_limit, class: 'col-form-label col-sm-2'
@@ -25,15 +25,15 @@
       = f.label :user_oauth_applications, 'User OAuth applications', class: 'col-form-label col-sm-2'
       .col-sm-10
         .form-check
-          = f.label :user_oauth_applications do
-            = f.check_box :user_oauth_applications
+          = f.check_box :user_oauth_applications, class: 'form-check-input'
+          = f.label :user_oauth_applications, class: 'form-check-label' do
             Allow users to register any application to use GitLab as an OAuth provider
     .form-group.row
       = f.label :user_default_external, 'New users set to external', class: 'col-form-label col-sm-2'
       .col-sm-10
         .form-check
-          = f.label :user_default_external do
-            = f.check_box :user_default_external
+          = f.check_box :user_default_external, class: 'form-check-input'
+          = f.label :user_default_external, class: 'form-check-label' do
             Newly registered users will by default be external
 
   = f.submit 'Save changes', class: 'btn btn-success'
diff --git a/app/views/admin/application_settings/_background_jobs.html.haml b/app/views/admin/application_settings/_background_jobs.html.haml
index da7248337d2..fc5df02242a 100644
--- a/app/views/admin/application_settings/_background_jobs.html.haml
+++ b/app/views/admin/application_settings/_background_jobs.html.haml
@@ -9,8 +9,8 @@
     .form-group.row
       .offset-sm-2.col-sm-10
         .form-check
-          = f.label :sidekiq_throttling_enabled do
-            = f.check_box :sidekiq_throttling_enabled
+          = f.check_box :sidekiq_throttling_enabled, class: 'form-check-input'
+          = f.label :sidekiq_throttling_enabled, class: 'form-check-label' do
             Enable Sidekiq Job Throttling
           .form-text.text-muted
             Limit the amount of resources slow running jobs are assigned.
diff --git a/app/views/admin/application_settings/_ci_cd.html.haml b/app/views/admin/application_settings/_ci_cd.html.haml
index 6a06271de2a..233821818e6 100644
--- a/app/views/admin/application_settings/_ci_cd.html.haml
+++ b/app/views/admin/application_settings/_ci_cd.html.haml
@@ -5,8 +5,8 @@
     .form-group.row
       .offset-sm-2.col-sm-10
         .form-check
-          = f.label :auto_devops_enabled do
-            = f.check_box :auto_devops_enabled
+          = f.check_box :auto_devops_enabled, class: 'form-check-input'
+          = f.label :auto_devops_enabled, class: 'form-check-label' do
             Enabled Auto DevOps for projects by default
         .form-text.text-muted
           It will automatically build, test, and deploy applications based on a predefined CI/CD configuration
@@ -20,8 +20,8 @@
     .form-group.row
       .offset-sm-2.col-sm-10
         .form-check
-          = f.label :shared_runners_enabled do
-            = f.check_box :shared_runners_enabled
+          = f.check_box :shared_runners_enabled, class: 'form-check-input'
+          = f.label :shared_runners_enabled, class: 'form-check-label' do
             Enable shared runners for new projects
     .form-group.row
       = f.label :shared_runners_text, class: 'col-form-label col-sm-2'
diff --git a/app/views/admin/application_settings/_email.html.haml b/app/views/admin/application_settings/_email.html.haml
index 7443f02ad15..01be5878a60 100644
--- a/app/views/admin/application_settings/_email.html.haml
+++ b/app/views/admin/application_settings/_email.html.haml
@@ -5,8 +5,8 @@
     .form-group.row
       .offset-sm-2.col-sm-10
         .form-check
-          = f.label :email_author_in_body do
-            = f.check_box :email_author_in_body
+          = f.check_box :email_author_in_body, class: 'form-check-input'
+          = f.label :email_author_in_body, class: 'form-check-label' do
             Include author name in notification email body
           .form-text.text-muted
             Some email servers do not support overriding the email sender name.
@@ -15,8 +15,8 @@
     .form-group.row
       .offset-sm-2.col-sm-10
         .form-check
-          = f.label :html_emails_enabled do
-            = f.check_box :html_emails_enabled
+          = f.check_box :html_emails_enabled, class: 'form-check-input'
+          = f.label :html_emails_enabled, class: 'form-check-label' do
             Enable HTML emails
           .form-text.text-muted
             By default GitLab sends emails in HTML and plain text formats so mail
diff --git a/app/views/admin/application_settings/_help_page.html.haml b/app/views/admin/application_settings/_help_page.html.haml
index 97d397788c6..1f6c52d8b1a 100644
--- a/app/views/admin/application_settings/_help_page.html.haml
+++ b/app/views/admin/application_settings/_help_page.html.haml
@@ -10,8 +10,8 @@
     .form-group.row
       .offset-sm-2.col-sm-10
         .form-check
-          = f.label :help_page_hide_commercial_content do
-            = f.check_box :help_page_hide_commercial_content
+          = f.check_box :help_page_hide_commercial_content, class: 'form-check-input'
+          = f.label :help_page_hide_commercial_content, class: 'form-check-label' do
             Hide marketing-related entries from help
     .form-group.row
       = f.label :help_page_support_url, 'Support page URL', class: 'col-form-label col-sm-2'
diff --git a/app/views/admin/application_settings/_influx.html.haml b/app/views/admin/application_settings/_influx.html.haml
index e5d699f9a2f..b40a714ed8f 100644
--- a/app/views/admin/application_settings/_influx.html.haml
+++ b/app/views/admin/application_settings/_influx.html.haml
@@ -11,8 +11,8 @@
     .form-group.row
       .offset-sm-2.col-sm-10
         .form-check
-          = f.label :metrics_enabled do
-            = f.check_box :metrics_enabled
+          = f.check_box :metrics_enabled, class: 'form-check-input'
+          = f.label :metrics_enabled, class: 'form-check-label' do
             Enable InfluxDB Metrics
     .form-group.row
       = f.label :metrics_host, 'InfluxDB host', class: 'col-form-label col-sm-2'
diff --git a/app/views/admin/application_settings/_ip_limits.html.haml b/app/views/admin/application_settings/_ip_limits.html.haml
index 539ff9b5168..320dd52ffc2 100644
--- a/app/views/admin/application_settings/_ip_limits.html.haml
+++ b/app/views/admin/application_settings/_ip_limits.html.haml
@@ -5,8 +5,8 @@
     .form-group.row
       .offset-sm-2.col-sm-10
         .form-check
-          = f.label :throttle_unauthenticated_enabled do
-            = f.check_box :throttle_unauthenticated_enabled
+          = f.check_box :throttle_unauthenticated_enabled, class: 'form-check-input'
+          = f.label :throttle_unauthenticated_enabled, class: 'form-check-label' do
             Enable unauthenticated request rate limit
           %span.form-text.text-muted
             Helps reduce request volume (e.g. from crawlers or abusive bots)
@@ -21,8 +21,8 @@
     .form-group.row
       .offset-sm-2.col-sm-10
         .form-check
-          = f.label :throttle_authenticated_api_enabled do
-            = f.check_box :throttle_authenticated_api_enabled
+          = f.check_box :throttle_authenticated_api_enabled, class: 'form-check-input'
+          = f.label :throttle_authenticated_api_enabled, class: 'form-check-label' do
             Enable authenticated API request rate limit
           %span.form-text.text-muted
             Helps reduce request volume (e.g. from crawlers or abusive bots)
@@ -37,8 +37,8 @@
     .form-group.row
       .offset-sm-2.col-sm-10
         .form-check
-          = f.label :throttle_authenticated_web_enabled do
-            = f.check_box :throttle_authenticated_web_enabled
+          = f.check_box :throttle_authenticated_web_enabled, class: 'form-check-input'
+          = f.label :throttle_authenticated_web_enabled, class: 'form-check-label' do
             Enable authenticated web request rate limit
           %span.form-text.text-muted
             Helps reduce request volume (e.g. from crawlers or abusive bots)
diff --git a/app/views/admin/application_settings/_koding.html.haml b/app/views/admin/application_settings/_koding.html.haml
index 0532f49fd5b..341c7641fcc 100644
--- a/app/views/admin/application_settings/_koding.html.haml
+++ b/app/views/admin/application_settings/_koding.html.haml
@@ -5,8 +5,8 @@
     .form-group.row
       .offset-sm-2.col-sm-10
         .form-check
-          = f.label :koding_enabled do
-            = f.check_box :koding_enabled
+          = f.check_box :koding_enabled, class: 'form-check-input'
+          = f.label :koding_enabled, class: 'form-check-label' do
             Enable Koding
         .form-text.text-muted
           Koding integration has been deprecated since GitLab 10.0. If you disable your Koding integration, you will not be able to enable it again.
diff --git a/app/views/admin/application_settings/_logging.html.haml b/app/views/admin/application_settings/_logging.html.haml
index 4341801b045..f5c1e126c70 100644
--- a/app/views/admin/application_settings/_logging.html.haml
+++ b/app/views/admin/application_settings/_logging.html.haml
@@ -5,8 +5,8 @@
     .form-group.row
       .offset-sm-2.col-sm-10
         .form-check
-          = f.label :sentry_enabled do
-            = f.check_box :sentry_enabled
+          = f.check_box :sentry_enabled, class: 'form-check-input'
+          = f.label :sentry_enabled, class: 'form-check-label' do
             Enable Sentry
           .form-text.text-muted
             %p This setting requires a restart to take effect.
@@ -21,8 +21,8 @@
     .form-group.row
       .offset-sm-2.col-sm-10
         .form-check
-          = f.label :clientside_sentry_enabled do
-            = f.check_box :clientside_sentry_enabled
+          = f.check_box :clientside_sentry_enabled, class: 'form-check-input'
+          = f.label :clientside_sentry_enabled, class: 'form-check-label' do
             Enable Clientside Sentry
           .form-text.text-muted
             Sentry can also be used for reporting and logging clientside exceptions.
diff --git a/app/views/admin/application_settings/_outbound.html.haml b/app/views/admin/application_settings/_outbound.html.haml
index 176cdfe9e1a..5dadb7b814b 100644
--- a/app/views/admin/application_settings/_outbound.html.haml
+++ b/app/views/admin/application_settings/_outbound.html.haml
@@ -5,8 +5,8 @@
     .form-group.row
       .offset-sm-2.col-sm-10
         .form-check
-          = f.label :allow_local_requests_from_hooks_and_services do
-            = f.check_box :allow_local_requests_from_hooks_and_services
+          = f.check_box :allow_local_requests_from_hooks_and_services, class: 'form-check-input'
+          = f.label :allow_local_requests_from_hooks_and_services, class: 'form-check-label' do
             Allow requests to the local network from hooks and services
 
   = f.submit 'Save changes', class: "btn btn-success"
diff --git a/app/views/admin/application_settings/_pages.html.haml b/app/views/admin/application_settings/_pages.html.haml
index 0100ef038e2..f1889c3105f 100644
--- a/app/views/admin/application_settings/_pages.html.haml
+++ b/app/views/admin/application_settings/_pages.html.haml
@@ -10,8 +10,8 @@
     .form-group.row
       .offset-sm-2.col-sm-10
         .form-check
-          = f.label :pages_domain_verification_enabled do
-            = f.check_box :pages_domain_verification_enabled
+          = f.check_box :pages_domain_verification_enabled, class: 'form-check-input'
+          = f.label :pages_domain_verification_enabled, class: 'form-check-label' do
             Require users to prove ownership of custom domains
         .form-text.text-muted
           Domain verification is an essential security measure for public GitLab
diff --git a/app/views/admin/application_settings/_performance.html.haml b/app/views/admin/application_settings/_performance.html.haml
index 07d3a8b7cdf..57c22ce563f 100644
--- a/app/views/admin/application_settings/_performance.html.haml
+++ b/app/views/admin/application_settings/_performance.html.haml
@@ -5,8 +5,8 @@
     .form-group.row
       .offset-sm-2.col-sm-10
         .form-check
-          = f.label :authorized_keys_enabled do
-            = f.check_box :authorized_keys_enabled
+          = f.check_box :authorized_keys_enabled, class: 'form-check-input'
+          = f.label :authorized_keys_enabled, class: 'form-check-label' do
             Write to "authorized_keys" file
           .form-text.text-muted
             By default, we write to the "authorized_keys" file to support Git
diff --git a/app/views/admin/application_settings/_performance_bar.html.haml b/app/views/admin/application_settings/_performance_bar.html.haml
index 030e8610b47..ed4de2234f7 100644
--- a/app/views/admin/application_settings/_performance_bar.html.haml
+++ b/app/views/admin/application_settings/_performance_bar.html.haml
@@ -5,8 +5,8 @@
     .form-group.row
       .offset-sm-2.col-sm-10
         .form-check
-          = f.label :performance_bar_enabled do
-            = f.check_box :performance_bar_enabled
+          = f.check_box :performance_bar_enabled, class: 'form-check-input'
+          = f.label :performance_bar_enabled, class: 'form-check-label' do
             Enable the Performance Bar
     .form-group.row
       = f.label :performance_bar_allowed_group_path, 'Allowed group', class: 'col-form-label col-sm-2'
diff --git a/app/views/admin/application_settings/_plantuml.html.haml b/app/views/admin/application_settings/_plantuml.html.haml
index ee6d1d1a888..e0dc058762e 100644
--- a/app/views/admin/application_settings/_plantuml.html.haml
+++ b/app/views/admin/application_settings/_plantuml.html.haml
@@ -5,8 +5,8 @@
     .form-group.row
       .offset-sm-2.col-sm-10
         .form-check
-          = f.label :plantuml_enabled do
-            = f.check_box :plantuml_enabled
+          = f.check_box :plantuml_enabled, class: 'form-check-input'
+          = f.label :plantuml_enabled, class: 'form-check-label' do
             Enable PlantUML
     .form-group.row
       = f.label :plantuml_url, 'PlantUML URL', class: 'col-form-label col-sm-2'
diff --git a/app/views/admin/application_settings/_prometheus.html.haml b/app/views/admin/application_settings/_prometheus.html.haml
index 8c95597e787..d3c3656e96a 100644
--- a/app/views/admin/application_settings/_prometheus.html.haml
+++ b/app/views/admin/application_settings/_prometheus.html.haml
@@ -14,8 +14,8 @@
     .form-group.row
       .offset-sm-2.col-sm-10
         .form-check
-          = f.label :prometheus_metrics_enabled do
-            = f.check_box :prometheus_metrics_enabled
+          = f.check_box :prometheus_metrics_enabled, class: 'form-check-input'
+          = f.label :prometheus_metrics_enabled, class: 'form-check-label' do
             Enable Prometheus Metrics
           - unless Gitlab::Metrics.metrics_folder_present?
             .form-text.text-muted
diff --git a/app/views/admin/application_settings/_repository_check.html.haml b/app/views/admin/application_settings/_repository_check.html.haml
index 739ed359e16..1311f17ecda 100644
--- a/app/views/admin/application_settings/_repository_check.html.haml
+++ b/app/views/admin/application_settings/_repository_check.html.haml
@@ -7,8 +7,8 @@
       .form-group.row
         .offset-sm-2.col-sm-10
           .form-check
-            = f.label :repository_checks_enabled do
-              = f.check_box :repository_checks_enabled
+            = f.check_box :repository_checks_enabled, class: 'form-check-input'
+            = f.label :repository_checks_enabled, class: 'form-check-label' do
               Enable Repository Checks
             .form-text.text-muted
               GitLab will periodically run
@@ -25,8 +25,8 @@
       .form-group.row
         .offset-sm-2.col-sm-10
           .form-check
-            = f.label :housekeeping_enabled do
-              = f.check_box :housekeeping_enabled
+            = f.check_box :housekeeping_enabled, class: 'form-check-input'
+            = f.label :housekeeping_enabled, class: 'form-check-label' do
               Enable automatic repository housekeeping (git repack, git gc)
             .form-text.text-muted
               If you keep automatic housekeeping disabled for a long time Git
@@ -34,8 +34,8 @@
               repositories will use more disk space. We recommend to always leave
               this enabled.
           .form-check
-            = f.label :housekeeping_bitmaps_enabled do
-              = f.check_box :housekeeping_bitmaps_enabled
+            = f.check_box :housekeeping_bitmaps_enabled, class: 'form-check-input'
+            = f.label :housekeeping_bitmaps_enabled, class: 'form-check-label' do
               Enable Git pack file bitmap creation
             .form-text.text-muted
               Creating pack file bitmaps makes housekeeping take a little longer but
diff --git a/app/views/admin/application_settings/_repository_mirrors_form.html.haml b/app/views/admin/application_settings/_repository_mirrors_form.html.haml
index edd8e5e9eb8..1fa793e2ace 100644
--- a/app/views/admin/application_settings/_repository_mirrors_form.html.haml
+++ b/app/views/admin/application_settings/_repository_mirrors_form.html.haml
@@ -6,8 +6,8 @@
       = f.label :mirror_available, 'Enable mirror configuration', class: 'control-label col-sm-2'
       .col-sm-10
         .form-check
-          = f.label :mirror_available do
-            = f.check_box :mirror_available
+          = f.check_box :mirror_available, class: 'form-check-input'
+          = f.label :mirror_available, class: 'form-check-label' do
             Allow mirrors to be setup for projects
         %span.form-text.text-muted
           If disabled, only admins will be able to setup mirrors in projects.
diff --git a/app/views/admin/application_settings/_repository_storage.html.haml b/app/views/admin/application_settings/_repository_storage.html.haml
index be85210934c..89d2c114b22 100644
--- a/app/views/admin/application_settings/_repository_storage.html.haml
+++ b/app/views/admin/application_settings/_repository_storage.html.haml
@@ -6,8 +6,8 @@
       .form-group.row
         .offset-sm-2.col-sm-10
           .form-check
-            = f.label :hashed_storage_enabled do
-              = f.check_box :hashed_storage_enabled
+            = f.check_box :hashed_storage_enabled, class: 'form-check-input'
+            = f.label :hashed_storage_enabled, class: 'form-check-label' do
               Create new projects using hashed storage paths
             .form-text.text-muted
               Enable immutable, hash-based paths and repository names to store repositories on disk. This prevents
diff --git a/app/views/admin/application_settings/_signin.html.haml b/app/views/admin/application_settings/_signin.html.haml
index 83a30504222..2ba26158162 100644
--- a/app/views/admin/application_settings/_signin.html.haml
+++ b/app/views/admin/application_settings/_signin.html.haml
@@ -5,16 +5,16 @@
     .form-group.row
       .offset-sm-2.col-sm-10
         .form-check
-          = f.label :password_authentication_enabled_for_web do
-            = f.check_box :password_authentication_enabled_for_web
+          = f.check_box :password_authentication_enabled_for_web, class: 'form-check-input'
+          = f.label :password_authentication_enabled_for_web, class: 'form-check-label' do
             Password authentication enabled for web interface
             .form-text.text-muted
               When disabled, an external authentication provider must be used.
     .form-group.row
       .offset-sm-2.col-sm-10
         .form-check
-          = f.label :password_authentication_enabled_for_git do
-            = f.check_box :password_authentication_enabled_for_git
+          = f.check_box :password_authentication_enabled_for_git, class: 'form-check-input'
+          = f.label :password_authentication_enabled_for_git, class: 'form-check-label' do
             Password authentication enabled for Git over HTTP(S)
             .form-text.text-muted
               When disabled, a Personal Access Token
@@ -33,8 +33,8 @@
       = f.label :two_factor_authentication, 'Two-factor authentication', class: 'col-form-label col-sm-2'
       .col-sm-10
         .form-check
-          = f.label :require_two_factor_authentication do
-            = f.check_box :require_two_factor_authentication
+          = f.check_box :require_two_factor_authentication, class: 'form-check-input'
+          = f.label :require_two_factor_authentication, class: 'form-check-label' do
             Require all users to setup Two-factor authentication
     .form-group.row
       = f.label :two_factor_authentication, 'Two-factor grace period (hours)', class: 'col-form-label col-sm-2'
diff --git a/app/views/admin/application_settings/_signup.html.haml b/app/views/admin/application_settings/_signup.html.haml
index 50c455f8686..279f96389e9 100644
--- a/app/views/admin/application_settings/_signup.html.haml
+++ b/app/views/admin/application_settings/_signup.html.haml
@@ -5,14 +5,14 @@
     .form-group.row
       .offset-sm-2.col-sm-10
         .form-check
-          = f.label :signup_enabled do
-            = f.check_box :signup_enabled
+          = f.check_box :signup_enabled, class: 'form-check-input'
+          = f.label :signup_enabled, class: 'form-check-label' do
             Sign-up enabled
     .form-group.row
       .offset-sm-2.col-sm-10
         .form-check
-          = f.label :send_user_confirmation_email do
-            = f.check_box :send_user_confirmation_email
+          = f.check_box :send_user_confirmation_email, class: 'form-check-input'
+          = f.label :send_user_confirmation_email, class: 'form-check-label' do
             Send confirmation email on sign-up
     .form-group.row
       = f.label :domain_whitelist, 'Whitelisted domains for sign-ups', class: 'col-form-label col-sm-2'
@@ -23,19 +23,19 @@
       = f.label :domain_blacklist_enabled, 'Domain Blacklist', class: 'col-form-label col-sm-2'
       .col-sm-10
         .form-check
-          = f.label :domain_blacklist_enabled do
-            = f.check_box :domain_blacklist_enabled
+          = f.check_box :domain_blacklist_enabled, class: 'form-check-input'
+          = f.label :domain_blacklist_enabled, class: 'form-check-label' do
             Enable domain blacklist for sign ups
     .form-group.row
       .offset-sm-2.col-sm-10
         .form-check
-          = label_tag :blacklist_type_file do
-            = radio_button_tag :blacklist_type, :file
+          = radio_button_tag :blacklist_type, :file, class: 'form-check-input'
+          = label_tag :blacklist_type_file, class: 'form-check-label' do
             .option-title
               Upload blacklist file
         .form-check
-          = label_tag :blacklist_type_raw do
-            = radio_button_tag :blacklist_type, :raw, @application_setting.domain_blacklist.present? || @application_setting.domain_blacklist.blank?
+          = radio_button_tag :blacklist_type, :raw, @application_setting.domain_blacklist.present? || @application_setting.domain_blacklist.blank?, class: 'form-check-input'
+          = label_tag :blacklist_type_raw, class: 'form-check-label' do
             .option-title
               Enter blacklist manually
     .form-group.row.blacklist-file
diff --git a/app/views/admin/application_settings/_spam.html.haml b/app/views/admin/application_settings/_spam.html.haml
index 58543a0359a..fb38e4ae922 100644
--- a/app/views/admin/application_settings/_spam.html.haml
+++ b/app/views/admin/application_settings/_spam.html.haml
@@ -5,8 +5,8 @@
     .form-group.row
       .offset-sm-2.col-sm-10
         .form-check
-          = f.label :recaptcha_enabled do
-            = f.check_box :recaptcha_enabled
+          = f.check_box :recaptcha_enabled, class: 'form-check-input'
+          = f.label :recaptcha_enabled, class: 'form-check-label' do
             Enable reCAPTCHA
           %span.form-text.text-muted#recaptcha_help_block Helps prevent bots from creating accounts
 
@@ -26,8 +26,8 @@
     .form-group.row
       .offset-sm-2.col-sm-10
         .form-check
-          = f.label :akismet_enabled do
-            = f.check_box :akismet_enabled
+          = f.check_box :akismet_enabled, class: 'form-check-input'
+          = f.label :akismet_enabled, class: 'form-check-label' do
             Enable Akismet
           %span.form-text.text-muted#akismet_help_block Helps prevent bots from creating issues
 
@@ -42,8 +42,8 @@
     .form-group.row
       .offset-sm-2.col-sm-10
         .form-check
-          = f.label :unique_ips_limit_enabled do
-            = f.check_box :unique_ips_limit_enabled
+          = f.check_box :unique_ips_limit_enabled, class: 'form-check-input'
+          = f.label :unique_ips_limit_enabled, class: 'form-check-label' do
             Limit sign in from multiple ips
           %span.form-text.text-muted#unique_ip_help_block
             Helps prevent malicious users hide their activity
diff --git a/app/views/admin/application_settings/_terms.html.haml b/app/views/admin/application_settings/_terms.html.haml
index 44bf7b65a8e..325ca1ac003 100644
--- a/app/views/admin/application_settings/_terms.html.haml
+++ b/app/views/admin/application_settings/_terms.html.haml
@@ -5,8 +5,8 @@
     .form-group
       .col-sm-12
         .form-check
-          = f.label :enforce_terms do
-            = f.check_box :enforce_terms
+          = f.check_box :enforce_terms, class: 'form-check-input'
+          = f.label :enforce_terms, class: 'form-check-label' do
             = _("Require all users to accept Terms of Service when they access GitLab.")
           .form-text.text-muted
             = _("When enabled, users cannot use GitLab until the terms have been accepted.")
diff --git a/app/views/admin/application_settings/_usage.html.haml b/app/views/admin/application_settings/_usage.html.haml
index 316c8b04dea..c110fd4d60d 100644
--- a/app/views/admin/application_settings/_usage.html.haml
+++ b/app/views/admin/application_settings/_usage.html.haml
@@ -5,8 +5,8 @@
     .form-group.row
       .offset-sm-2.col-sm-10
         .form-check
-          = f.label :version_check_enabled do
-            = f.check_box :version_check_enabled
+          = f.check_box :version_check_enabled, class: 'form-check-input'
+          = f.label :version_check_enabled, class: 'form-check-label' do
             Enable version check
           .form-text.text-muted
             GitLab will inform you if a new version is available.
@@ -16,8 +16,8 @@
       .offset-sm-2.col-sm-10
         - can_be_configured = @application_setting.usage_ping_can_be_configured?
         .form-check
-          = f.label :usage_ping_enabled do
-            = f.check_box :usage_ping_enabled, disabled: !can_be_configured
+          = f.check_box :usage_ping_enabled, disabled: !can_be_configured, class: 'form-check-input'
+          = f.label :usage_ping_enabled, class: 'form-check-label' do
             Enable usage ping
           .form-text.text-muted
             - if can_be_configured
diff --git a/app/views/admin/application_settings/_visibility_and_access.html.haml b/app/views/admin/application_settings/_visibility_and_access.html.haml
index 0f2524047e3..2b4d3bab54d 100644
--- a/app/views/admin/application_settings/_visibility_and_access.html.haml
+++ b/app/views/admin/application_settings/_visibility_and_access.html.haml
@@ -46,8 +46,8 @@
     .form-group.row
       .offset-sm-2.col-sm-10
         .form-check
-          = f.label :project_export_enabled do
-            = f.check_box :project_export_enabled
+          = f.check_box :project_export_enabled, class: 'form-check-input'
+          = f.label :project_export_enabled, class: 'form-check-label' do
             Project export enabled
 
     .form-group.row
diff --git a/app/views/admin/hooks/_form.html.haml b/app/views/admin/hooks/_form.html.haml
index e54dbd20ef4..3abde755f0f 100644
--- a/app/views/admin/hooks/_form.html.haml
+++ b/app/views/admin/hooks/_form.html.haml
@@ -47,6 +47,6 @@
 .form-group
   = form.label :enable_ssl_verification, 'SSL verification', class: 'label-light checkbox'
   .form-check
-    = form.label :enable_ssl_verification do
-      = form.check_box :enable_ssl_verification
+    = form.check_box :enable_ssl_verification, class: 'form-check-input'
+    = form.label :enable_ssl_verification, class: 'form-check-label' do
       %strong Enable SSL verification
diff --git a/app/views/groups/_create_chat_team.html.haml b/app/views/groups/_create_chat_team.html.haml
index 9a3ff0313b5..f950968030f 100644
--- a/app/views/groups/_create_chat_team.html.haml
+++ b/app/views/groups/_create_chat_team.html.haml
@@ -5,8 +5,8 @@
     Mattermost
   .col-sm-10
     .form-check.js-toggle-container
-      = f.label :create_chat_team do
-        .js-toggle-button= f.check_box(:create_chat_team, { checked: true }, true, false)
+      .js-toggle-button.form-check-input= f.check_box(:create_chat_team, { checked: true }, true, false)
+      = f.label :create_chat_team, class: 'form-check-label' do
         Create a Mattermost team for this group
       %br
       %small.light.js-toggle-content
diff --git a/app/views/groups/_group_admin_settings.html.haml b/app/views/groups/_group_admin_settings.html.haml
index 3cd3fb32b9c..f7cc62c6929 100644
--- a/app/views/groups/_group_admin_settings.html.haml
+++ b/app/views/groups/_group_admin_settings.html.haml
@@ -2,8 +2,8 @@
   = f.label :lfs_enabled, 'Large File Storage', class: 'col-form-label col-sm-2'
   .col-sm-10
     .form-check
-      = f.label :lfs_enabled do
-        = f.check_box :lfs_enabled, checked: @group.lfs_enabled?
+      = f.check_box :lfs_enabled, checked: @group.lfs_enabled?, class: 'form-check-input'
+      = f.label :lfs_enabled, class: 'form-check-label' do
         %strong
           Allow projects within this group to use Git LFS
           = link_to icon('question-circle'), help_page_path('workflow/lfs/manage_large_binaries_with_git_lfs')
@@ -14,8 +14,8 @@
   = f.label :require_two_factor_authentication, 'Two-factor authentication', class: 'col-form-label col-sm-2'
   .col-sm-10
     .form-check
-      = f.label :require_two_factor_authentication do
-        = f.check_box :require_two_factor_authentication
+      = f.check_box :require_two_factor_authentication, class: 'form-check-input'
+      = f.label :require_two_factor_authentication, class: 'form-check-label' do
         %strong
           Require all users in this group to setup Two-factor authentication
           = link_to icon('question-circle'), help_page_path('security/two_factor_authentication', anchor: 'enforcing-2fa-for-all-users-in-a-group')
diff --git a/app/views/groups/settings/_permissions.html.haml b/app/views/groups/settings/_permissions.html.haml
index 15a5ecf791c..f1f67af1d1e 100644
--- a/app/views/groups/settings/_permissions.html.haml
+++ b/app/views/groups/settings/_permissions.html.haml
@@ -13,8 +13,8 @@
         = s_('GroupSettings|Share with group lock')
       .col-sm-10
         .form-check
-          = f.label :share_with_group_lock do
-            = f.check_box :share_with_group_lock, disabled: !can_change_share_with_group_lock?(@group)
+          = f.check_box :share_with_group_lock, disabled: !can_change_share_with_group_lock?(@group), class: 'form-check-input'
+          = f.label :share_with_group_lock, class: 'form-check-label' do
             %strong
               - group_link = link_to @group.name, group_path(@group)
               = s_('GroupSettings|Prevent sharing a project within %{group} with other groups').html_safe % { group: group_link }
diff --git a/app/views/help/ui.html.haml b/app/views/help/ui.html.haml
index a06db85ef6f..de8369ed7b9 100644
--- a/app/views/help/ui.html.haml
+++ b/app/views/help/ui.html.haml
@@ -472,8 +472,8 @@
       .form-group.row
         .offset-sm-2.col-sm-10
           .form-check
-            %label
-              %input{ :type => "checkbox" }/
+            %input.form-check-input{ :type => "checkbox" }/
+            %label.form-check-label
               Remember me
       .form-group.row
         .offset-sm-2.col-sm-10
@@ -492,8 +492,8 @@
         %label{ :for => "exampleInputPassword1" } Password
         %input#exampleInputPassword1.form-control{ :placeholder => "Password", :type => "password" }/
       .form-check
-        %label
-          %input{ :type => "checkbox" }/
+        %input.form-check-input{ :type => "checkbox" }/
+        %label.form-check-label
           Remember me
       %button.btn.btn-default{ :type => "submit" } Sign in
 
diff --git a/app/views/projects/_merge_request_merge_method_settings.html.haml b/app/views/projects/_merge_request_merge_method_settings.html.haml
index c75edbb9739..3bb220ac6d0 100644
--- a/app/views/projects/_merge_request_merge_method_settings.html.haml
+++ b/app/views/projects/_merge_request_merge_method_settings.html.haml
@@ -5,16 +5,16 @@
   = label_tag :merge_method_merge, class: 'label-light' do
     Merge method
   .form-check
-    = label_tag :project_merge_method_merge do
-      = form.radio_button :merge_method, :merge, class: "js-merge-method-radio"
+    = form.radio_button :merge_method, :merge, class: "js-merge-method-radio form-check-input"
+    = label_tag :project_merge_method_merge, class: 'form-check-label' do
       %strong Merge commit
       %br
       %span.descr
         A merge commit is created for every merge, and merging is allowed as long as there are no conflicts.
 
   .form-check
-    = label_tag :project_merge_method_rebase_merge do
-      = form.radio_button :merge_method, :rebase_merge, class: "js-merge-method-radio"
+    = form.radio_button :merge_method, :rebase_merge, class: "js-merge-method-radio form-check-input"
+    = label_tag :project_merge_method_rebase_merge, class: 'form-check-label' do
       %strong Merge commit with semi-linear history
       %br
       %span.descr
@@ -25,8 +25,8 @@
         When fast-forward merge is not possible, the user is given the option to rebase.
 
   .form-check
-    = label_tag :project_merge_method_ff do
-      = form.radio_button :merge_method, :ff, class: "js-merge-method-radio qa-radio-button-merge-ff"
+    = form.radio_button :merge_method, :ff, class: "js-merge-method-radio qa-radio-button-merge-ff form-check-input"
+    = label_tag :project_merge_method_ff, class: 'form-check-label' do
       %strong Fast-forward merge
       %br
       %span.descr
diff --git a/app/views/projects/_merge_request_merge_settings.html.haml b/app/views/projects/_merge_request_merge_settings.html.haml
index 762a263656d..f178c94e008 100644
--- a/app/views/projects/_merge_request_merge_settings.html.haml
+++ b/app/views/projects/_merge_request_merge_settings.html.haml
@@ -2,22 +2,22 @@
 
 .form-group
   .form-check.builds-feature{ class: ("hidden" if @project && @project.project_feature.send(:builds_access_level) == 0) }
-    = form.label :only_allow_merge_if_pipeline_succeeds do
-      = form.check_box :only_allow_merge_if_pipeline_succeeds
+    = form.check_box :only_allow_merge_if_pipeline_succeeds, class: 'form-check-input'
+    = form.label :only_allow_merge_if_pipeline_succeeds, class: 'form-check-label' do
       %strong Only allow merge requests to be merged if the pipeline succeeds
       %br
       %span.descr
         Pipelines need to be configured to enable this feature.
         = link_to icon('question-circle'), help_page_path('user/project/merge_requests/merge_when_pipeline_succeeds', anchor: 'only-allow-merge-requests-to-be-merged-if-the-pipeline-succeeds'), target: '_blank'
   .form-check
-    = form.label :only_allow_merge_if_all_discussions_are_resolved do
-      = form.check_box :only_allow_merge_if_all_discussions_are_resolved
+    = form.check_box :only_allow_merge_if_all_discussions_are_resolved, class: 'form-check-input'
+    = form.label :only_allow_merge_if_all_discussions_are_resolved, class: 'form-check-label' do
       %strong Only allow merge requests to be merged if all discussions are resolved
   .form-check
-    = form.label :resolve_outdated_diff_discussions do
-      = form.check_box :resolve_outdated_diff_discussions
+    = form.check_box :resolve_outdated_diff_discussions, class: 'form-check-input'
+    = form.label :resolve_outdated_diff_discussions, class: 'form-check-label' do
       %strong Automatically resolve merge request diff discussions when they become outdated
   .form-check
-    = form.label :printing_merge_request_link_enabled do
-      = form.check_box :printing_merge_request_link_enabled
+    = form.check_box :printing_merge_request_link_enabled, class: 'form-check-input'
+    = form.label :printing_merge_request_link_enabled, class: 'form-check-label' do
       %strong Show link to create/view merge request when pushing from the command line
diff --git a/app/views/projects/network/show.html.haml b/app/views/projects/network/show.html.haml
index 75cb8245d36..2d3f9116703 100644
--- a/app/views/projects/network/show.html.haml
+++ b/app/views/projects/network/show.html.haml
@@ -10,8 +10,8 @@
           = icon('search')
         .inline.prepend-left-20
           .form-check.light
-            = label_tag :filter_ref do
-              = check_box_tag :filter_ref, 1, @options[:filter_ref]
+            = check_box_tag :filter_ref, 1, @options[:filter_ref], class: 'form-check-input'
+            = label_tag :filter_ref, class: 'form-check-label' do
               %span= _("Begin with the selected commit")
 
     - if @commit
diff --git a/app/views/projects/settings/ci_cd/_autodevops_form.html.haml b/app/views/projects/settings/ci_cd/_autodevops_form.html.haml
index 414df15feeb..bbabb98dafe 100644
--- a/app/views/projects/settings/ci_cd/_autodevops_form.html.haml
+++ b/app/views/projects/settings/ci_cd/_autodevops_form.html.haml
@@ -11,22 +11,22 @@
               = message.html_safe
           = f.fields_for :auto_devops_attributes, @auto_devops do |form|
             .form-check
-              = form.label :enabled_true do
-                = form.radio_button :enabled, 'true'
+              = form.radio_button :enabled, 'true', class: 'form-check-input'
+              = form.label :enabled_true, class: 'form-check-label' do
                 %strong= s_('CICD|Enable Auto DevOps')
                 %br
                 = s_('CICD|The Auto DevOps pipeline configuration will be used when there is no %{ci_file} in the project.').html_safe % { ci_file: ci_file_formatted }
 
             .form-check
-              = form.label :enabled_false do
-                = form.radio_button :enabled, 'false'
+              = form.radio_button :enabled, 'false', class: 'form-check-input'
+              = form.label :enabled_false, class: 'form-check-label' do
                 %strong= s_('CICD|Disable Auto DevOps')
                 %br
                 = s_('CICD|An explicit %{ci_file} needs to be specified before you can begin using Continuous Integration and Delivery.').html_safe % { ci_file: ci_file_formatted }
 
             .form-check
-              = form.label :enabled_ do
-                = form.radio_button :enabled, ''
+              = form.radio_button :enabled, '', class: 'form-check-input'
+              = form.label :enabled_, class: 'form-check-label' do
                 %strong= s_('CICD|Instance default (%{state})') % { state: "#{Gitlab::CurrentSettings.auto_devops_enabled? ? _('enabled') : _('disabled')}" }
                 %br
                 = s_('CICD|Follow the instance default to either have Auto DevOps enabled or disabled when there is no project specific %{ci_file}.').html_safe % { ci_file: ci_file_formatted }
diff --git a/app/views/projects/settings/ci_cd/_form.html.haml b/app/views/projects/settings/ci_cd/_form.html.haml
index 50175f5258c..e93b240a007 100644
--- a/app/views/projects/settings/ci_cd/_form.html.haml
+++ b/app/views/projects/settings/ci_cd/_form.html.haml
@@ -20,15 +20,15 @@
             Choose between <code>clone</code> or <code>fetch</code> to get the recent application code
             = link_to icon('question-circle'), help_page_path('user/project/pipelines/settings', anchor: 'git-strategy'), target: '_blank'
           .form-check
-            = f.label :build_allow_git_fetch_false do
-              = f.radio_button :build_allow_git_fetch, 'false'
+            = f.radio_button :build_allow_git_fetch, 'false', { class: 'form-check-input' }
+            = f.label :build_allow_git_fetch_false, class: 'form-check-label' do
               %strong git clone
               %br
               %span.descr
                 Slower but makes sure the project workspace is pristine as it clones the repository from scratch for every job
           .form-check
-            = f.label :build_allow_git_fetch_true do
-              = f.radio_button :build_allow_git_fetch, 'true'
+            = f.radio_button :build_allow_git_fetch, 'true', { class: 'form-check-input' }
+            = f.label :build_allow_git_fetch_true, class: 'form-check-label' do
               %strong git fetch
               %br
               %span.descr
@@ -53,8 +53,8 @@
         %hr
         .form-group
           .form-check
-            = f.label :public_builds do
-              = f.check_box :public_builds
+            = f.check_box :public_builds, { class: 'form-check-input' }
+            = f.label :public_builds, class: 'form-check-label' do
               %strong Public pipelines
             .form-text.text-muted
               Allow public access to pipelines and job details, including output logs and artifacts
@@ -75,8 +75,8 @@
         %hr
         .form-group
           .form-check
-            = f.label :auto_cancel_pending_pipelines do
-              = f.check_box :auto_cancel_pending_pipelines, {}, 'enabled', 'disabled'
+            = f.check_box :auto_cancel_pending_pipelines, { class: 'form-check-input' }, 'enabled', 'disabled'
+            = f.label :auto_cancel_pending_pipelines, class: 'form-check-label' do
               %strong Auto-cancel redundant, pending pipelines
             .form-text.text-muted
               New pipelines will cancel older, pending pipelines on the same branch
diff --git a/app/views/shared/_allow_request_access.html.haml b/app/views/shared/_allow_request_access.html.haml
index 0e698570d7d..92268e74b1e 100644
--- a/app/views/shared/_allow_request_access.html.haml
+++ b/app/views/shared/_allow_request_access.html.haml
@@ -1,6 +1,6 @@
 .form-check
-  = form.label :request_access_enabled do
-    = form.check_box :request_access_enabled
+  = form.check_box :request_access_enabled, class: 'form-check-input'
+  = form.label :request_access_enabled, class: 'form-check-label' do
     %strong Allow users to request access
     %br
     %span.descr Allow users to request access if visibility is public or internal.
diff --git a/app/views/shared/_new_merge_request_checkbox.html.haml b/app/views/shared/_new_merge_request_checkbox.html.haml
index 8dbdf63f9f4..165109b6b70 100644
--- a/app/views/shared/_new_merge_request_checkbox.html.haml
+++ b/app/views/shared/_new_merge_request_checkbox.html.haml
@@ -1,7 +1,7 @@
 .form-check
   - nonce = SecureRandom.hex
-  = label_tag "create_merge_request-#{nonce}" do
-    = check_box_tag 'create_merge_request', 1, true, class: 'js-create-merge-request', id: "create_merge_request-#{nonce}"
+  = check_box_tag 'create_merge_request', 1, true, class: 'js-create-merge-request form-check-input', id: "create_merge_request-#{nonce}"
+  = label_tag "create_merge_request-#{nonce}", class: 'form-check-label' do
     - translation_variables = { new_merge_request: "<strong>#{_('new merge request')}</strong>" }
     - translation = _('Start a %{new_merge_request} with these changes') % translation_variables
     #{ translation.html_safe }
diff --git a/app/views/shared/_visibility_radios.html.haml b/app/views/shared/_visibility_radios.html.haml
index bdf550cd8b6..dd6b9cce58e 100644
--- a/app/views/shared/_visibility_radios.html.haml
+++ b/app/views/shared/_visibility_radios.html.haml
@@ -2,9 +2,9 @@
   - disallowed = disallowed_visibility_level?(form_model, level)
   - restricted = restricted_visibility_levels.include?(level)
   - disabled = disallowed || restricted
-  .form-check.pl-0{ class: [('disabled' if disabled), ('restricted' if restricted)] }
-    = form.label "#{model_method}_#{level}" do
-      = form.radio_button model_method, level, checked: (selected_level == level), disabled: disabled
+  .form-check{ class: [('disabled' if disabled), ('restricted' if restricted)] }
+    = form.radio_button model_method, level, checked: (selected_level == level), disabled: disabled, class: 'form-check-input'
+    = form.label "#{model_method}_#{level}", class: 'form-check-label' do
       = visibility_level_icon(level)
       .option-title
         = visibility_level_label(level)
diff --git a/app/views/shared/issuable/_form.html.haml b/app/views/shared/issuable/_form.html.haml
index fbc608b207a..8497e3220ee 100644
--- a/app/views/shared/issuable/_form.html.haml
+++ b/app/views/shared/issuable/_form.html.haml
@@ -23,8 +23,8 @@
   .form-group.row
     .offset-sm-2.col-sm-10
       .form-check
-        = form.label :confidential do
-          = form.check_box :confidential
+        = form.check_box :confidential, class: 'form-check-input'
+        = form.label :confidential, class: 'form-check-label' do
           This issue is confidential and should only be visible to team members with at least Reporter access.
 
 = render 'shared/issuable/form/metadata', issuable: issuable, form: form
diff --git a/app/views/shared/issuable/form/_contribution.html.haml b/app/views/shared/issuable/form/_contribution.html.haml
index f12c23cbc64..b34549240e0 100644
--- a/app/views/shared/issuable/form/_contribution.html.haml
+++ b/app/views/shared/issuable/form/_contribution.html.haml
@@ -12,8 +12,8 @@
     = _('Contribution')
   .col-sm-10
     .form-check
-      = form.label :allow_maintainer_to_push do
-        = form.check_box :allow_maintainer_to_push, disabled: !issuable.can_allow_maintainer_to_push?(current_user)
+      = form.check_box :allow_maintainer_to_push, disabled: !issuable.can_allow_maintainer_to_push?(current_user), class: 'form-check-input'
+      = form.label :allow_maintainer_to_push, class: 'form-check-label' do
         = _('Allow edits from maintainers.')
         = link_to 'About this feature', help_page_path('user/project/merge_requests/maintainer_access')
         .form-text.text-muted
diff --git a/app/views/shared/issuable/form/_merge_params.html.haml b/app/views/shared/issuable/form/_merge_params.html.haml
index 90fbf19e843..44564f8a3e0 100644
--- a/app/views/shared/issuable/form/_merge_params.html.haml
+++ b/app/views/shared/issuable/form/_merge_params.html.haml
@@ -11,16 +11,16 @@
   .col-sm-10.offset-sm-2
     - if issuable.can_remove_source_branch?(current_user)
       .form-check
-        = label_tag 'merge_request[force_remove_source_branch]' do
-          = hidden_field_tag 'merge_request[force_remove_source_branch]', '0', id: nil
-          = check_box_tag 'merge_request[force_remove_source_branch]', '1', issuable.force_remove_source_branch?
+        = hidden_field_tag 'merge_request[force_remove_source_branch]', '0', id: nil
+        = check_box_tag 'merge_request[force_remove_source_branch]', '1', issuable.force_remove_source_branch?, class: 'form-check-input'
+        = label_tag 'merge_request[force_remove_source_branch]', class: 'form-check-label' do
           Remove source branch when merge request is accepted.
 
 .form-group
   .col-sm-10.col-sm-offset-2
-    .checkbox
-      = label_tag 'merge_request[squash]' do
-        = hidden_field_tag 'merge_request[squash]', '0', id: nil
-        = check_box_tag 'merge_request[squash]', '1', issuable.squash
+    .form-check
+      = hidden_field_tag 'merge_request[squash]', '0', id: nil
+      = check_box_tag 'merge_request[squash]', '1', issuable.squash, class: 'form-check-input'
+      = label_tag 'merge_request[squash]', class: 'form-check-label' do
         Squash commits when merge request is accepted.
         = link_to 'About this feature', help_page_path('user/project/merge_requests/squash_and_merge')
diff --git a/app/views/shared/notifications/_custom_notifications.html.haml b/app/views/shared/notifications/_custom_notifications.html.haml
index d830225d169..51d912b4a66 100644
--- a/app/views/shared/notifications/_custom_notifications.html.haml
+++ b/app/views/shared/notifications/_custom_notifications.html.haml
@@ -23,8 +23,8 @@
                   - field_id = "#{notifications_menu_identifier("modal", notification_setting)}_notification_setting[#{event}]"
                   .form-group
                     .form-check{ class: ("prepend-top-0" if index == 0) }
-                      %label{ for: field_id }
-                        = check_box("notification_setting", event, id: field_id, class: "js-custom-notification-event", checked: notification_setting.public_send(event))
+                      = check_box("notification_setting", event, id: field_id, class: "js-custom-notification-event form-check-input", checked: notification_setting.public_send(event))
+                      %label.form-check-label{ for: field_id }
                         %strong
                           = notification_event_name(event)
                           = icon("spinner spin", class: "custom-notification-event-loading")
diff --git a/app/views/shared/runners/_form.html.haml b/app/views/shared/runners/_form.html.haml
index 660123d8b07..0337680d79b 100644
--- a/app/views/shared/runners/_form.html.haml
+++ b/app/views/shared/runners/_form.html.haml
@@ -4,26 +4,26 @@
     = label :active, "Active", class: 'col-form-label col-sm-2'
     .col-sm-10
       .form-check
-        = f.check_box :active
+        = f.check_box :active, { class: 'form-check-input' }
         %span.light Paused Runners don't accept new jobs
   .form-group.row
     = label :protected, "Protected", class: 'col-form-label col-sm-2'
     .col-sm-10
       .form-check
-        = f.check_box :access_level, {}, 'ref_protected', 'not_protected'
+        = f.check_box :access_level, { class: 'form-check-input' }, 'ref_protected', 'not_protected'
         %span.light This runner will only run on pipelines triggered on protected branches
   .form-group.row
     = label :run_untagged, 'Run untagged jobs', class: 'col-form-label col-sm-2'
     .col-sm-10
       .form-check
-        = f.check_box :run_untagged
+        = f.check_box :run_untagged, { class: 'form-check-input' }
         %span.light Indicates whether this runner can pick jobs without tags
   - unless runner.group_type?
     .form-group.row
       = label :locked, _('Lock to current projects'), class: 'col-form-label col-sm-2'
       .col-sm-10
         .form-check
-          = f.check_box :locked
+          = f.check_box :locked, { class: 'form-check-input' }
           %span.light= _('When a runner is locked, it cannot be assigned to other projects')
   .form-group.row
     = label_tag :token, class: 'col-form-label col-sm-2' do
diff --git a/app/views/shared/web_hooks/_form.html.haml b/app/views/shared/web_hooks/_form.html.haml
index 0d1c007dd78..660769fa50d 100644
--- a/app/views/shared/web_hooks/_form.html.haml
+++ b/app/views/shared/web_hooks/_form.html.haml
@@ -10,80 +10,70 @@
     Use this token to validate received payloads. It will be sent with the request in the X-Gitlab-Token HTTP header.
 .form-group
   = form.label :url, 'Trigger', class: 'label-light'
-  %ul.list-unstyled
+  %ul.list-unstyled.prepend-left-20
     %li
-      = form.check_box :push_events, class: 'float-left'
-      .prepend-left-20
-        = form.label :push_events, class: 'list-label' do
-          %strong Push events
-        %p.light
-          This URL will be triggered by a push to the repository
+      = form.check_box :push_events, class: 'form-check-input'
+      = form.label :push_events, class: 'list-label form-check-label ml-1' do
+        %strong Push events
+      %p.light.ml-1
+        This URL will be triggered by a push to the repository
     %li
-      = form.check_box :tag_push_events, class: 'float-left'
-      .prepend-left-20
-        = form.label :tag_push_events, class: 'list-label' do
-          %strong Tag push events
-        %p.light
-          This URL will be triggered when a new tag is pushed to the repository
+      = form.check_box :tag_push_events, class: 'form-check-input'
+      = form.label :tag_push_events, class: 'list-label form-check-label ml-1' do
+        %strong Tag push events
+      %p.light.ml-1
+        This URL will be triggered when a new tag is pushed to the repository
     %li
-      = form.check_box :note_events, class: 'float-left'
-      .prepend-left-20
-        = form.label :note_events, class: 'list-label' do
-          %strong Comments
-        %p.light
-          This URL will be triggered when someone adds a comment
+      = form.check_box :note_events, class: 'form-check-input'
+      = form.label :note_events, class: 'list-label form-check-label ml-1' do
+        %strong Comments
+      %p.light.ml-1
+        This URL will be triggered when someone adds a comment
     %li
-      = form.check_box :confidential_note_events, class: 'float-left'
-      .prepend-left-20
-        = form.label :confidential_note_events, class: 'list-label' do
-          %strong Confidential Comments
-        %p.light
-          This URL will be triggered when someone adds a comment on a confidential issue
+      = form.check_box :confidential_note_events, class: 'form-check-input'
+      = form.label :confidential_note_events, class: 'list-label form-check-label ml-1' do
+        %strong Confidential Comments
+      %p.light.ml-1
+        This URL will be triggered when someone adds a comment on a confidential issue
     %li
-      = form.check_box :issues_events, class: 'float-left'
-      .prepend-left-20
-        = form.label :issues_events, class: 'list-label' do
-          %strong Issues events
-        %p.light
-          This URL will be triggered when an issue is created/updated/merged
+      = form.check_box :issues_events, class: 'form-check-input'
+      = form.label :issues_events, class: 'list-label form-check-label ml-1' do
+        %strong Issues events
+      %p.light.ml-1
+        This URL will be triggered when an issue is created/updated/merged
     %li
-      = form.check_box :confidential_issues_events, class: 'float-left'
-      .prepend-left-20
-        = form.label :confidential_issues_events, class: 'list-label' do
-          %strong Confidential Issues events
-        %p.light
-          This URL will be triggered when a confidential issue is created/updated/merged
+      = form.check_box :confidential_issues_events, class: 'form-check-input'
+      = form.label :confidential_issues_events, class: 'list-label form-check-label ml-1' do
+        %strong Confidential Issues events
+      %p.light.ml-1
+        This URL will be triggered when a confidential issue is created/updated/merged
     %li
-      = form.check_box :merge_requests_events, class: 'float-left'
-      .prepend-left-20
-        = form.label :merge_requests_events, class: 'list-label' do
-          %strong Merge request events
-        %p.light
-          This URL will be triggered when a merge request is created/updated/merged
+      = form.check_box :merge_requests_events, class: 'form-check-input'
+      = form.label :merge_requests_events, class: 'list-label form-check-label ml-1' do
+        %strong Merge request events
+      %p.light.ml-1
+        This URL will be triggered when a merge request is created/updated/merged
     %li
-      = form.check_box :job_events, class: 'float-left'
-      .prepend-left-20
-        = form.label :job_events, class: 'list-label' do
-          %strong Job events
-        %p.light
-          This URL will be triggered when the job status changes
+      = form.check_box :job_events, class: 'form-check-input'
+      = form.label :job_events, class: 'list-label form-check-label ml-1' do
+        %strong Job events
+      %p.light.ml-1
+        This URL will be triggered when the job status changes
     %li
-      = form.check_box :pipeline_events, class: 'float-left'
-      .prepend-left-20
-        = form.label :pipeline_events, class: 'list-label' do
-          %strong Pipeline events
-        %p.light
-          This URL will be triggered when the pipeline status changes
+      = form.check_box :pipeline_events, class: 'form-check-input'
+      = form.label :pipeline_events, class: 'list-label form-check-label ml-1' do
+        %strong Pipeline events
+      %p.light.ml-1
+        This URL will be triggered when the pipeline status changes
     %li
-      = form.check_box :wiki_page_events, class: 'float-left'
-      .prepend-left-20
-        = form.label :wiki_page_events, class: 'list-label' do
-          %strong Wiki Page events
-        %p.light
-          This URL will be triggered when a wiki page is created/updated
+      = form.check_box :wiki_page_events, class: 'form-check-input'
+      = form.label :wiki_page_events, class: 'list-label form-check-label ml-1' do
+        %strong Wiki Page events
+      %p.light.ml-1
+        This URL will be triggered when a wiki page is created/updated
 .form-group
   = form.label :enable_ssl_verification, 'SSL verification', class: 'label-light checkbox'
   .form-check
-    = form.label :enable_ssl_verification do
-      = form.check_box :enable_ssl_verification
+    = form.check_box :enable_ssl_verification, class: 'form-check-input'
+    = form.label :enable_ssl_verification, class: 'form-check-label ml-1' do
       %strong Enable SSL verification