Merge branch 'bootstrap4' into 'master'

Upgrade to Bootstrap 4

Closes #45185 and #46710

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

50 files changed, 235 insertions, 227 deletions

diff --git a/spec/features/admin/admin_abuse_reports_spec.rb b/spec/features/admin/admin_abuse_reports_spec.rb
index 766cd4b0090..d8fcdebfc6d 100644
--- a/spec/features/admin/admin_abuse_reports_spec.rb
+++ b/spec/features/admin/admin_abuse_reports_spec.rb
@@ -45,7 +45,7 @@ describe "Admin::AbuseReports", :js  do
           visit admin_abuse_reports_path
 
           expect(page).to have_selector('.pagination')
-          expect(page).to have_selector('.pagination .page', count: (report_count.to_f / AbuseReport.default_per_page).ceil)
+          expect(page).to have_selector('.pagination .js-pagination-page', count: (report_count.to_f / AbuseReport.default_per_page).ceil)
         end
       end
     end
diff --git a/spec/features/admin/admin_projects_spec.rb b/spec/features/admin/admin_projects_spec.rb
index 6d8350e99f1..328e8f25f89 100644
--- a/spec/features/admin/admin_projects_spec.rb
+++ b/spec/features/admin/admin_projects_spec.rb
@@ -34,7 +34,7 @@ describe "Admin::Projects"  do
 
       expect(page).to have_content(project.name)
       expect(page).to have_content(archived_project.name)
-      expect(page).to have_xpath("//span[@class='label label-warning']", text: 'archived')
+      expect(page).to have_xpath("//span[@class='badge badge-warning']", text: 'archived')
     end
 
     it 'renders only archived projects', :js do
diff --git a/spec/features/admin/admin_requests_profiles_spec.rb b/spec/features/admin/admin_requests_profiles_spec.rb
index 380cd5d7703..2503fc9067d 100644
--- a/spec/features/admin/admin_requests_profiles_spec.rb
+++ b/spec/features/admin/admin_requests_profiles_spec.rb
@@ -33,12 +33,12 @@ describe 'Admin::RequestsProfilesController' do
 
       visit admin_requests_profiles_path
 
-      within('.panel', text: '/gitlab-org/gitlab-ce') do
+      within('.card', text: '/gitlab-org/gitlab-ce') do
         expect(page).to have_selector("a[href='#{admin_requests_profile_path(profile1)}']", text: time1.to_s(:long))
         expect(page).to have_selector("a[href='#{admin_requests_profile_path(profile2)}']", text: time2.to_s(:long))
       end
 
-      within('.panel', text: '/gitlab-com/infrastructure') do
+      within('.card', text: '/gitlab-com/infrastructure') do
         expect(page).to have_selector("a[href='#{admin_requests_profile_path(profile3)}']", text: time3.to_s(:long))
       end
     end
diff --git a/spec/features/admin/admin_runners_spec.rb b/spec/features/admin/admin_runners_spec.rb
index 3465ccfc423..c33014cbb31 100644
--- a/spec/features/admin/admin_runners_spec.rb
+++ b/spec/features/admin/admin_runners_spec.rb
@@ -68,7 +68,7 @@ describe "Admin Runners" do
         visit admin_runners_path
 
         within "#runner_#{runner.id}" do
-          expect(page).to have_selector '.label', text: 'group'
+          expect(page).to have_selector '.badge', text: 'group'
           expect(page).to have_text 'n/a'
         end
       end
@@ -81,7 +81,7 @@ describe "Admin Runners" do
         visit admin_runners_path
 
         within "#runner_#{runner.id}" do
-          expect(page).to have_selector '.label', text: 'shared'
+          expect(page).to have_selector '.badge', text: 'shared'
           expect(page).to have_text 'n/a'
         end
       end
@@ -95,7 +95,7 @@ describe "Admin Runners" do
         visit admin_runners_path
 
         within "#runner_#{runner.id}" do
-          expect(page).to have_selector '.label', text: 'specific'
+          expect(page).to have_selector '.badge', text: 'specific'
           expect(page).to have_text '1'
         end
       end
diff --git a/spec/features/admin/admin_users_spec.rb b/spec/features/admin/admin_users_spec.rb
index 8fc57f4b4c3..9e3221577c7 100644
--- a/spec/features/admin/admin_users_spec.rb
+++ b/spec/features/admin/admin_users_spec.rb
@@ -283,14 +283,14 @@ describe "Admin::Users" do
     end
 
     it "lists group projects" do
-      within(:css, '.append-bottom-default + .panel') do
+      within(:css, '.append-bottom-default + .card') do
         expect(page).to have_content 'Group projects'
         expect(page).to have_link group.name, href: admin_group_path(group)
       end
     end
 
     it 'allows navigation to the group details' do
-      within(:css, '.append-bottom-default + .panel') do
+      within(:css, '.append-bottom-default + .card') do
         click_link group.name
       end
       within(:css, 'h3.page-title') do
@@ -300,7 +300,7 @@ describe "Admin::Users" do
     end
 
     it 'shows the group access level' do
-      within(:css, '.append-bottom-default + .panel') do
+      within(:css, '.append-bottom-default + .card') do
         expect(page).to have_content 'Developer'
       end
     end
diff --git a/spec/features/boards/add_issues_modal_spec.rb b/spec/features/boards/add_issues_modal_spec.rb
index 18901a954cc..7a14a441088 100644
--- a/spec/features/boards/add_issues_modal_spec.rb
+++ b/spec/features/boards/add_issues_modal_spec.rb
@@ -81,7 +81,7 @@ describe 'Issue Boards add issue modal', :js do
           expect(page).to have_content('2')
         end
 
-        expect(page).to have_selector('.card', count: 2)
+        expect(page).to have_selector('.board-card', count: 2)
       end
     end
 
@@ -89,7 +89,7 @@ describe 'Issue Boards add issue modal', :js do
       page.within('.add-issues-modal') do
         click_link 'Selected issues'
 
-        expect(page).not_to have_selector('.card')
+        expect(page).not_to have_selector('.board-card')
       end
     end
 
@@ -122,7 +122,7 @@ describe 'Issue Boards add issue modal', :js do
 
           wait_for_requests
 
-          expect(page).to have_selector('.card', count: 1)
+          expect(page).to have_selector('.board-card', count: 1)
         end
       end
 
@@ -133,7 +133,7 @@ describe 'Issue Boards add issue modal', :js do
 
           wait_for_requests
 
-          expect(page).not_to have_selector('.card')
+          expect(page).not_to have_selector('.board-card')
           expect(page).not_to have_content("You haven't added any issues to your project yet")
         end
       end
@@ -142,7 +142,7 @@ describe 'Issue Boards add issue modal', :js do
     context 'selecing issues' do
       it 'selects single issue' do
         page.within('.add-issues-modal') do
-          first('.card .card-number').click
+          first('.board-card .board-card-number').click
 
           page.within('.nav-links') do
             expect(page).to have_content('Selected issues 1')
@@ -152,7 +152,7 @@ describe 'Issue Boards add issue modal', :js do
 
       it 'changes button text' do
         page.within('.add-issues-modal') do
-          first('.card .card-number').click
+          first('.board-card .board-card-number').click
 
           expect(first('.add-issues-footer .btn')).to have_content('Add 1 issue')
         end
@@ -160,7 +160,7 @@ describe 'Issue Boards add issue modal', :js do
 
       it 'changes button text with plural' do
         page.within('.add-issues-modal') do
-          all('.card .card-number').each do |el|
+          all('.board-card .board-card-number').each do |el|
             el.click
           end
 
@@ -170,11 +170,11 @@ describe 'Issue Boards add issue modal', :js do
 
       it 'shows only selected issues on selected tab' do
         page.within('.add-issues-modal') do
-          first('.card .card-number').click
+          first('.board-card .board-card-number').click
 
           click_link 'Selected issues'
 
-          expect(page).to have_selector('.card', count: 1)
+          expect(page).to have_selector('.board-card', count: 1)
         end
       end
 
@@ -200,7 +200,7 @@ describe 'Issue Boards add issue modal', :js do
 
       it 'selects all that arent already selected' do
         page.within('.add-issues-modal') do
-          first('.card .card-number').click
+          first('.board-card .board-card-number').click
 
           expect(page).to have_selector('.is-active', count: 1)
 
@@ -212,11 +212,11 @@ describe 'Issue Boards add issue modal', :js do
 
       it 'unselects from selected tab' do
         page.within('.add-issues-modal') do
-          first('.card .card-number').click
+          first('.board-card .board-card-number').click
 
           click_link 'Selected issues'
 
-          first('.card .card-number').click
+          first('.board-card .board-card-number').click
 
           expect(page).not_to have_selector('.is-active')
         end
@@ -226,19 +226,19 @@ describe 'Issue Boards add issue modal', :js do
     context 'adding issues' do
       it 'adds to board' do
         page.within('.add-issues-modal') do
-          first('.card .card-number').click
+          first('.board-card .board-card-number').click
 
           click_button 'Add 1 issue'
         end
 
         page.within(find('.board:nth-child(2)')) do
-          expect(page).to have_selector('.card')
+          expect(page).to have_selector('.board-card')
         end
       end
 
       it 'adds to second list' do
         page.within('.add-issues-modal') do
-          first('.card .card-number').click
+          first('.board-card .board-card-number').click
 
           click_button planning.title
 
@@ -248,7 +248,7 @@ describe 'Issue Boards add issue modal', :js do
         end
 
         page.within(find('.board:nth-child(3)')) do
-          expect(page).to have_selector('.card')
+          expect(page).to have_selector('.board-card')
         end
       end
     end
diff --git a/spec/features/boards/boards_spec.rb b/spec/features/boards/boards_spec.rb
index 52ff47d57f9..e414345ac23 100644
--- a/spec/features/boards/boards_spec.rb
+++ b/spec/features/boards/boards_spec.rb
@@ -92,9 +92,9 @@ describe 'Issue Boards', :js do
       wait_for_requests
 
       expect(page).to have_selector('.board', count: 4)
-      expect(find('.board:nth-child(2)')).to have_selector('.card')
-      expect(find('.board:nth-child(3)')).to have_selector('.card')
-      expect(find('.board:nth-child(4)')).to have_selector('.card')
+      expect(find('.board:nth-child(2)')).to have_selector('.board-card')
+      expect(find('.board:nth-child(3)')).to have_selector('.board-card')
+      expect(find('.board:nth-child(4)')).to have_selector('.board-card')
     end
 
     it 'shows description tooltip on list title' do
@@ -120,9 +120,9 @@ describe 'Issue Boards', :js do
 
       wait_for_requests
 
-      expect(find('.board:nth-child(2)')).to have_selector('.card', count: 0)
-      expect(find('.board:nth-child(3)')).to have_selector('.card', count: 0)
-      expect(find('.board:nth-child(4)')).to have_selector('.card', count: 1)
+      expect(find('.board:nth-child(2)')).to have_selector('.board-card', count: 0)
+      expect(find('.board:nth-child(3)')).to have_selector('.board-card', count: 0)
+      expect(find('.board:nth-child(4)')).to have_selector('.board-card', count: 1)
     end
 
     it 'search list' do
@@ -131,9 +131,9 @@ describe 'Issue Boards', :js do
 
       wait_for_requests
 
-      expect(find('.board:nth-child(2)')).to have_selector('.card', count: 1)
-      expect(find('.board:nth-child(3)')).to have_selector('.card', count: 0)
-      expect(find('.board:nth-child(4)')).to have_selector('.card', count: 0)
+      expect(find('.board:nth-child(2)')).to have_selector('.board-card', count: 1)
+      expect(find('.board:nth-child(3)')).to have_selector('.board-card', count: 0)
+      expect(find('.board:nth-child(4)')).to have_selector('.board-card', count: 0)
     end
 
     it 'allows user to delete board' do
@@ -171,21 +171,21 @@ describe 'Issue Boards', :js do
 
       page.within(find('.board:nth-child(2)')) do
         expect(page.find('.board-header')).to have_content('58')
-        expect(page).to have_selector('.card', count: 20)
+        expect(page).to have_selector('.board-card', count: 20)
         expect(page).to have_content('Showing 20 of 58 issues')
 
         find('.board .board-list')
         evaluate_script("document.querySelectorAll('.board .board-list')[1].scrollTop = document.querySelectorAll('.board .board-list')[1].scrollHeight")
         wait_for_requests
 
-        expect(page).to have_selector('.card', count: 40)
+        expect(page).to have_selector('.board-card', count: 40)
         expect(page).to have_content('Showing 40 of 58 issues')
 
         find('.board .board-list')
         evaluate_script("document.querySelectorAll('.board .board-list')[1].scrollTop = document.querySelectorAll('.board .board-list')[1].scrollHeight")
         wait_for_requests
 
-        expect(page).to have_selector('.card', count: 58)
+        expect(page).to have_selector('.board-card', count: 58)
         expect(page).to have_content('Showing all issues')
       end
     end
@@ -204,7 +204,7 @@ describe 'Issue Boards', :js do
         wait_for_board_cards(4, 2)
 
         expect(find('.board:nth-child(2)')).not_to have_content(issue9.title)
-        expect(find('.board:nth-child(4)')).to have_selector('.card', count: 2)
+        expect(find('.board:nth-child(4)')).to have_selector('.board-card', count: 2)
         expect(find('.board:nth-child(4)')).to have_content(issue9.title)
         expect(find('.board:nth-child(4)')).not_to have_content(planning.title)
       end
@@ -242,7 +242,7 @@ describe 'Issue Boards', :js do
         wait_for_board_cards(4, 1)
 
         expect(find('.board:nth-child(3)')).to have_content(issue6.title)
-        expect(find('.board:nth-child(3)').all('.card').last).to have_content(development.title)
+        expect(find('.board:nth-child(3)').all('.board-card').last).to have_content(development.title)
       end
 
       it 'issue moves between lists' do
@@ -253,7 +253,7 @@ describe 'Issue Boards', :js do
         wait_for_board_cards(4, 1)
 
         expect(find('.board:nth-child(2)')).to have_content(issue7.title)
-        expect(find('.board:nth-child(2)').all('.card').first).to have_content(planning.title)
+        expect(find('.board:nth-child(2)').all('.board-card').first).to have_content(planning.title)
       end
 
       it 'issue moves from closed' do
@@ -335,7 +335,7 @@ describe 'Issue Boards', :js do
 
           wait_for_requests
 
-          expect(page).to have_css('#js-add-list.open')
+          expect(page).to have_css('#js-add-list.show')
         end
 
         it 'creates new list from a new label' do
@@ -425,12 +425,12 @@ describe 'Issue Boards', :js do
 
         page.within(find('.board:nth-child(2)')) do
           expect(page.find('.board-header')).to have_content('1')
-          expect(page).to have_selector('.card', count: 1)
+          expect(page).to have_selector('.board-card', count: 1)
         end
 
         page.within(find('.board:nth-child(3)')) do
           expect(page.find('.board-header')).to have_content('0')
-          expect(page).to have_selector('.card', count: 0)
+          expect(page).to have_selector('.board-card', count: 0)
         end
       end
 
@@ -460,19 +460,19 @@ describe 'Issue Boards', :js do
 
         page.within(find('.board:nth-child(2)')) do
           expect(page.find('.board-header')).to have_content('51')
-          expect(page).to have_selector('.card', count: 20)
+          expect(page).to have_selector('.board-card', count: 20)
           expect(page).to have_content('Showing 20 of 51 issues')
 
           find('.board .board-list')
           evaluate_script("document.querySelectorAll('.board .board-list')[1].scrollTop = document.querySelectorAll('.board .board-list')[1].scrollHeight")
 
-          expect(page).to have_selector('.card', count: 40)
+          expect(page).to have_selector('.board-card', count: 40)
           expect(page).to have_content('Showing 40 of 51 issues')
 
           find('.board .board-list')
           evaluate_script("document.querySelectorAll('.board .board-list')[1].scrollTop = document.querySelectorAll('.board .board-list')[1].scrollHeight")
 
-          expect(page).to have_selector('.card', count: 51)
+          expect(page).to have_selector('.board-card', count: 51)
           expect(page).to have_content('Showing all issues')
         end
       end
@@ -494,8 +494,8 @@ describe 'Issue Boards', :js do
 
       it 'filters by clicking label button on issue' do
         page.within(find('.board:nth-child(2)')) do
-          expect(page).to have_selector('.card', count: 8)
-          expect(find('.card', match: :first)).to have_content(bug.title)
+          expect(page).to have_selector('.board-card', count: 8)
+          expect(find('.board-card', match: :first)).to have_content(bug.title)
           click_button(bug.title)
           wait_for_requests
         end
@@ -512,13 +512,13 @@ describe 'Issue Boards', :js do
 
       it 'removes label filter by clicking label button on issue' do
         page.within(find('.board:nth-child(2)')) do
-          page.within(find('.card', match: :first)) do
+          page.within(find('.board-card', match: :first)) do
             click_button(bug.title)
           end
 
           wait_for_requests
 
-          expect(page).to have_selector('.card', count: 1)
+          expect(page).to have_selector('.board-card', count: 1)
         end
 
         wait_for_requests
@@ -589,7 +589,7 @@ describe 'Issue Boards', :js do
   def wait_for_board_cards(board_number, expected_cards)
     page.within(find(".board:nth-child(#{board_number})")) do
       expect(page.find('.board-header')).to have_content(expected_cards.to_s)
-      expect(page).to have_selector('.card', count: expected_cards)
+      expect(page).to have_selector('.board-card', count: expected_cards)
     end
   end
 
diff --git a/spec/features/boards/issue_ordering_spec.rb b/spec/features/boards/issue_ordering_spec.rb
index 5abd02dbb48..193b1dfabbd 100644
--- a/spec/features/boards/issue_ordering_spec.rb
+++ b/spec/features/boards/issue_ordering_spec.rb
@@ -30,7 +30,7 @@ describe 'Issue Boards', :js do
 
     it 'has un-ordered issue as last issue' do
       page.within(find('.board:nth-child(2)')) do
-        expect(all('.card').last).to have_content(issue4.title)
+        expect(all('.board-card').last).to have_content(issue4.title)
       end
     end
 
@@ -40,7 +40,7 @@ describe 'Issue Boards', :js do
       wait_for_requests
 
       page.within(find('.board:nth-child(2)')) do
-        expect(first('.card')).to have_content(issue4.title)
+        expect(first('.board-card')).to have_content(issue4.title)
       end
     end
   end
@@ -58,7 +58,7 @@ describe 'Issue Boards', :js do
 
       wait_for_requests
 
-      expect(first('.card')).to have_content(issue2.title)
+      expect(first('.board-card')).to have_content(issue2.title)
     end
 
     it 'moves from middle to bottom' do
@@ -66,7 +66,7 @@ describe 'Issue Boards', :js do
 
       wait_for_requests
 
-      expect(all('.card').last).to have_content(issue2.title)
+      expect(all('.board-card').last).to have_content(issue2.title)
     end
 
     it 'moves from top to bottom' do
@@ -74,7 +74,7 @@ describe 'Issue Boards', :js do
 
       wait_for_requests
 
-      expect(all('.card').last).to have_content(issue3.title)
+      expect(all('.board-card').last).to have_content(issue3.title)
     end
 
     it 'moves from bottom to top' do
@@ -82,7 +82,7 @@ describe 'Issue Boards', :js do
 
       wait_for_requests
 
-      expect(first('.card')).to have_content(issue1.title)
+      expect(first('.board-card')).to have_content(issue1.title)
     end
 
     it 'moves from top to middle' do
@@ -90,7 +90,7 @@ describe 'Issue Boards', :js do
 
       wait_for_requests
 
-      expect(first('.card')).to have_content(issue2.title)
+      expect(first('.board-card')).to have_content(issue2.title)
     end
 
     it 'moves from bottom to middle' do
@@ -98,7 +98,7 @@ describe 'Issue Boards', :js do
 
       wait_for_requests
 
-      expect(all('.card').last).to have_content(issue2.title)
+      expect(all('.board-card').last).to have_content(issue2.title)
     end
   end
 
@@ -121,11 +121,11 @@ describe 'Issue Boards', :js do
 
       wait_for_requests
 
-      expect(find('.board:nth-child(2)')).to have_selector('.card', count: 2)
-      expect(all('.board')[2]).to have_selector('.card', count: 4)
+      expect(find('.board:nth-child(2)')).to have_selector('.board-card', count: 2)
+      expect(all('.board')[2]).to have_selector('.board-card', count: 4)
 
       page.within(all('.board')[2]) do
-        expect(first('.card')).to have_content(issue3.title)
+        expect(first('.board-card')).to have_content(issue3.title)
       end
     end
 
@@ -134,11 +134,11 @@ describe 'Issue Boards', :js do
 
       wait_for_requests
 
-      expect(find('.board:nth-child(2)')).to have_selector('.card', count: 2)
-      expect(all('.board')[2]).to have_selector('.card', count: 4)
+      expect(find('.board:nth-child(2)')).to have_selector('.board-card', count: 2)
+      expect(all('.board')[2]).to have_selector('.board-card', count: 4)
 
       page.within(all('.board')[2]) do
-        expect(all('.card').last).to have_content(issue3.title)
+        expect(all('.board-card').last).to have_content(issue3.title)
       end
     end
 
@@ -147,11 +147,11 @@ describe 'Issue Boards', :js do
 
       wait_for_requests
 
-      expect(find('.board:nth-child(2)')).to have_selector('.card', count: 2)
-      expect(all('.board')[2]).to have_selector('.card', count: 4)
+      expect(find('.board:nth-child(2)')).to have_selector('.board-card', count: 2)
+      expect(all('.board')[2]).to have_selector('.board-card', count: 4)
 
       page.within(all('.board')[2]) do
-        expect(all('.card')[1]).to have_content(issue3.title)
+        expect(all('.board-card')[1]).to have_content(issue3.title)
       end
     end
   end
diff --git a/spec/features/boards/modal_filter_spec.rb b/spec/features/boards/modal_filter_spec.rb
index 5907bb0840f..be9c6a51c29 100644
--- a/spec/features/boards/modal_filter_spec.rb
+++ b/spec/features/boards/modal_filter_spec.rb
@@ -38,7 +38,7 @@ describe 'Issue Boards add issue modal filtering', :js do
     page.within('.add-issues-modal') do
       wait_for_requests
 
-      expect(page).to have_selector('.card', count: 0)
+      expect(page).to have_selector('.board-card', count: 0)
 
       click_button 'Cancel'
     end
@@ -48,7 +48,7 @@ describe 'Issue Boards add issue modal filtering', :js do
     page.within('.add-issues-modal') do
       wait_for_requests
 
-      expect(page).to have_selector('.card', count: 1)
+      expect(page).to have_selector('.board-card', count: 1)
     end
   end
 
@@ -62,13 +62,13 @@ describe 'Issue Boards add issue modal filtering', :js do
     page.within('.add-issues-modal') do
       wait_for_requests
 
-      expect(page).to have_selector('.card', count: 0)
+      expect(page).to have_selector('.board-card', count: 0)
 
       find('.clear-search').click
 
       wait_for_requests
 
-      expect(page).to have_selector('.card', count: 1)
+      expect(page).to have_selector('.board-card', count: 1)
     end
   end
 
@@ -90,7 +90,7 @@ describe 'Issue Boards add issue modal filtering', :js do
         wait_for_requests
 
         expect(page).to have_selector('.js-visual-token', text: user2.name)
-        expect(page).to have_selector('.card', count: 1)
+        expect(page).to have_selector('.board-card', count: 1)
       end
     end
   end
@@ -113,7 +113,7 @@ describe 'Issue Boards add issue modal filtering', :js do
         wait_for_requests
 
         expect(page).to have_selector('.js-visual-token', text: 'none')
-        expect(page).to have_selector('.card', count: 1)
+        expect(page).to have_selector('.board-card', count: 1)
       end
     end
 
@@ -126,7 +126,7 @@ describe 'Issue Boards add issue modal filtering', :js do
         wait_for_requests
 
         expect(page).to have_selector('.js-visual-token', text: user2.name)
-        expect(page).to have_selector('.card', count: 1)
+        expect(page).to have_selector('.board-card', count: 1)
       end
     end
   end
@@ -148,7 +148,7 @@ describe 'Issue Boards add issue modal filtering', :js do
         wait_for_requests
 
         expect(page).to have_selector('.js-visual-token', text: 'upcoming')
-        expect(page).to have_selector('.card', count: 0)
+        expect(page).to have_selector('.board-card', count: 0)
       end
     end
 
@@ -161,7 +161,7 @@ describe 'Issue Boards add issue modal filtering', :js do
         wait_for_requests
 
         expect(page).to have_selector('.js-visual-token', text: milestone.name)
-        expect(page).to have_selector('.card', count: 1)
+        expect(page).to have_selector('.board-card', count: 1)
       end
     end
   end
@@ -183,7 +183,7 @@ describe 'Issue Boards add issue modal filtering', :js do
         wait_for_requests
 
         expect(page).to have_selector('.js-visual-token', text: 'none')
-        expect(page).to have_selector('.card', count: 1)
+        expect(page).to have_selector('.board-card', count: 1)
       end
     end
 
@@ -196,7 +196,7 @@ describe 'Issue Boards add issue modal filtering', :js do
         wait_for_requests
 
         expect(page).to have_selector('.js-visual-token', text: label.title)
-        expect(page).to have_selector('.card', count: 1)
+        expect(page).to have_selector('.board-card', count: 1)
       end
     end
   end
diff --git a/spec/features/boards/new_issue_spec.rb b/spec/features/boards/new_issue_spec.rb
index e880f0096c1..7a95f5cf871 100644
--- a/spec/features/boards/new_issue_spec.rb
+++ b/spec/features/boards/new_issue_spec.rb
@@ -64,7 +64,7 @@ describe 'Issue Boards new issue', :js do
         expect(page).to have_content('1')
       end
 
-      page.within(first('.card')) do
+      page.within(first('.board-card')) do
         issue = project.issues.find_by_title('bug')
 
         expect(page).to have_content(issue.to_reference)
diff --git a/spec/features/boards/sidebar_spec.rb b/spec/features/boards/sidebar_spec.rb
index 4d31123a699..a03aa681827 100644
--- a/spec/features/boards/sidebar_spec.rb
+++ b/spec/features/boards/sidebar_spec.rb
@@ -15,7 +15,7 @@ describe 'Issue Boards', :js do
   let!(:issue2)      { create(:labeled_issue, project: project, labels: [development, stretch], relative_position: 1) }
   let(:board)        { create(:board, project: project) }
   let!(:list)        { create(:list, board: board, label: development, position: 0) }
-  let(:card) { find('.board:nth-child(2)').first('.card') }
+  let(:card) { find('.board:nth-child(2)').first('.board-card') }
 
   around do |example|
     Timecop.freeze { example.run }
@@ -75,7 +75,7 @@ describe 'Issue Boards', :js do
     wait_for_requests
 
     page.within(find('.board:nth-child(2)')) do
-      expect(page).to have_selector('.card', count: 1)
+      expect(page).to have_selector('.board-card', count: 1)
     end
   end
 
@@ -86,11 +86,11 @@ describe 'Issue Boards', :js do
     visit project_board_path(project, board)
     wait_for_requests
 
-    click_card(find('.board:nth-child(1)').first('.card'))
+    click_card(find('.board:nth-child(1)').first('.board-card'))
 
     expect(find('.issue-boards-sidebar')).not_to have_button 'Remove from board'
 
-    click_card(find('.board:nth-child(3)').first('.card'))
+    click_card(find('.board:nth-child(3)').first('.board-card'))
 
     expect(find('.issue-boards-sidebar')).not_to have_button 'Remove from board'
   end
@@ -117,7 +117,7 @@ describe 'Issue Boards', :js do
     end
 
     it 'removes the assignee' do
-      card_two = find('.board:nth-child(2)').find('.card:nth-child(2)')
+      card_two = find('.board:nth-child(2)').find('.board-card:nth-child(2)')
       click_card(card_two)
 
       page.within('.assignee') do
@@ -171,7 +171,7 @@ describe 'Issue Boards', :js do
       end
 
       page.within(find('.board:nth-child(2)')) do
-        find('.card:nth-child(2)').click
+        find('.board-card:nth-child(2)').click
       end
 
       page.within('.assignee') do
@@ -246,7 +246,7 @@ describe 'Issue Boards', :js do
         wait_for_requests
 
         page.within('.value') do
-          expect(page).to have_selector('.label', count: 2)
+          expect(page).to have_selector('.badge', count: 2)
           expect(page).to have_content(development.title)
           expect(page).to have_content(stretch.title)
         end
@@ -268,12 +268,12 @@ describe 'Issue Boards', :js do
         find('.dropdown-menu-close-icon').click
 
         page.within('.value') do
-          expect(page).to have_selector('.label', count: 3)
+          expect(page).to have_selector('.badge', count: 3)
           expect(page).to have_content(bug.title)
         end
       end
 
-      expect(card).to have_selector('.label', count: 3)
+      expect(card).to have_selector('.badge', count: 3)
       expect(card).to have_content(bug.title)
     end
 
@@ -293,13 +293,13 @@ describe 'Issue Boards', :js do
         find('.dropdown-menu-close-icon').click
 
         page.within('.value') do
-          expect(page).to have_selector('.label', count: 4)
+          expect(page).to have_selector('.badge', count: 4)
           expect(page).to have_content(bug.title)
           expect(page).to have_content(regression.title)
         end
       end
 
-      expect(card).to have_selector('.label', count: 4)
+      expect(card).to have_selector('.badge', count: 4)
       expect(card).to have_content(bug.title)
       expect(card).to have_content(regression.title)
     end
@@ -321,12 +321,12 @@ describe 'Issue Boards', :js do
         find('.dropdown-menu-close-icon').click
 
         page.within('.value') do
-          expect(page).to have_selector('.label', count: 1)
+          expect(page).to have_selector('.badge', count: 1)
           expect(page).not_to have_content(stretch.title)
         end
       end
 
-      expect(card).to have_selector('.label', count: 1)
+      expect(card).to have_selector('.badge', count: 1)
       expect(card).not_to have_content(stretch.title)
     end
 
diff --git a/spec/features/boards/sub_group_project_spec.rb b/spec/features/boards/sub_group_project_spec.rb
index 5fdb8044db2..271c610dcc8 100644
--- a/spec/features/boards/sub_group_project_spec.rb
+++ b/spec/features/boards/sub_group_project_spec.rb
@@ -20,7 +20,7 @@ describe 'Sub-group project issue boards', :js do
   end
 
   it 'creates new label from sidebar' do
-    find('.card').click
+    find('.board-card').click
 
     page.within '.labels' do
       click_link 'Edit'
diff --git a/spec/features/dashboard/todos/todos_spec.rb b/spec/features/dashboard/todos/todos_spec.rb
index 94133c62b5c..5ed20b02a6e 100644
--- a/spec/features/dashboard/todos/todos_spec.rb
+++ b/spec/features/dashboard/todos/todos_spec.rb
@@ -246,7 +246,7 @@ feature 'Dashboard Todos' do
     it 'is has the right number of pages' do
       visit dashboard_todos_path
 
-      expect(page).to have_selector('.gl-pagination .page', count: 2)
+      expect(page).to have_selector('.gl-pagination .js-pagination-page', count: 2)
     end
 
     describe 'mark all as done', :js do
diff --git a/spec/features/explore/new_menu_spec.rb b/spec/features/explore/new_menu_spec.rb
index 8d5233d0c0f..2516db5422f 100644
--- a/spec/features/explore/new_menu_spec.rb
+++ b/spec/features/explore/new_menu_spec.rb
@@ -66,7 +66,7 @@ feature 'Top Plus Menu', :js do
 
       page.within '.header-content' do
         find('.header-new-dropdown-toggle').click
-        expect(page).to have_selector('.header-new.dropdown.open', count: 1)
+        expect(page).to have_selector('.header-new.dropdown.show', count: 1)
         find('.header-new-project-snippet a').click
       end
 
@@ -88,7 +88,7 @@ feature 'Top Plus Menu', :js do
 
       page.within '.header-content' do
         find('.header-new-dropdown-toggle').click
-        expect(page).to have_selector('.header-new.dropdown.open', count: 1)
+        expect(page).to have_selector('.header-new.dropdown.show', count: 1)
         find('.header-new-group-project a').click
       end
 
@@ -156,7 +156,7 @@ feature 'Top Plus Menu', :js do
   def click_topmenuitem(item_name)
     page.within '.header-content' do
       find('.header-new-dropdown-toggle').click
-      expect(page).to have_selector('.header-new.dropdown.open', count: 1)
+      expect(page).to have_selector('.header-new.dropdown.show', count: 1)
       click_link item_name
     end
   end
diff --git a/spec/features/groups/members/search_members_spec.rb b/spec/features/groups/members/search_members_spec.rb
index 31fbbcf562c..e7efdf7dfef 100644
--- a/spec/features/groups/members/search_members_spec.rb
+++ b/spec/features/groups/members/search_members_spec.rb
@@ -22,7 +22,7 @@ describe 'Search group member' do
       find('.member-search-btn').click
     end
 
-    group_members_list = find(".panel .content-list")
+    group_members_list = find(".card .content-list")
     expect(group_members_list).to have_content(member.name)
     expect(group_members_list).not_to have_content(user.name)
   end
diff --git a/spec/features/groups/settings/group_badges_spec.rb b/spec/features/groups/settings/group_badges_spec.rb
index 92217294446..a99da4a119b 100644
--- a/spec/features/groups/settings/group_badges_spec.rb
+++ b/spec/features/groups/settings/group_badges_spec.rb
@@ -21,7 +21,7 @@ feature 'Group Badges' do
     page.within '.badge-settings' do
       wait_for_requests
 
-      rows = all('.panel-body > div')
+      rows = all('.card-body > div')
       expect(rows.length).to eq 2
       expect(rows[0]).to have_content badge_1.link_url
       expect(rows[1]).to have_content badge_2.link_url
@@ -48,7 +48,7 @@ feature 'Group Badges' do
         click_button 'Add badge'
         wait_for_requests
 
-        within '.panel-body' do
+        within '.card-body' do
           expect(find('a')[:href]).to eq badge_link_url
           expect(find('a img')[:src]).to eq badge_image_url
         end
@@ -60,7 +60,7 @@ feature 'Group Badges' do
     it 'form is shown when clicking edit button in list' do
       page.within '.badge-settings' do
         wait_for_requests
-        rows = all('.panel-body > div')
+        rows = all('.card-body > div')
         expect(rows.length).to eq 2
         rows[1].find('[aria-label="Edit"]').click
 
@@ -74,7 +74,7 @@ feature 'Group Badges' do
     it 'updates a badge when submitting the edit form' do
       page.within '.badge-settings' do
         wait_for_requests
-        rows = all('.panel-body > div')
+        rows = all('.card-body > div')
         expect(rows.length).to eq 2
         rows[1].find('[aria-label="Edit"]').click
         within 'form' do
@@ -85,7 +85,7 @@ feature 'Group Badges' do
           wait_for_requests
         end
 
-        rows = all('.panel-body > div')
+        rows = all('.card-body > div')
         expect(rows.length).to eq 2
         expect(rows[1]).to have_content badge_link_url
       end
@@ -99,7 +99,7 @@ feature 'Group Badges' do
 
     it 'shows a modal when deleting a badge' do
       wait_for_requests
-      rows = all('.panel-body > div')
+      rows = all('.card-body > div')
       expect(rows.length).to eq 2
 
       click_delete_button(rows[1])
@@ -109,14 +109,14 @@ feature 'Group Badges' do
 
     it 'deletes a badge when confirming the modal' do
       wait_for_requests
-      rows = all('.panel-body > div')
+      rows = all('.card-body > div')
       expect(rows.length).to eq 2
       click_delete_button(rows[1])
 
       find('.modal .btn-danger').click
       wait_for_requests
 
-      rows = all('.panel-body > div')
+      rows = all('.card-body > div')
       expect(rows.length).to eq 1
       expect(rows[0]).to have_content badge_1.link_url
     end
diff --git a/spec/features/groups/user_browse_projects_group_page_spec.rb b/spec/features/groups/user_browse_projects_group_page_spec.rb
index e81c3180e78..916363c41dd 100644
--- a/spec/features/groups/user_browse_projects_group_page_spec.rb
+++ b/spec/features/groups/user_browse_projects_group_page_spec.rb
@@ -21,7 +21,7 @@ describe 'User browse group projects page' do
           visit projects_group_path(group)
 
           expect(page).to have_link project.name
-          expect(page).to have_xpath("//span[@class='label label-warning']", text: 'archived')
+          expect(page).to have_xpath("//span[@class='badge badge-warning']", text: 'archived')
         end
       end
     end
diff --git a/spec/features/issues/filtered_search/filter_issues_spec.rb b/spec/features/issues/filtered_search/filter_issues_spec.rb
index 08ba91a2682..483122ae463 100644
--- a/spec/features/issues/filtered_search/filter_issues_spec.rb
+++ b/spec/features/issues/filtered_search/filter_issues_spec.rb
@@ -248,7 +248,7 @@ describe 'Filter issues', :js do
 
     context 'issue label clicked' do
       it 'filters and displays in search bar' do
-        find('.issues-list .issue .issue-main-info .issuable-info a .label', text: multiple_words_label.title).click
+        find('.issues-list .issue .issue-main-info .issuable-info a .badge', text: multiple_words_label.title).click
 
         expect_issues_list_count(1)
         expect_tokens([label_token("\"#{multiple_words_label.title}\"")])
diff --git a/spec/features/issues/user_creates_branch_and_merge_request_spec.rb b/spec/features/issues/user_creates_branch_and_merge_request_spec.rb
index 539d7e9ff01..3dfcbc2fcb8 100644
--- a/spec/features/issues/user_creates_branch_and_merge_request_spec.rb
+++ b/spec/features/issues/user_creates_branch_and_merge_request_spec.rb
@@ -139,8 +139,8 @@ describe 'User creates branch and merge request on issue page', :js do
       end
 
       it 'disables the create branch button' do
-        expect(page).to have_css('.create-mr-dropdown-wrap .unavailable:not(.hide)')
-        expect(page).to have_css('.create-mr-dropdown-wrap .available.hide', visible: false)
+        expect(page).to have_css('.create-mr-dropdown-wrap .unavailable:not(.hidden)')
+        expect(page).to have_css('.create-mr-dropdown-wrap .available.hidden', visible: false)
         expect(page).to have_content /1 Related Merge Request/
       end
     end
diff --git a/spec/features/labels_hierarchy_spec.rb b/spec/features/labels_hierarchy_spec.rb
index ae41f611ddc..4700ada1aae 100644
--- a/spec/features/labels_hierarchy_spec.rb
+++ b/spec/features/labels_hierarchy_spec.rb
@@ -34,7 +34,7 @@ feature 'Labels Hierarchy', :js, :nested_groups do
 
         wait_for_requests
 
-        expect(page).to have_selector('span.label', text: label.title)
+        expect(page).to have_selector('span.badge', text: label.title)
       end
     end
 
@@ -45,7 +45,7 @@ feature 'Labels Hierarchy', :js, :nested_groups do
 
       wait_for_requests
 
-      expect(page).not_to have_selector('span.label', text: child_group_label.title)
+      expect(page).not_to have_selector('span.badge', text: child_group_label.title)
     end
   end
 
@@ -57,7 +57,7 @@ feature 'Labels Hierarchy', :js, :nested_groups do
         wait_for_requests
 
         if board
-          expect(page).to have_selector('.card-title') do |card|
+          expect(page).to have_selector('.board-card-title') do |card|
             expect(card).to have_selector('a', text: labeled_issue.title)
           end
         else
@@ -96,11 +96,11 @@ feature 'Labels Hierarchy', :js, :nested_groups do
         wait_for_requests
 
         if board
-          expect(page).to have_selector('.card-title') do |card|
+          expect(page).to have_selector('.board-card-title') do |card|
             expect(card).to have_selector('a', text: labeled_issue.title)
           end
 
-          expect(page).to have_selector('.card-title') do |card|
+          expect(page).to have_selector('.board-card-title') do |card|
             expect(card).to have_selector('a', text: labeled_issue_2.title)
           end
         else
@@ -118,11 +118,11 @@ feature 'Labels Hierarchy', :js, :nested_groups do
       select_label_on_dropdown(group_label_3.title)
 
       if board
-        expect(page).to have_selector('.card-title') do |card|
+        expect(page).to have_selector('.board-card-title') do |card|
           expect(card).not_to have_selector('a', text: labeled_issue_2.title)
         end
 
-        expect(page).to have_selector('.card-title') do |card|
+        expect(page).to have_selector('.board-card-title') do |card|
           expect(card).to have_selector('a', text: labeled_issue_3.title)
         end
       else
@@ -159,9 +159,9 @@ feature 'Labels Hierarchy', :js, :nested_groups do
       find('.btn-create').click
 
       expect(page.find('.issue-details h2.title')).to have_content('new created issue')
-      expect(page).to have_selector('span.label', text: grandparent_group_label.title)
-      expect(page).to have_selector('span.label', text: parent_group_label.title)
-      expect(page).to have_selector('span.label', text: project_label_1.title)
+      expect(page).to have_selector('span.badge', text: grandparent_group_label.title)
+      expect(page).to have_selector('span.badge', text: parent_group_label.title)
+      expect(page).to have_selector('span.badge', text: project_label_1.title)
     end
   end
 
@@ -188,7 +188,7 @@ feature 'Labels Hierarchy', :js, :nested_groups do
 
         wait_for_requests
 
-        find('.card').click
+        find('.board-card').click
       end
 
       it_behaves_like 'assigning labels from sidebar'
@@ -204,7 +204,7 @@ feature 'Labels Hierarchy', :js, :nested_groups do
 
         wait_for_requests
 
-        find('.card').click
+        find('.board-card').click
       end
 
       it_behaves_like 'assigning labels from sidebar'
diff --git a/spec/features/milestone_spec.rb b/spec/features/milestone_spec.rb
index 6c51e4bbe26..b0db6870ddf 100644
--- a/spec/features/milestone_spec.rb
+++ b/spec/features/milestone_spec.rb
@@ -119,7 +119,7 @@ feature 'Milestone' do
 
       find('.milestone-deprecation-message .js-popover-link').click
 
-      expect(page).to have_selector('.milestone-deprecation-message .popover')
+      expect(page).to have_selector('.popover')
     end
   end
 end
diff --git a/spec/features/projects/issues/user_sorts_issues_spec.rb b/spec/features/projects/issues/user_sorts_issues_spec.rb
index c3d63000dac..db5936a30cb 100644
--- a/spec/features/projects/issues/user_sorts_issues_spec.rb
+++ b/spec/features/projects/issues/user_sorts_issues_spec.rb
@@ -18,7 +18,7 @@ describe "User sorts issues" do
   it "sorts by popularity" do
     find("button.dropdown-toggle").click
 
-    page.within(".content ul.dropdown-menu.dropdown-menu-align-right li") do
+    page.within(".content ul.dropdown-menu.dropdown-menu-right li") do
       click_link("Popularity")
     end
 
diff --git a/spec/features/projects/merge_requests/user_sorts_merge_requests_spec.rb b/spec/features/projects/merge_requests/user_sorts_merge_requests_spec.rb
index d8d9f7e2a8c..305658f1b5d 100644
--- a/spec/features/projects/merge_requests/user_sorts_merge_requests_spec.rb
+++ b/spec/features/projects/merge_requests/user_sorts_merge_requests_spec.rb
@@ -18,7 +18,7 @@ describe 'User sorts merge requests' do
   it 'keeps the sort option' do
     find('button.dropdown-toggle').click
 
-    page.within('.content ul.dropdown-menu.dropdown-menu-align-right li') do
+    page.within('.content ul.dropdown-menu.dropdown-menu-right li') do
       click_link('Last updated')
     end
 
@@ -43,7 +43,7 @@ describe 'User sorts merge requests' do
     it 'sorts by popularity' do
       find('button.dropdown-toggle').click
 
-      page.within('.content ul.dropdown-menu.dropdown-menu-align-right li') do
+      page.within('.content ul.dropdown-menu.dropdown-menu-right li') do
         click_link('Popularity')
       end
 
diff --git a/spec/features/projects/pipelines/pipeline_spec.rb b/spec/features/projects/pipelines/pipeline_spec.rb
index a29c21f6fef..af2a9567a47 100644
--- a/spec/features/projects/pipelines/pipeline_spec.rb
+++ b/spec/features/projects/pipelines/pipeline_spec.rb
@@ -165,7 +165,7 @@ describe 'Pipeline', :js do
       end
 
       it 'shows Pipeline tab as active' do
-        expect(page).to have_css('.js-pipeline-tab-link.active')
+        expect(page).to have_css('.js-pipeline-tab-link .active')
       end
 
       context 'without permission to access builds' do
@@ -271,7 +271,7 @@ describe 'Pipeline', :js do
       end
 
       it 'shows Jobs tab as active' do
-        expect(page).to have_css('li.js-builds-tab-link.active')
+        expect(page).to have_css('li.js-builds-tab-link .active')
       end
     end
 
diff --git a/spec/features/projects/settings/project_badges_spec.rb b/spec/features/projects/settings/project_badges_spec.rb
index cc3551a4c21..4893bef8884 100644
--- a/spec/features/projects/settings/project_badges_spec.rb
+++ b/spec/features/projects/settings/project_badges_spec.rb
@@ -22,7 +22,7 @@ feature 'Project Badges' do
     page.within '.badge-settings' do
       wait_for_requests
 
-      rows = all('.panel-body > div')
+      rows = all('.card-body > div')
       expect(rows.length).to eq 2
       expect(rows[0]).to have_content group_badge.link_url
       expect(rows[1]).to have_content project_badge.link_url
@@ -49,7 +49,7 @@ feature 'Project Badges' do
         click_button 'Add badge'
         wait_for_requests
 
-        within '.panel-body' do
+        within '.card-body' do
           expect(find('a')[:href]).to eq badge_link_url
           expect(find('a img')[:src]).to eq badge_image_url
         end
@@ -61,7 +61,7 @@ feature 'Project Badges' do
     it 'form is shown when clicking edit button in list' do
       page.within '.badge-settings' do
         wait_for_requests
-        rows = all('.panel-body > div')
+        rows = all('.card-body > div')
         expect(rows.length).to eq 2
         rows[1].find('[aria-label="Edit"]').click
 
@@ -75,7 +75,7 @@ feature 'Project Badges' do
     it 'updates a badge when submitting the edit form' do
       page.within '.badge-settings' do
         wait_for_requests
-        rows = all('.panel-body > div')
+        rows = all('.card-body > div')
         expect(rows.length).to eq 2
         rows[1].find('[aria-label="Edit"]').click
         within 'form' do
@@ -86,7 +86,7 @@ feature 'Project Badges' do
           wait_for_requests
         end
 
-        rows = all('.panel-body > div')
+        rows = all('.card-body > div')
         expect(rows.length).to eq 2
         expect(rows[1]).to have_content badge_link_url
       end
@@ -100,7 +100,7 @@ feature 'Project Badges' do
 
     it 'shows a modal when deleting a badge' do
       wait_for_requests
-      rows = all('.panel-body > div')
+      rows = all('.card-body > div')
       expect(rows.length).to eq 2
 
       click_delete_button(rows[1])
@@ -110,14 +110,14 @@ feature 'Project Badges' do
 
     it 'deletes a badge when confirming the modal' do
       wait_for_requests
-      rows = all('.panel-body > div')
+      rows = all('.card-body > div')
       expect(rows.length).to eq 2
       click_delete_button(rows[1])
 
       find('.modal .btn-danger').click
       wait_for_requests
 
-      rows = all('.panel-body > div')
+      rows = all('.card-body > div')
       expect(rows.length).to eq 1
       expect(rows[0]).to have_content group_badge.link_url
     end
diff --git a/spec/features/protected_branches_spec.rb b/spec/features/protected_branches_spec.rb
index 43cabd3b9f2..0c28a853b54 100644
--- a/spec/features/protected_branches_spec.rb
+++ b/spec/features/protected_branches_spec.rb
@@ -68,8 +68,10 @@ feature 'Protected Branches', :js do
 
         within form do
           find(".js-allowed-to-merge").click
+          wait_for_requests
           click_link 'No one'
           find(".js-allowed-to-push").click
+          wait_for_requests
           click_link 'Developers + Masters'
         end
 
diff --git a/spec/features/signed_commits_spec.rb b/spec/features/signed_commits_spec.rb
index 6088b831c14..db141ef7096 100644
--- a/spec/features/signed_commits_spec.rb
+++ b/spec/features/signed_commits_spec.rb
@@ -96,10 +96,11 @@ describe 'GPG signed commits', :js do
 
       within(find('.commit', text: 'signed commit by bette cartwright')) do
         click_on 'Unverified'
-        within '.popover' do
-          expect(page).to have_content 'This commit was signed with an unverified signature.'
-          expect(page).to have_content "GPG Key ID: #{GpgHelpers::User2.primary_keyid}"
-        end
+      end
+
+      within '.popover' do
+        expect(page).to have_content 'This commit was signed with an unverified signature.'
+        expect(page).to have_content "GPG Key ID: #{GpgHelpers::User2.primary_keyid}"
       end
     end
 
@@ -110,12 +111,13 @@ describe 'GPG signed commits', :js do
 
       within(find('.commit', text: 'signed and authored commit by bette cartwright, different email')) do
         click_on 'Unverified'
-        within '.popover' do
-          expect(page).to have_content 'This commit was signed with a verified signature, but the committer email is not verified to belong to the same user.'
-          expect(page).to have_content 'Bette Cartwright'
-          expect(page).to have_content '@bette.cartwright'
-          expect(page).to have_content "GPG Key ID: #{GpgHelpers::User2.primary_keyid}"
-        end
+      end
+
+      within '.popover' do
+        expect(page).to have_content 'This commit was signed with a verified signature, but the committer email is not verified to belong to the same user.'
+        expect(page).to have_content 'Bette Cartwright'
+        expect(page).to have_content '@bette.cartwright'
+        expect(page).to have_content "GPG Key ID: #{GpgHelpers::User2.primary_keyid}"
       end
     end
 
@@ -126,12 +128,13 @@ describe 'GPG signed commits', :js do
 
       within(find('.commit', text: 'signed commit by bette cartwright')) do
         click_on 'Unverified'
-        within '.popover' do
-          expect(page).to have_content "This commit was signed with a different user's verified signature."
-          expect(page).to have_content 'Bette Cartwright'
-          expect(page).to have_content '@bette.cartwright'
-          expect(page).to have_content "GPG Key ID: #{GpgHelpers::User2.primary_keyid}"
-        end
+      end
+
+      within '.popover' do
+        expect(page).to have_content "This commit was signed with a different user's verified signature."
+        expect(page).to have_content 'Bette Cartwright'
+        expect(page).to have_content '@bette.cartwright'
+        expect(page).to have_content "GPG Key ID: #{GpgHelpers::User2.primary_keyid}"
       end
     end
 
@@ -142,12 +145,13 @@ describe 'GPG signed commits', :js do
 
       within(find('.commit', text: 'signed and authored commit by nannie bernhard')) do
         click_on 'Verified'
-        within '.popover' do
-          expect(page).to have_content 'This commit was signed with a verified signature and the committer email is verified to belong to the same user.'
-          expect(page).to have_content 'Nannie Bernhard'
-          expect(page).to have_content '@nannie.bernhard'
-          expect(page).to have_content "GPG Key ID: #{GpgHelpers::User1.primary_keyid}"
-        end
+      end
+
+      within '.popover' do
+        expect(page).to have_content 'This commit was signed with a verified signature and the committer email is verified to belong to the same user.'
+        expect(page).to have_content 'Nannie Bernhard'
+        expect(page).to have_content '@nannie.bernhard'
+        expect(page).to have_content "GPG Key ID: #{GpgHelpers::User1.primary_keyid}"
       end
     end
 
@@ -167,12 +171,13 @@ describe 'GPG signed commits', :js do
 
       within(find('.commit', text: 'signed and authored commit by nannie bernhard')) do
         click_on 'Verified'
-        within '.popover' do
-          expect(page).to have_content 'This commit was signed with a verified signature and the committer email is verified to belong to the same user.'
-          expect(page).to have_content 'Nannie Bernhard'
-          expect(page).to have_content 'nannie.bernhard@example.com'
-          expect(page).to have_content "GPG Key ID: #{GpgHelpers::User1.primary_keyid}"
-        end
+      end
+
+      within '.popover' do
+        expect(page).to have_content 'This commit was signed with a verified signature and the committer email is verified to belong to the same user.'
+        expect(page).to have_content 'Nannie Bernhard'
+        expect(page).to have_content 'nannie.bernhard@example.com'
+        expect(page).to have_content "GPG Key ID: #{GpgHelpers::User1.primary_keyid}"
       end
     end
   end
diff --git a/spec/features/triggers_spec.rb b/spec/features/triggers_spec.rb
index 19784120108..6be2606fd0d 100644
--- a/spec/features/triggers_spec.rb
+++ b/spec/features/triggers_spec.rb
@@ -23,7 +23,7 @@ feature 'Triggers', :js do
       click_button 'Add trigger'
 
       # See if input has error due to empty value
-      expect(page.find('form.gl-show-field-errors .gl-field-error')['style']).to eq 'display: block;'
+      expect(page.find('form.gl-show-field-errors .gl-field-error')).to be_visible
     end
 
     scenario 'adds new trigger with description' do
diff --git a/spec/features/users/login_spec.rb b/spec/features/users/login_spec.rb
index 6f968a2c590..1f8d31a5c88 100644
--- a/spec/features/users/login_spec.rb
+++ b/spec/features/users/login_spec.rb
@@ -394,7 +394,7 @@ feature 'Login' do
     end
 
     def ensure_one_active_tab
-      expect(page).to have_selector('ul.new-session-tabs > li.active', count: 1)
+      expect(page).to have_selector('ul.new-session-tabs > li > a.active', count: 1)
     end
 
     def ensure_one_active_pane
diff --git a/spec/helpers/issuables_helper_spec.rb b/spec/helpers/issuables_helper_spec.rb
index 7b59fde999d..cddb49b320f 100644
--- a/spec/helpers/issuables_helper_spec.rb
+++ b/spec/helpers/issuables_helper_spec.rb
@@ -45,22 +45,22 @@ describe IssuablesHelper do
 
       it 'returns "Open" when state is :opened' do
         expect(helper.issuables_state_counter_text(:issues, :opened, true))
-          .to eq('<span>Open</span> <span class="badge">42</span>')
+          .to eq('<span>Open</span> <span class="badge badge-pill">42</span>')
       end
 
       it 'returns "Closed" when state is :closed' do
         expect(helper.issuables_state_counter_text(:issues, :closed, true))
-          .to eq('<span>Closed</span> <span class="badge">42</span>')
+          .to eq('<span>Closed</span> <span class="badge badge-pill">42</span>')
       end
 
       it 'returns "Merged" when state is :merged' do
         expect(helper.issuables_state_counter_text(:merge_requests, :merged, true))
-          .to eq('<span>Merged</span> <span class="badge">42</span>')
+          .to eq('<span>Merged</span> <span class="badge badge-pill">42</span>')
       end
 
       it 'returns "All" when state is :all' do
         expect(helper.issuables_state_counter_text(:merge_requests, :all, true))
-          .to eq('<span>All</span> <span class="badge">42</span>')
+          .to eq('<span>All</span> <span class="badge badge-pill">42</span>')
       end
     end
   end
diff --git a/spec/javascripts/badges/components/badge_list_spec.js b/spec/javascripts/badges/components/badge_list_spec.js
index 9439c578973..02e59ae0843 100644
--- a/spec/javascripts/badges/components/badge_list_spec.js
+++ b/spec/javascripts/badges/components/badge_list_spec.js
@@ -33,7 +33,7 @@ describe('BadgeList component', () => {
   });
 
   it('renders a header with the badge count', () => {
-    const header = vm.$el.querySelector('.panel-heading');
+    const header = vm.$el.querySelector('.card-header');
     expect(header).toHaveText(new RegExp(`Your badges\\s+${numberOfDummyBadges}`));
   });
 
diff --git a/spec/javascripts/badges/components/badge_settings_spec.js b/spec/javascripts/badges/components/badge_settings_spec.js
index 3db02982ad4..59367c85125 100644
--- a/spec/javascripts/badges/components/badge_settings_spec.js
+++ b/spec/javascripts/badges/components/badge_settings_spec.js
@@ -60,7 +60,7 @@ describe('BadgeSettings component', () => {
   });
 
   it('displays badge list', () => {
-    const badgeListElement = vm.$el.querySelector('.panel');
+    const badgeListElement = vm.$el.querySelector('.card');
     expect(badgeListElement).not.toBe(null);
     expect(badgeListElement).toBeVisible();
     expect(badgeListElement).toContainText('Your badges');
@@ -87,7 +87,7 @@ describe('BadgeSettings component', () => {
     });
 
     it('displays no badge list', () => {
-      const badgeListElement = vm.$el.querySelector('.panel');
+      const badgeListElement = vm.$el.querySelector('.card');
       expect(badgeListElement).toBeHidden();
     });
   });
diff --git a/spec/javascripts/behaviors/secret_values_spec.js b/spec/javascripts/behaviors/secret_values_spec.js
index 38d9bba6868..95122fcf30f 100644
--- a/spec/javascripts/behaviors/secret_values_spec.js
+++ b/spec/javascripts/behaviors/secret_values_spec.js
@@ -9,7 +9,7 @@ function generateValueMarkup(
     <div class="${placeholderClass}">
       ***
     </div>
-    <div class="hide ${valueClass}">
+    <div class="hidden ${valueClass}">
       ${secret}
     </div>
   `;
diff --git a/spec/javascripts/blob/balsamiq/balsamiq_viewer_spec.js b/spec/javascripts/blob/balsamiq/balsamiq_viewer_spec.js
index aa87956109f..cb0f2ba686d 100644
--- a/spec/javascripts/blob/balsamiq/balsamiq_viewer_spec.js
+++ b/spec/javascripts/blob/balsamiq/balsamiq_viewer_spec.js
@@ -257,9 +257,9 @@ describe('BalsamiqViewer', () => {
       name = 'name';
       resource = 'resource';
       template = `
-        <div class="panel panel-default">
-          <div class="panel-heading">name</div>
-          <div class="panel-body">
+        <div class="card">
+          <div class="card-header">name</div>
+          <div class="card-body">
             <img class="img-thumbnail" src="data:image/png;base64,image"/>
           </div>
         </div>
diff --git a/spec/javascripts/blob/sketch/index_spec.js b/spec/javascripts/blob/sketch/index_spec.js
index 79f40559817..e062a068a92 100644
--- a/spec/javascripts/blob/sketch/index_spec.js
+++ b/spec/javascripts/blob/sketch/index_spec.js
@@ -82,7 +82,7 @@ describe('Sketch viewer', () => {
       const img = document.querySelector('#js-sketch-viewer img');
 
       expect(img).not.toBeNull();
-      expect(img.classList.contains('img-responsive')).toBeTruthy();
+      expect(img.classList.contains('img-fluid')).toBeTruthy();
     });
 
     it('renders link to image', () => {
diff --git a/spec/javascripts/boards/board_list_spec.js b/spec/javascripts/boards/board_list_spec.js
index 03df6c06691..c06b2f60813 100644
--- a/spec/javascripts/boards/board_list_spec.js
+++ b/spec/javascripts/boards/board_list_spec.js
@@ -83,13 +83,13 @@ describe('Board list component', () => {
 
   it('renders issues', () => {
     expect(
-      component.$el.querySelectorAll('.card').length,
+      component.$el.querySelectorAll('.board-card').length,
     ).toBe(1);
   });
 
   it('sets data attribute with issue id', () => {
     expect(
-      component.$el.querySelector('.card').getAttribute('data-issue-id'),
+      component.$el.querySelector('.board-card').getAttribute('data-issue-id'),
     ).toBe('1');
   });
 
diff --git a/spec/javascripts/boards/issue_card_spec.js b/spec/javascripts/boards/issue_card_spec.js
index be1ea0b57b4..abeef272c68 100644
--- a/spec/javascripts/boards/issue_card_spec.js
+++ b/spec/javascripts/boards/issue_card_spec.js
@@ -70,19 +70,19 @@ describe('Issue card component', () => {
 
   it('renders issue title', () => {
     expect(
-      component.$el.querySelector('.card-title').textContent,
+      component.$el.querySelector('.board-card-title').textContent,
     ).toContain(issue.title);
   });
 
   it('includes issue base in link', () => {
     expect(
-      component.$el.querySelector('.card-title a').getAttribute('href'),
+      component.$el.querySelector('.board-card-title a').getAttribute('href'),
     ).toContain('/test');
   });
 
   it('includes issue title on link', () => {
     expect(
-      component.$el.querySelector('.card-title a').getAttribute('title'),
+      component.$el.querySelector('.board-card-title a').getAttribute('title'),
     ).toBe(issue.title);
   });
 
@@ -105,14 +105,14 @@ describe('Issue card component', () => {
 
   it('renders issue ID with #', () => {
     expect(
-      component.$el.querySelector('.card-number').textContent,
+      component.$el.querySelector('.board-card-number').textContent,
     ).toContain(`#${issue.id}`);
   });
 
   describe('assignee', () => {
     it('does not render assignee', () => {
       expect(
-        component.$el.querySelector('.card-assignee .avatar'),
+        component.$el.querySelector('.board-card-assignee .avatar'),
       ).toBeNull();
     });
 
@@ -125,25 +125,25 @@ describe('Issue card component', () => {
 
       it('renders assignee', () => {
         expect(
-          component.$el.querySelector('.card-assignee .avatar'),
+          component.$el.querySelector('.board-card-assignee .avatar'),
         ).not.toBeNull();
       });
 
       it('sets title', () => {
         expect(
-          component.$el.querySelector('.card-assignee img').getAttribute('data-original-title'),
+          component.$el.querySelector('.board-card-assignee img').getAttribute('data-original-title'),
         ).toContain(`Assigned to ${user.name}`);
       });
 
       it('sets users path', () => {
         expect(
-          component.$el.querySelector('.card-assignee a').getAttribute('href'),
+          component.$el.querySelector('.board-card-assignee a').getAttribute('href'),
         ).toBe('/test');
       });
 
       it('renders avatar', () => {
         expect(
-          component.$el.querySelector('.card-assignee img'),
+          component.$el.querySelector('.board-card-assignee img'),
         ).not.toBeNull();
       });
     });
@@ -161,10 +161,10 @@ describe('Issue card component', () => {
 
       it('displays defaults avatar if users avatar is null', () => {
         expect(
-          component.$el.querySelector('.card-assignee img'),
+          component.$el.querySelector('.board-card-assignee img'),
         ).not.toBeNull();
         expect(
-          component.$el.querySelector('.card-assignee img').getAttribute('src'),
+          component.$el.querySelector('.board-card-assignee img').getAttribute('src'),
         ).toBe('default_avatar');
       });
     });
@@ -197,7 +197,7 @@ describe('Issue card component', () => {
     });
 
     it('renders all four assignees', () => {
-      expect(component.$el.querySelectorAll('.card-assignee .avatar').length).toEqual(4);
+      expect(component.$el.querySelectorAll('.board-card-assignee .avatar').length).toEqual(4);
     });
 
     describe('more than four assignees', () => {
@@ -213,11 +213,11 @@ describe('Issue card component', () => {
       });
 
       it('renders more avatar counter', () => {
-        expect(component.$el.querySelector('.card-assignee .avatar-counter').innerText).toEqual('+2');
+        expect(component.$el.querySelector('.board-card-assignee .avatar-counter').innerText).toEqual('+2');
       });
 
       it('renders three assignees', () => {
-        expect(component.$el.querySelectorAll('.card-assignee .avatar').length).toEqual(3);
+        expect(component.$el.querySelectorAll('.board-card-assignee .avatar').length).toEqual(3);
       });
 
       it('renders 99+ avatar counter', (done) => {
@@ -232,7 +232,7 @@ describe('Issue card component', () => {
         }
 
         Vue.nextTick(() => {
-          expect(component.$el.querySelector('.card-assignee .avatar-counter').innerText).toEqual('99+');
+          expect(component.$el.querySelector('.board-card-assignee .avatar-counter').innerText).toEqual('99+');
           done();
         });
       });
@@ -248,13 +248,13 @@ describe('Issue card component', () => {
 
     it('renders list label', () => {
       expect(
-        component.$el.querySelectorAll('.label').length,
+        component.$el.querySelectorAll('.badge').length,
       ).toBe(2);
     });
 
     it('renders label', () => {
       const nodes = [];
-      component.$el.querySelectorAll('.label').forEach((label) => {
+      component.$el.querySelectorAll('.badge').forEach((label) => {
         nodes.push(label.title);
       });
 
@@ -265,13 +265,13 @@ describe('Issue card component', () => {
 
     it('sets label description as title', () => {
       expect(
-        component.$el.querySelector('.label').getAttribute('title'),
+        component.$el.querySelector('.badge').getAttribute('title'),
       ).toContain(label1.description);
     });
 
     it('sets background color of button', () => {
       const nodes = [];
-      component.$el.querySelectorAll('.label').forEach((label) => {
+      component.$el.querySelectorAll('.badge').forEach((label) => {
         nodes.push(label.style.backgroundColor);
       });
 
@@ -288,7 +288,7 @@ describe('Issue card component', () => {
       Vue.nextTick()
         .then(() => {
           expect(
-            component.$el.querySelectorAll('.label').length,
+            component.$el.querySelectorAll('.badge').length,
           ).toBe(2);
           expect(
             component.$el.textContent,
diff --git a/spec/javascripts/fixtures/event_filter.html.haml b/spec/javascripts/fixtures/event_filter.html.haml
index 5477c6075f0..aa7af61c7eb 100644
--- a/spec/javascripts/fixtures/event_filter.html.haml
+++ b/spec/javascripts/fixtures/event_filter.html.haml
@@ -1,4 +1,4 @@
-%ul.nav-links.event-filter.scrolling-tabs
+%ul.nav-links.event-filter.scrolling-tabs.nav.nav-tabs
   %li.active
     %a.event-filter-link{ id: "all_event_filter", title: "Filter by all", href: "/dashboard/activity"}
       %span
diff --git a/spec/javascripts/fixtures/issue_sidebar_label.html.haml b/spec/javascripts/fixtures/issue_sidebar_label.html.haml
index 397bdc85c67..06ce248dc9c 100644
--- a/spec/javascripts/fixtures/issue_sidebar_label.html.haml
+++ b/spec/javascripts/fixtures/issue_sidebar_label.html.haml
@@ -1,7 +1,7 @@
 .block.labels
   .sidebar-collapsed-icon.js-sidebar-labels-tooltip
   .title.hide-collapsed
-    %a.edit-link.pull-right{ href: "#" }
+    %a.edit-link.float-right{ href: "#" }
       Edit
   .selectbox.hide-collapsed{ style: "display: none;" }
     .dropdown
diff --git a/spec/javascripts/fixtures/linked_tabs.html.haml b/spec/javascripts/fixtures/linked_tabs.html.haml
index c38fe8b1f25..632606e0536 100644
--- a/spec/javascripts/fixtures/linked_tabs.html.haml
+++ b/spec/javascripts/fixtures/linked_tabs.html.haml
@@ -1,9 +1,9 @@
-%ul.nav-links.new-session-tabs.linked-tabs
-  %li
-    %a{ href: 'foo/bar/1', data: { target: 'div#tab1', action: 'tab1', toggle: 'tab' } }
+%ul.nav.nav-tabs.new-session-tabs.linked-tabs
+  %li.nav-item
+    %a.nav-link{ href: 'foo/bar/1', data: { target: 'div#tab1', action: 'tab1', toggle: 'tab' } }
       Tab 1
-  %li
-    %a{ href: 'foo/bar/1/context', data: { target: 'div#tab2', action: 'tab2', toggle: 'tab' } }
+  %li.nav-item
+    %a.nav-link{ href: 'foo/bar/1/context', data: { target: 'div#tab2', action: 'tab2', toggle: 'tab' } }
       Tab 2
 
 .tab-content
diff --git a/spec/javascripts/gl_dropdown_spec.js b/spec/javascripts/gl_dropdown_spec.js
index 7f9c4811fba..175f386b60e 100644
--- a/spec/javascripts/gl_dropdown_spec.js
+++ b/spec/javascripts/gl_dropdown_spec.js
@@ -70,9 +70,9 @@ describe('glDropdown', function describeDropdown() {
 
   it('should open on click', () => {
     initDropDown.call(this, false);
-    expect(this.dropdownContainerElement).not.toHaveClass('open');
+    expect(this.dropdownContainerElement).not.toHaveClass('show');
     this.dropdownButtonElement.click();
-    expect(this.dropdownContainerElement).toHaveClass('open');
+    expect(this.dropdownContainerElement).toHaveClass('show');
   });
 
   it('escapes HTML as text', () => {
@@ -134,12 +134,12 @@ describe('glDropdown', function describeDropdown() {
     });
 
     it('should click the selected item on ENTER keypress', () => {
-      expect(this.dropdownContainerElement).toHaveClass('open');
+      expect(this.dropdownContainerElement).toHaveClass('show');
       const randomIndex = Math.floor(Math.random() * (this.projectsData.length - 1)) + 0;
       navigateWithKeys('down', randomIndex, () => {
         const visitUrl = spyOnDependency(GLDropdown, 'visitUrl').and.stub();
         navigateWithKeys('enter', null, () => {
-          expect(this.dropdownContainerElement).not.toHaveClass('open');
+          expect(this.dropdownContainerElement).not.toHaveClass('show');
           const link = $(`${ITEM_SELECTOR}:eq(${randomIndex}) a`, this.$dropdownMenuElement);
           expect(link).toHaveClass('is-active');
           const linkedLocation = link.attr('href');
@@ -149,13 +149,13 @@ describe('glDropdown', function describeDropdown() {
     });
 
     it('should close on ESC keypress', () => {
-      expect(this.dropdownContainerElement).toHaveClass('open');
+      expect(this.dropdownContainerElement).toHaveClass('show');
       this.dropdownContainerElement.trigger({
         type: 'keyup',
         which: ARROW_KEYS.ESC,
         keyCode: ARROW_KEYS.ESC
       });
-      expect(this.dropdownContainerElement).not.toHaveClass('open');
+      expect(this.dropdownContainerElement).not.toHaveClass('show');
     });
   });
 
diff --git a/spec/javascripts/notes_spec.js b/spec/javascripts/notes_spec.js
index 0952356c2f4..648fb3e9bd3 100644
--- a/spec/javascripts/notes_spec.js
+++ b/spec/javascripts/notes_spec.js
@@ -974,7 +974,7 @@ import timeoutPromise from './helpers/set_timeout_promise_helper';
         ).toBeFalsy();
         expect(
           $tempNoteHeader
-            .find('.hidden-xs')
+            .find('.d-none.d-sm-block')
             .text()
             .trim(),
         ).toEqual(currentUserFullname);
@@ -1020,7 +1020,7 @@ import timeoutPromise from './helpers/set_timeout_promise_helper';
         const $tempNoteHeader = $tempNote.find('.note-header');
         expect(
           $tempNoteHeader
-            .find('.hidden-xs')
+            .find('.d-none.d-sm-block')
             .text()
             .trim(),
         ).toEqual('Foo &lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;');
diff --git a/spec/javascripts/projects_dropdown/components/search_spec.js b/spec/javascripts/projects_dropdown/components/search_spec.js
index 601264258c2..427f5024e3a 100644
--- a/spec/javascripts/projects_dropdown/components/search_spec.js
+++ b/spec/javascripts/projects_dropdown/components/search_spec.js
@@ -92,7 +92,6 @@ describe('SearchComponent', () => {
       const inputEl = vm.$el.querySelector('input.form-control');
 
       expect(vm.$el.classList.contains('search-input-container')).toBeTruthy();
-      expect(vm.$el.classList.contains('hidden-xs')).toBeTruthy();
       expect(inputEl).not.toBe(null);
       expect(inputEl.getAttribute('placeholder')).toBe('Search your projects');
       expect(vm.$el.querySelector('.search-icon')).toBeDefined();
diff --git a/spec/javascripts/sidebar/sidebar_move_issue_spec.js b/spec/javascripts/sidebar/sidebar_move_issue_spec.js
index 00847df4b60..8f35b9ca437 100644
--- a/spec/javascripts/sidebar/sidebar_move_issue_spec.js
+++ b/spec/javascripts/sidebar/sidebar_move_issue_spec.js
@@ -14,7 +14,9 @@ describe('SidebarMoveIssue', function () {
     this.$content = $(`
       <div class="dropdown">
         <div class="js-toggle"></div>
-        <div class="dropdown-content"></div>
+        <div class="dropdown-menu">
+          <div class="dropdown-content"></div>
+        </div>
         <div class="js-confirm-button"></div>
       </div>
     `);
diff --git a/spec/lib/banzai/filter/label_reference_filter_spec.rb b/spec/lib/banzai/filter/label_reference_filter_spec.rb
index 392905076dc..b30f3661e70 100644
--- a/spec/lib/banzai/filter/label_reference_filter_spec.rb
+++ b/spec/lib/banzai/filter/label_reference_filter_spec.rb
@@ -59,7 +59,7 @@ describe Banzai::Filter::LabelReferenceFilter do
   describe 'label span element' do
     it 'includes default classes' do
       doc = reference_filter("Label #{reference}")
-      expect(doc.css('a span').first.attr('class')).to eq 'label color-label has-tooltip'
+      expect(doc.css('a span').first.attr('class')).to eq 'badge color-label has-tooltip'
     end
 
     it 'includes a style attribute' do
diff --git a/spec/support/helpers/board_helpers.rb b/spec/support/helpers/board_helpers.rb
index 507d0432d7f..b85fde222ea 100644
--- a/spec/support/helpers/board_helpers.rb
+++ b/spec/support/helpers/board_helpers.rb
@@ -1,7 +1,7 @@
 module BoardHelpers
   def click_card(card)
     within card do
-      first('.card-number').click
+      first('.board-card-number').click
     end
 
     wait_for_sidebar
diff --git a/spec/support/helpers/features/sorting_helpers.rb b/spec/support/helpers/features/sorting_helpers.rb
index 50457b64745..ad0053ec5cf 100644
--- a/spec/support/helpers/features/sorting_helpers.rb
+++ b/spec/support/helpers/features/sorting_helpers.rb
@@ -15,7 +15,7 @@ module Spec
           def sort_by(value)
             find('button.dropdown-toggle').click
 
-            page.within('.content ul.dropdown-menu.dropdown-menu-align-right li') do
+            page.within('.content ul.dropdown-menu.dropdown-menu-right li') do
               click_link(value)
             end
           end
diff --git a/spec/support/helpers/mobile_helpers.rb b/spec/support/helpers/mobile_helpers.rb
index 3b9eb84e824..9dc1f1de436 100644
--- a/spec/support/helpers/mobile_helpers.rb
+++ b/spec/support/helpers/mobile_helpers.rb
@@ -1,10 +1,10 @@
 module MobileHelpers
   def resize_screen_xs
-    resize_window(767, 768)
+    resize_window(575, 768)
   end
 
   def resize_screen_sm
-    resize_window(900, 768)
+    resize_window(767, 768)
   end
 
   def restore_window_size
diff --git a/spec/support/helpers/sorting_helper.rb b/spec/support/helpers/sorting_helper.rb
index 577518d726c..9496a94d8f4 100644
--- a/spec/support/helpers/sorting_helper.rb
+++ b/spec/support/helpers/sorting_helper.rb
@@ -11,7 +11,7 @@
 module SortingHelper
   def sorting_by(value)
     find('button.dropdown-toggle').click
-    page.within('.content ul.dropdown-menu.dropdown-menu-align-right li') do
+    page.within('.content ul.dropdown-menu.dropdown-menu-right li') do
       click_link value
     end
   end
diff --git a/spec/support/shared_examples/features/protected_branches_access_control_ce.rb b/spec/support/shared_examples/features/protected_branches_access_control_ce.rb
index 17f319f49e9..5241c0fa6f1 100644
--- a/spec/support/shared_examples/features/protected_branches_access_control_ce.rb
+++ b/spec/support/shared_examples/features/protected_branches_access_control_ce.rb
@@ -10,7 +10,7 @@ shared_examples "protected branches > access control > CE" do
 
         unless allowed_to_push_button.text == access_type_name
           allowed_to_push_button.click
-          within(".dropdown.open .dropdown-menu") { click_on access_type_name }
+          within(".dropdown.show .dropdown-menu") { click_on access_type_name }
         end
       end
 
@@ -55,7 +55,7 @@ shared_examples "protected branches > access control > CE" do
 
         unless allowed_to_merge_button.text == access_type_name
           allowed_to_merge_button.click
-          within(".dropdown.open .dropdown-menu") { click_on access_type_name }
+          within(".dropdown.show .dropdown-menu") { click_on access_type_name }
         end
       end