diff --git a/app/assets/javascripts/deploy_keys/components/key.vue b/app/assets/javascripts/deploy_keys/components/key.vue
index 9adc0a9fa06..2a777ff2de2 100644
--- a/app/assets/javascripts/deploy_keys/components/key.vue
+++ b/app/assets/javascripts/deploy_keys/components/key.vue
@@ -45,7 +45,7 @@
 
 <template>
   <div>
-    <div class="float-left append-right-10 hidden-xs">
+    <div class="float-left append-right-10 d-none d-sm-block">
       <i
         aria-hidden="true"
         class="fa fa-key key-icon"
diff --git a/app/assets/javascripts/groups/components/group_item.vue b/app/assets/javascripts/groups/components/group_item.vue
index 764b130fdb8..7f64a9bd741 100644
--- a/app/assets/javascripts/groups/components/group_item.vue
+++ b/app/assets/javascripts/groups/components/group_item.vue
@@ -99,7 +99,7 @@ export default {
         />
       </div>
       <div
-        class="avatar-container prepend-top-8 prepend-left-5 s24 hidden-xs"
+        class="avatar-container prepend-top-8 prepend-left-5 s24 d-none d-sm-block"
         :class="{ 'content-loading': group.isChildrenLoading }"
       >
         <a
diff --git a/app/assets/javascripts/ide/components/repo_loading_file.vue b/app/assets/javascripts/ide/components/repo_loading_file.vue
index 1698d933590..3e47da88050 100644
--- a/app/assets/javascripts/ide/components/repo_loading_file.vue
+++ b/app/assets/javascripts/ide/components/repo_loading_file.vue
@@ -31,7 +31,7 @@
         />
       </td>
 
-      <td class="hidden-xs">
+      <td class="d-none d-sm-block">
         <skeleton-loading-container
           class="animation-container-right"
           :small="true"
diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js
index ac70ddb3ff4..ed72ffc532b 100644
--- a/app/assets/javascripts/notes.js
+++ b/app/assets/javascripts/notes.js
@@ -1659,7 +1659,7 @@ export default class Notes {
                <div class="note-header">
                   <div class="note-header-info">
                      <a href="/${_.escape(currentUsername)}">
-                       <span class="hidden-xs">${_.escape(
+                       <span class="d-none d-sm-block">${_.escape(
                          currentUsername,
                        )}</span>
                        <span class="note-headline-light">${_.escape(
@@ -1678,7 +1678,7 @@ export default class Notes {
       </li>`,
     );
 
-    $tempNote.find('.hidden-xs').text(_.escape(currentUserFullname));
+    $tempNote.find('.d-none.d-sm-block').text(_.escape(currentUserFullname));
     $tempNote
       .find('.note-headline-light')
       .text(`@${_.escape(currentUsername)}`);
diff --git a/app/assets/javascripts/projects_dropdown/components/search.vue b/app/assets/javascripts/projects_dropdown/components/search.vue
index 0c46ed184be..7fcd62dcdb8 100644
--- a/app/assets/javascripts/projects_dropdown/components/search.vue
+++ b/app/assets/javascripts/projects_dropdown/components/search.vue
@@ -46,7 +46,7 @@
 
 <template>
   <div
-    class="search-input-container hidden-xs"
+    class="search-input-container d-none d-sm-block"
   >
     <input
       type="search"
diff --git a/app/assets/javascripts/registry/components/collapsible_container.vue b/app/assets/javascripts/registry/components/collapsible_container.vue
index cdd48778602..3028df300c5 100644
--- a/app/assets/javascripts/registry/components/collapsible_container.vue
+++ b/app/assets/javascripts/registry/components/collapsible_container.vue
@@ -89,7 +89,7 @@
         css-class="btn-secondary btn-transparent btn-clipboard"
       />
 
-      <div class="controls hidden-xs float-right">
+      <div class="controls d-none d-sm-block float-right">
         <button
           v-if="repo.canDelete"
           type="button"
diff --git a/app/assets/javascripts/registry/components/table_registry.vue b/app/assets/javascripts/registry/components/table_registry.vue
index f0ee6bd0da6..b2f0e3bf314 100644
--- a/app/assets/javascripts/registry/components/table_registry.vue
+++ b/app/assets/javascripts/registry/components/table_registry.vue
@@ -118,7 +118,7 @@
             <button
               v-if="item.canDelete"
               type="button"
-              class="js-delete-registry btn btn-danger hidden-xs float-right"
+              class="js-delete-registry btn btn-danger d-none d-sm-block float-right"
               :title="s__('ContainerRegistry|Remove tag')"
               :aria-label="s__('ContainerRegistry|Remove tag')"
               data-container="body"
diff --git a/app/assets/javascripts/vue_shared/components/notes/placeholder_note.vue b/app/assets/javascripts/vue_shared/components/notes/placeholder_note.vue
index 50b1508691b..eccba61a8c0 100644
--- a/app/assets/javascripts/vue_shared/components/notes/placeholder_note.vue
+++ b/app/assets/javascripts/vue_shared/components/notes/placeholder_note.vue
@@ -54,7 +54,7 @@
         <div class="note-header">
           <div class="note-header-info">
             <a :href="getUserData.path">
-              <span class="hidden-xs">{{ getUserData.name }}</span>
+              <span class="d-none d-sm-block">{{ getUserData.name }}</span>
               <span class="note-headline-light">@{{ getUserData.username }}</span>
             </a>
           </div>
diff --git a/app/helpers/avatars_helper.rb b/app/helpers/avatars_helper.rb
index 21b6c0a8ad5..3131f469b6c 100644
--- a/app/helpers/avatars_helper.rb
+++ b/app/helpers/avatars_helper.rb
@@ -4,7 +4,7 @@ module AvatarsHelper
       user: commit_or_event.author,
       user_name: commit_or_event.author_name,
       user_email: commit_or_event.author_email,
-      css_class: 'hidden-xs'
+      css_class: 'd-none d-sm-block'
     }))
   end
 
diff --git a/app/helpers/issuables_helper.rb b/app/helpers/issuables_helper.rb
index cb88f9b98df..f91d1dc6f84 100644
--- a/app/helpers/issuables_helper.rb
+++ b/app/helpers/issuables_helper.rb
@@ -131,7 +131,7 @@ module IssuablesHelper
     output = ""
     output << "Opened #{time_ago_with_tooltip(issuable.created_at)} by ".html_safe
     output << content_tag(:strong) do
-      author_output = link_to_member(project, issuable.author, size: 24, mobile_classes: "hidden-xs", tooltip: true)
+      author_output = link_to_member(project, issuable.author, size: 24, mobile_classes: "d-none d-sm-block", tooltip: true)
       author_output << link_to_member(project, issuable.author, size: 24, by_username: true, avatar: false, mobile_classes: "d-block d-sm-none")
     end
 
diff --git a/app/views/admin/groups/_group.html.haml b/app/views/admin/groups/_group.html.haml
index e08510829e4..e7c70a6f187 100644
--- a/app/views/admin/groups/_group.html.haml
+++ b/app/views/admin/groups/_group.html.haml
@@ -20,7 +20,7 @@
       = visibility_level_icon(group.visibility_level, fw: false)
 
   .avatar-container.s40
-    = group_icon(group, class: "avatar s40 hidden-xs")
+    = group_icon(group, class: "avatar s40 d-none d-sm-block")
   .title
     = link_to [:admin, group], class: 'group-name' do
       = group.full_name
diff --git a/app/views/admin/hook_logs/_index.html.haml b/app/views/admin/hook_logs/_index.html.haml
index 91a8c0c62fe..acb105b8080 100644
--- a/app/views/admin/hook_logs/_index.html.haml
+++ b/app/views/admin/hook_logs/_index.html.haml
@@ -18,7 +18,7 @@
           %tr
             %td
               = render partial: 'shared/hook_logs/status_label', locals: { hook_log: hook_log }
-            %td.hidden-xs
+            %td.d-none.d-sm-block
               %span.label.label-gray.deploy-project-label
                 = hook_log.trigger.singularize.titleize
             %td
diff --git a/app/views/dashboard/_snippets_head.html.haml b/app/views/dashboard/_snippets_head.html.haml
index a9488df07bd..8b63f0acdfb 100644
--- a/app/views/dashboard/_snippets_head.html.haml
+++ b/app/views/dashboard/_snippets_head.html.haml
@@ -8,5 +8,5 @@
         Explore snippets
 
   - if current_user
-    .nav-controls.hidden-xs
+    .nav-controls.d-none.d-sm-block
       = link_to "New snippet", new_snippet_path, class: "btn btn-new", title: "New snippet"
diff --git a/app/views/layouts/header/_default.html.haml b/app/views/layouts/header/_default.html.haml
index 854e48c8729..bf155480f34 100644
--- a/app/views/layouts/header/_default.html.haml
+++ b/app/views/layouts/header/_default.html.haml
@@ -8,7 +8,7 @@
             = brand_header_logo
             - logo_text = brand_header_logo_type
             - if logo_text.present?
-              %span.logo-text.hidden-xs
+              %span.logo-text.d-none.d-sm-block
                 = logo_text
 
         - if current_user
diff --git a/app/views/layouts/nav/_dashboard.html.haml b/app/views/layouts/nav/_dashboard.html.haml
index 132183c2b28..2c0f3393504 100644
--- a/app/views/layouts/nav/_dashboard.html.haml
+++ b/app/views/layouts/nav/_dashboard.html.haml
@@ -8,7 +8,7 @@
         = render "layouts/nav/projects_dropdown/show"
 
   - if dashboard_nav_link?(:groups)
-    = nav_link(controller: ['dashboard/groups', 'explore/groups'], html_options: { class: "hidden-xs" }) do
+    = nav_link(controller: ['dashboard/groups', 'explore/groups'], html_options: { class: "d-none d-sm-block" }) do
       = link_to dashboard_groups_path, class: 'dashboard-shortcuts-groups qa-groups-link', title: 'Groups' do
         Groups
 
@@ -61,13 +61,13 @@
         Projects
 
   - if current_controller?('ide')
-    %li.line-separator.hidden-xs
+    %li.line-separator.d-none.d-sm-block
       = nav_link(controller: 'ide') do
         = link_to '#', class: 'dashboard-shortcuts-web-ide', title: 'Web IDE' do
           Web IDE
 
   - if current_user.admin? || Gitlab::Sherlock.enabled?
-    %li.line-separator.hidden-xs
+    %li.line-separator.d-none.d-sm-block
   - if current_user.admin?
     = nav_link(controller: 'admin/dashboard') do
       = link_to admin_root_path, class: 'admin-icon qa-admin-area-link', title: 'Admin area', aria: { label: "Admin area" }, data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
diff --git a/app/views/profiles/gpg_keys/_key.html.haml b/app/views/profiles/gpg_keys/_key.html.haml
index 2b6a8209f9b..d1fd7bc8e71 100644
--- a/app/views/profiles/gpg_keys/_key.html.haml
+++ b/app/views/profiles/gpg_keys/_key.html.haml
@@ -1,6 +1,6 @@
 %li.key-list-item
   .float-left.append-right-10
-    = icon 'key', class: "settings-list-icon hidden-xs"
+    = icon 'key', class: "settings-list-icon d-none d-sm-block"
   .key-list-item-info
     - key.emails_with_verified_status.map do |email, verified|
       = render partial: 'shared/email_with_badge', locals: { email: email, verified: verified }
diff --git a/app/views/profiles/keys/_key.html.haml b/app/views/profiles/keys/_key.html.haml
index cd5aa6c9f5e..ce20994b0f4 100644
--- a/app/views/profiles/keys/_key.html.haml
+++ b/app/views/profiles/keys/_key.html.haml
@@ -1,9 +1,9 @@
 %li.key-list-item
   .float-left.append-right-10
     - if key.valid?
-      = icon 'key', class: 'settings-list-icon hidden-xs'
+      = icon 'key', class: 'settings-list-icon d-none d-sm-block'
     - else
-      = icon 'exclamation-triangle', class: 'settings-list-icon hidden-xs has-tooltip',
+      = icon 'exclamation-triangle', class: 'settings-list-icon d-none d-sm-block has-tooltip',
         title: key.errors.full_messages.join(', ')
 
 
diff --git a/app/views/projects/_home_panel.html.haml b/app/views/projects/_home_panel.html.haml
index 043057e79ee..7651c776dca 100644
--- a/app/views/projects/_home_panel.html.haml
+++ b/app/views/projects/_home_panel.html.haml
@@ -37,7 +37,7 @@
         = render 'projects/buttons/star'
         = render 'projects/buttons/fork'
 
-      %span.hidden-xs
+      %span.d-none.d-sm-block
         - if can?(current_user, :download_code, @project)
           .project-clone-holder
             = render "shared/clone_panel"
diff --git a/app/views/projects/_issuable_by_email.html.haml b/app/views/projects/_issuable_by_email.html.haml
index c137e38ed50..585dd2ce1a1 100644
--- a/app/views/projects/_issuable_by_email.html.haml
+++ b/app/views/projects/_issuable_by_email.html.haml
@@ -18,7 +18,7 @@
         .email-modal-input-group.input-group
           = text_field_tag :issuable_email, email, class: "monospace js-select-on-focus form-control", readonly: true
           .input-group-btn
-            = clipboard_button(target: '#issuable_email', class: 'btn btn-clipboard btn-transparent hidden-xs')
+            = clipboard_button(target: '#issuable_email', class: 'btn btn-clipboard btn-transparent d-none d-sm-block')
             = mail_to email, class: 'btn btn-clipboard btn-transparent',
               subject: _("Enter the #{name} title"),
               body: _("Enter the #{name} description"),
diff --git a/app/views/projects/_last_push.html.haml b/app/views/projects/_last_push.html.haml
index 6a1035d2dc7..77077b235ba 100644
--- a/app/views/projects/_last_push.html.haml
+++ b/app/views/projects/_last_push.html.haml
@@ -1,6 +1,6 @@
 - event = last_push_event
 - if event && show_last_push_widget?(event)
-  .row-content-block.top-block.hidden-xs.white
+  .row-content-block.top-block.d-none.d-sm-block.white
     .event-last-push
       .event-last-push-text
         %span= s_("LastPushEvent|You pushed to")
diff --git a/app/views/projects/artifacts/file.html.haml b/app/views/projects/artifacts/file.html.haml
index 49e6f1ea22b..aac7a1870df 100644
--- a/app/views/projects/artifacts/file.html.haml
+++ b/app/views/projects/artifacts/file.html.haml
@@ -22,7 +22,7 @@
     .js-file-title.file-title-flex-parent
       = render 'projects/blob/header_content', blob: blob
 
-      .file-actions.hidden-xs
+      .file-actions.d-none.d-sm-block
         = render 'projects/blob/viewer_switcher', blob: blob
 
         .btn-group{ role: "group" }<
diff --git a/app/views/projects/blob/_blob.html.haml b/app/views/projects/blob/_blob.html.haml
index 849716a679b..a4b1b496b69 100644
--- a/app/views/projects/blob/_blob.html.haml
+++ b/app/views/projects/blob/_blob.html.haml
@@ -1,6 +1,6 @@
 = render "projects/blob/breadcrumb", blob: blob
 
-.info-well.hidden-xs
+.info-well.d-none.d-sm-block
   .well-segment
     %ul.blob-commit-info
       = render 'projects/commits/commit', commit: @last_commit, project: @project, ref: @ref
diff --git a/app/views/projects/branches/_branch.html.haml b/app/views/projects/branches/_branch.html.haml
index 09e5e28f5c4..483ddb28df4 100644
--- a/app/views/projects/branches/_branch.html.haml
+++ b/app/views/projects/branches/_branch.html.haml
@@ -40,7 +40,7 @@
         .bar.bar-ahead{ style: "width: #{number_commits_ahead * bar_graph_width_factor}%" }
         %span.count.count-ahead= diverging_count_label(number_commits_ahead)
 
-  .controls.hidden-xs<
+  .controls.d-none.d-sm-block<
     - if merge_project && create_mr_button?(@repository.root_ref, branch.name)
       = link_to create_mr_path(@repository.root_ref, branch.name), class: 'btn btn-secondary' do
         = _('Merge request')
diff --git a/app/views/projects/commit/_commit_box.html.haml b/app/views/projects/commit/_commit_box.html.haml
index b017cb5adfa..a663434e990 100644
--- a/app/views/projects/commit/_commit_box.html.haml
+++ b/app/views/projects/commit/_commit_box.html.haml
@@ -5,7 +5,7 @@
       #{ s_('CommitBoxTitle|Commit') }
       %span.commit-sha= @commit.short_id
     = clipboard_button(text: @commit.id, title: _("Copy commit SHA to clipboard"))
-    %span.hidden-xs authored
+    %span.d-none.d-sm-block authored
     #{time_ago_with_tooltip(@commit.authored_date)}
     %span= s_('ByAuthor|by')
     = author_avatar(@commit, size: 24)
@@ -19,7 +19,7 @@
 
   .header-action-buttons
     - if defined?(@notes_count) && @notes_count > 0
-      %span.btn.disabled.btn-grouped.hidden-xs.append-right-10
+      %span.btn.disabled.btn-grouped.d-none.d-sm-block.append-right-10
         = icon('comment')
         = @notes_count
     = link_to project_tree_path(@project, @commit), class: "btn btn-secondary append-right-10 d-none d-sm-none d-md-block" do
diff --git a/app/views/projects/commits/_commit.html.haml b/app/views/projects/commits/_commit.html.haml
index 6a8b3c6191a..189ea7af6c2 100644
--- a/app/views/projects/commits/_commit.html.haml
+++ b/app/views/projects/commits/_commit.html.haml
@@ -17,7 +17,7 @@
 = cache(cache_key, expires_in: 1.day) do
   %li.commit.flex-row.js-toggle-container{ id: "commit-#{commit.short_id}" }
 
-    .avatar-cell.hidden-xs
+    .avatar-cell.d-none.d-sm-block
       = author_avatar(commit, size: 36)
 
     .commit-detail.flex-list
@@ -33,7 +33,7 @@
           .d-block.d-sm-none
             = render_commit_status(commit, ref: ref)
         - if commit.description?
-          %button.text-expander.hidden-xs.js-toggle-button{ type: "button" } ...
+          %button.text-expander.d-none.d-sm-block.js-toggle-button{ type: "button" } ...
 
         - if commit.description?
           %pre.commit-row-description.js-toggle-content
@@ -45,7 +45,7 @@
           - commit_text =  _('%{commit_author_link} authored %{commit_timeago}') % { commit_author_link: commit_author_link, commit_timeago: commit_timeago }
           #{ commit_text.html_safe }
 
-      .commit-actions.flex-row.hidden-xs
+      .commit-actions.flex-row.d-none.d-sm-block
         - if request.xhr?
           = render partial: 'projects/commit/signature', object: commit.signature
         - else
diff --git a/app/views/projects/diffs/_diffs.html.haml b/app/views/projects/diffs/_diffs.html.haml
index 4de42f1a090..ccecff72aa7 100644
--- a/app/views/projects/diffs/_diffs.html.haml
+++ b/app/views/projects/diffs/_diffs.html.haml
@@ -11,11 +11,11 @@
         = link_to 'Expand all', url_for(params.merge(expanded: 1, format: nil)), class: 'btn btn-secondary'
       - if show_whitespace_toggle
         - if current_controller?(:commit)
-          = commit_diff_whitespace_link(diffs.project, @commit, class: 'hidden-xs')
+          = commit_diff_whitespace_link(diffs.project, @commit, class: 'd-none d-sm-block')
         - elsif current_controller?('projects/merge_requests/diffs')
-          = diff_merge_request_whitespace_link(diffs.project, @merge_request, class: 'hidden-xs')
+          = diff_merge_request_whitespace_link(diffs.project, @merge_request, class: 'd-none d-sm-block')
         - elsif current_controller?(:compare)
-          = diff_compare_whitespace_link(diffs.project, params[:from], params[:to], class: 'hidden-xs')
+          = diff_compare_whitespace_link(diffs.project, params[:from], params[:to], class: 'd-none d-sm-block')
       .btn-group
         = inline_diff_btn
         = parallel_diff_btn
diff --git a/app/views/projects/diffs/_file.html.haml b/app/views/projects/diffs/_file.html.haml
index 47bfcb21cf4..b4df654c839 100644
--- a/app/views/projects/diffs/_file.html.haml
+++ b/app/views/projects/diffs/_file.html.haml
@@ -10,7 +10,7 @@
 
     - unless diff_file.submodule?
       - blob = diff_file.blob
-      .file-actions.hidden-xs
+      .file-actions.d-none.d-sm-block
         - if blob&.readable_text?
           = link_to '#', class: 'js-toggle-diff-comments btn active has-tooltip', title: "Toggle comments for this file", disabled: @diff_notes_disabled do
             = icon('comment')
diff --git a/app/views/projects/hook_logs/_index.html.haml b/app/views/projects/hook_logs/_index.html.haml
index 8096d9530c3..a35dc69680c 100644
--- a/app/views/projects/hook_logs/_index.html.haml
+++ b/app/views/projects/hook_logs/_index.html.haml
@@ -18,7 +18,7 @@
           %tr
             %td
               = render partial: 'shared/hook_logs/status_label', locals: { hook_log: hook_log }
-            %td.hidden-xs
+            %td.d-none.d-sm-block
               %span.label.label-gray.deploy-project-label
                 = hook_log.trigger.singularize.titleize
             %td
diff --git a/app/views/projects/issues/_issue.html.haml b/app/views/projects/issues/_issue.html.haml
index 3829ee9314e..b9244dee906 100644
--- a/app/views/projects/issues/_issue.html.haml
+++ b/app/views/projects/issues/_issue.html.haml
@@ -12,25 +12,25 @@
                 = confidential_icon(issue)
             = link_to issue.title, issue_path(issue)
           - if issue.tasks?
-            %span.task-status.hidden-xs
+            %span.task-status.d-none.d-sm-block
               &nbsp;
               = issue.task_status
 
         .issuable-info
           %span.issuable-reference
             #{issuable_reference(issue)}
-          %span.issuable-authored.hidden-xs
+          %span.issuable-authored.d-none.d-sm-block
             &middot;
             opened #{time_ago_with_tooltip(issue.created_at, placement: 'bottom')}
             by #{link_to_member(@project, issue.author, avatar: false)}
           - if issue.milestone
-            %span.issuable-milestone.hidden-xs
+            %span.issuable-milestone.d-none.d-sm-block
               &nbsp;
               = link_to project_issues_path(issue.project, milestone_title: issue.milestone.title), data: { html: 1, toggle: 'tooltip', title: issuable_milestone_tooltip_title(issue) } do
                 = icon('clock-o')
                 = issue.milestone.title
           - if issue.due_date
-            %span.issuable-due-date.hidden-xs.has-tooltip{ class: "#{'cred' if issue.overdue?}", title: _('Due date') }
+            %span.issuable-due-date.d-none.d-sm-block.has-tooltip{ class: "#{'cred' if issue.overdue?}", title: _('Due date') }
               &nbsp;
               = icon('calendar')
               = issue.due_date.to_s(:medium)
@@ -50,5 +50,5 @@
 
           = render 'shared/issuable_meta_data', issuable: issue
 
-        .float-right.issuable-updated-at.hidden-xs
+        .float-right.issuable-updated-at.d-none.d-sm-block
           %span updated #{time_ago_with_tooltip(issue.updated_at, placement: 'bottom', html_class: 'issue_update_ago')}
diff --git a/app/views/projects/issues/show.html.haml b/app/views/projects/issues/show.html.haml
index 51b5445c5a3..7a4980b2afd 100644
--- a/app/views/projects/issues/show.html.haml
+++ b/app/views/projects/issues/show.html.haml
@@ -12,11 +12,11 @@
   .detail-page-header-body
     .issuable-status-box.status-box.status-box-issue-closed{ class: issue_button_visibility(@issue, false) }
       = sprite_icon('mobile-issue-close', size: 16, css_class: 'd-block d-sm-none')
-      %span.hidden-xs
+      %span.d-none.d-sm-block
         Closed
     .issuable-status-box.status-box.status-box-open{ class: issue_button_visibility(@issue, true) }
       = sprite_icon('issue-open-m', size: 16, css_class: 'd-block d-sm-none')
-      %span.hidden-xs Open
+      %span.d-none.d-sm-block Open
 
     .issuable-meta
       - if @issue.confidential
diff --git a/app/views/projects/jobs/_user.html.haml b/app/views/projects/jobs/_user.html.haml
index 9f5d214f2ed..ceba4e84618 100644
--- a/app/views/projects/jobs/_user.html.haml
+++ b/app/views/projects/jobs/_user.html.haml
@@ -1,6 +1,6 @@
 by
 %a{ href: user_path(@build.user) }
-  %span.hidden-xs
+  %span.d-none.d-sm-block
     = image_tag avatar_icon_for_user(@build.user, 24), class: "avatar s24"
     %strong{ data: { toggle: 'tooltip', placement: 'top', title: @build.user.to_reference } }
       = @build.user.name
diff --git a/app/views/projects/jobs/show.html.haml b/app/views/projects/jobs/show.html.haml
index 4e80672d0fe..27f47e581bb 100644
--- a/app/views/projects/jobs/show.html.haml
+++ b/app/views/projects/jobs/show.html.haml
@@ -58,7 +58,7 @@
     - if @build.has_trace?
       .build-trace-container.prepend-top-default
         .top-bar.js-top-bar
-          .js-truncated-info.truncated-info.hidden-xs.float-left.hidden<
+          .js-truncated-info.truncated-info.d-none.d-sm-block.float-left.hidden<
             Showing last
             %span.js-truncated-info-size.truncated-info-size><
             of log -
diff --git a/app/views/projects/merge_requests/_merge_request.html.haml b/app/views/projects/merge_requests/_merge_request.html.haml
index bf7ce914133..3fc505fc478 100644
--- a/app/views/projects/merge_requests/_merge_request.html.haml
+++ b/app/views/projects/merge_requests/_merge_request.html.haml
@@ -9,19 +9,19 @@
         %span.merge-request-title-text
           = link_to merge_request.title, merge_request_path(merge_request)
         - if merge_request.tasks?
-          %span.task-status.hidden-xs
+          %span.task-status.d-none.d-sm-block
             &nbsp;
             = merge_request.task_status
 
       .issuable-info
         %span.issuable-reference
           #{issuable_reference(merge_request)}
-        %span.issuable-authored.hidden-xs
+        %span.issuable-authored.d-none.d-sm-block
           &middot;
           opened #{time_ago_with_tooltip(merge_request.created_at, placement: 'bottom')}
           by #{link_to_member(@project, merge_request.author, avatar: false)}
         - if merge_request.milestone
-          %span.issuable-milestone.hidden-xs
+          %span.issuable-milestone.d-none.d-sm-block
             &nbsp;
             = link_to project_merge_requests_path(merge_request.project, milestone_title: merge_request.milestone.title), data: { html: 1, toggle: 'tooltip', title: issuable_milestone_tooltip_title(merge_request) } do
               = icon('clock-o')
@@ -40,17 +40,17 @@
     .issuable-meta
       %ul.controls
         - if merge_request.merged?
-          %li.issuable-status.hidden-xs
+          %li.issuable-status.d-none.d-sm-block
             MERGED
         - elsif merge_request.closed?
-          %li.issuable-status.hidden-xs
+          %li.issuable-status.d-none.d-sm-block
             = icon('ban')
             CLOSED
         - if merge_request.head_pipeline
-          %li.issuable-pipeline-status.hidden-xs
+          %li.issuable-pipeline-status.d-none.d-sm-block
             = render_pipeline_status(merge_request.head_pipeline)
         - if merge_request.open? && merge_request.broken?
-          %li.issuable-pipeline-broken.hidden-xs
+          %li.issuable-pipeline-broken.d-none.d-sm-block
             = link_to merge_request_path(merge_request), class: "has-tooltip", title: _('Cannot be merged automatically') do
               = icon('exclamation-triangle')
         - if merge_request.assignee
@@ -59,5 +59,5 @@
 
         = render 'shared/issuable_meta_data', issuable: merge_request
 
-      .float-right.issuable-updated-at.hidden-xs
+      .float-right.issuable-updated-at.d-none.d-sm-block
         %span updated #{time_ago_with_tooltip(merge_request.updated_at, placement: 'bottom', html_class: 'merge_request_updated_ago')}
diff --git a/app/views/projects/merge_requests/_mr_title.html.haml b/app/views/projects/merge_requests/_mr_title.html.haml
index aab01a791f3..9d84671cddc 100644
--- a/app/views/projects/merge_requests/_mr_title.html.haml
+++ b/app/views/projects/merge_requests/_mr_title.html.haml
@@ -8,7 +8,7 @@
   .detail-page-header-body
     .issuable-status-box.status-box{ class: status_box_class(@merge_request) }
       = sprite_icon(@merge_request.state_icon_name, size: 16, css_class: 'd-block d-sm-none')
-      %span.hidden-xs
+      %span.d-none.d-sm-block
         = @merge_request.state_human_name
 
     .issuable-meta
diff --git a/app/views/projects/merge_requests/diffs/_commit_widget.html.haml b/app/views/projects/merge_requests/diffs/_commit_widget.html.haml
index 2e5594f8cbe..dab95b97346 100644
--- a/app/views/projects/merge_requests/diffs/_commit_widget.html.haml
+++ b/app/views/projects/merge_requests/diffs/_commit_widget.html.haml
@@ -1,5 +1,5 @@
 - if @commit
-  .info-well.hidden-xs.prepend-top-default
+  .info-well.d-none.d-sm-block.prepend-top-default
     .well-segment
       %ul.blob-commit-info
         = render 'projects/commits/commit', commit: @commit, merge_request: @merge_request, view_details: true
diff --git a/app/views/projects/new.html.haml b/app/views/projects/new.html.haml
index 1163ea89970..285b1e2526a 100644
--- a/app/views/projects/new.html.haml
+++ b/app/views/projects/new.html.haml
@@ -31,15 +31,15 @@
       %ul.nav-links.gitlab-tabs{ role: 'tablist' }
         %li{ class: active_when(active_tab == 'blank'), role: 'presentation' }
           %a{ href: '#blank-project-pane', id: 'blank-project-tab', data: { toggle: 'tab' }, role: 'tab' }
-            %span.hidden-xs Blank project
+            %span.d-none.d-sm-block Blank project
             %span.visible-xs Blank
         %li{ class: active_when(active_tab == 'template'), role: 'presentation' }
           %a{ href: '#create-from-template-pane', id: 'create-from-template-tab', data: { toggle: 'tab' }, role: 'tab' }
-            %span.hidden-xs Create from template
+            %span.d-none.d-sm-block Create from template
             %span.visible-xs Template
         %li{ class: active_when(active_tab == 'import'), role: 'presentation' }
           %a{ href: '#import-project-pane', id: 'import-project-tab', data: { toggle: 'tab' }, role: 'tab' }
-            %span.hidden-xs Import project
+            %span.d-none.d-sm-block Import project
             %span.visible-xs Import
 
       .tab-content.gitlab-tab-content
diff --git a/app/views/projects/pages_domains/show.html.haml b/app/views/projects/pages_domains/show.html.haml
index f625e964b77..87a5d560787 100644
--- a/app/views/projects/pages_domains/show.html.haml
+++ b/app/views/projects/pages_domains/show.html.haml
@@ -31,7 +31,7 @@
         .input-group
           = text_field_tag :domain_dns, dns_record , class: "monospace js-select-on-focus form-control", readonly: true
           .input-group-btn
-            = clipboard_button(target: '#domain_dns', class: 'btn-default hidden-xs')
+            = clipboard_button(target: '#domain_dns', class: 'btn-default d-none d-sm-block')
         %p.help-block
           To access this domain create a new DNS record
 
@@ -51,7 +51,7 @@
           .input-group
             = text_field_tag :domain_verification, verification_record, class: "monospace js-select-on-focus form-control", readonly: true
             .input-group-btn
-              = clipboard_button(target: '#domain_verification', class: 'btn-default hidden-xs')
+              = clipboard_button(target: '#domain_verification', class: 'btn-default d-none d-sm-block')
           %p.help-block
             - help_link = help_page_path('user/project/pages/getting_started_part_three.md', anchor: 'dns-txt-record')
             To #{link_to 'verify ownership', help_link} of your domain,
diff --git a/app/views/projects/registry/repositories/_tag.html.haml b/app/views/projects/registry/repositories/_tag.html.haml
index 989e96174e7..7b5e31bc4b7 100644
--- a/app/views/projects/registry/repositories/_tag.html.haml
+++ b/app/views/projects/registry/repositories/_tag.html.haml
@@ -24,7 +24,7 @@
         \-
   - if can?(current_user, :update_container_image, @project)
     %td.content
-      .controls.hidden-xs.float-right
+      .controls.d-none.d-sm-block.float-right
         = link_to project_registry_repository_tag_path(@project, tag.repository, tag.name),
                   method: :delete,
                   class: 'btn btn-remove has-tooltip',
diff --git a/app/views/projects/services/_index.html.haml b/app/views/projects/services/_index.html.haml
index 915c6b22162..7a945ccc3de 100644
--- a/app/views/projects/services/_index.html.haml
+++ b/app/views/projects/services/_index.html.haml
@@ -8,13 +8,13 @@
       %colgroup
         %col
         %col
-        %col.hidden-xs
+        %col.d-none.d-sm-block
         %col{ width: "120" }
       %thead
         %tr
           %th
           %th Service
-          %th.hidden-xs Description
+          %th.d-none.d-sm-block Description
           %th Last edit
       - @services.sort_by(&:title).each do |service|
         %tr
@@ -23,7 +23,7 @@
           %td
             = link_to edit_project_service_path(@project, service.to_param) do
               %strong= service.title
-          %td.hidden-xs
+          %td.d-none.d-sm-block
             = service.description
           %td.light
             - if service.updated_at.present?
diff --git a/app/views/projects/snippets/_actions.html.haml b/app/views/projects/snippets/_actions.html.haml
index faa9f06b364..c505dcc1ba8 100644
--- a/app/views/projects/snippets/_actions.html.haml
+++ b/app/views/projects/snippets/_actions.html.haml
@@ -1,6 +1,6 @@
 - return unless current_user
 
-.hidden-xs
+.d-none.d-sm-block
   - if can?(current_user, :update_project_snippet, @snippet)
     = link_to edit_project_snippet_path(@project, @snippet), class: "btn btn-grouped" do
       Edit
diff --git a/app/views/projects/tree/_blob_item.html.haml b/app/views/projects/tree/_blob_item.html.haml
index 8c1c532cb3e..38b60157794 100644
--- a/app/views/projects/tree/_blob_item.html.haml
+++ b/app/views/projects/tree/_blob_item.html.haml
@@ -7,6 +7,6 @@
       %span= file_name
     - if is_lfs_blob
       %span.label.label-lfs.prepend-left-5 LFS
-  %td.hidden-xs.tree-commit
+  %td.d-none.d-sm-block.tree-commit
   %td.tree-time-ago.cgray.text-right
     = render 'projects/tree/spinner'
diff --git a/app/views/projects/tree/_submodule_item.html.haml b/app/views/projects/tree/_submodule_item.html.haml
index 04d52361db0..9a4a62cc3a7 100644
--- a/app/views/projects/tree/_submodule_item.html.haml
+++ b/app/views/projects/tree/_submodule_item.html.haml
@@ -3,4 +3,4 @@
     %i.fa.fa-archive.fa-fw
     = submodule_link(submodule_item, @ref)
   %td
-  %td.hidden-xs
+  %td.d-none.d-sm-block
diff --git a/app/views/projects/tree/_tree_content.html.haml b/app/views/projects/tree/_tree_content.html.haml
index 95b08aa8f2f..a5e4b0927e9 100644
--- a/app/views/projects/tree/_tree_content.html.haml
+++ b/app/views/projects/tree/_tree_content.html.haml
@@ -4,7 +4,7 @@
       %thead
         %tr
           %th= s_('ProjectFileTree|Name')
-          %th.hidden-xs
+          %th.d-none.d-sm-block
             .float-left= _('Last commit')
           %th.text-right= _('Last update')
       - if @path.present?
@@ -12,7 +12,7 @@
           %td.tree-item-file-name
             = link_to "..", project_tree_path(@project, up_dir_path), class: 'prepend-left-10'
           %td
-          %td.hidden-xs
+          %td.d-none.d-sm-block
 
       = render_tree(tree)
 
diff --git a/app/views/projects/tree/_tree_item.html.haml b/app/views/projects/tree/_tree_item.html.haml
index af3816fc9f4..4c44958746f 100644
--- a/app/views/projects/tree/_tree_item.html.haml
+++ b/app/views/projects/tree/_tree_item.html.haml
@@ -4,6 +4,6 @@
     - path = flatten_tree(@path, tree_item)
     = link_to project_tree_path(@project, tree_join(@id || @commit.id, path)), class: 'str-truncated', title: path do
       %span= path
-  %td.hidden-xs.tree-commit
+  %td.d-none.d-sm-block.tree-commit
   %td.tree-time-ago.text-right
     = render 'projects/tree/spinner'
diff --git a/app/views/shared/_commit_well.html.haml b/app/views/shared/_commit_well.html.haml
index 50e3d80a84d..6f1fe9bfdc5 100644
--- a/app/views/shared/_commit_well.html.haml
+++ b/app/views/shared/_commit_well.html.haml
@@ -1,4 +1,4 @@
-.info-well.hidden-xs.project-last-commit.append-bottom-default
+.info-well.d-none.d-sm-block.project-last-commit.append-bottom-default
   .well-segment
     %ul.blob-commit-info
       = render 'projects/commits/commit', commit: commit, ref: ref, project: project
diff --git a/app/views/shared/_issuable_meta_data.html.haml b/app/views/shared/_issuable_meta_data.html.haml
index 430d9a9dd76..6cc8c485666 100644
--- a/app/views/shared/_issuable_meta_data.html.haml
+++ b/app/views/shared/_issuable_meta_data.html.haml
@@ -5,21 +5,21 @@
 - issuable_mr        = @issuable_meta_data[issuable.id].merge_requests_count
 
 - if issuable_mr > 0
-  %li.issuable-mr.hidden-xs.has-tooltip{ title: _('Related merge requests') }
+  %li.issuable-mr.d-none.d-sm-block.has-tooltip{ title: _('Related merge requests') }
     = image_tag('icon-merge-request-unmerged.svg', class: 'icon-merge-request-unmerged')
     = issuable_mr
 
 - if upvotes > 0
-  %li.issuable-upvotes.hidden-xs.has-tooltip{ title: _('Upvotes') }
+  %li.issuable-upvotes.d-none.d-sm-block.has-tooltip{ title: _('Upvotes') }
     = icon('thumbs-up')
     = upvotes
 
 - if downvotes > 0
-  %li.issuable-downvotes.hidden-xs.has-tooltip{ title: _('Downvotes') }
+  %li.issuable-downvotes.d-none.d-sm-block.has-tooltip{ title: _('Downvotes') }
     = icon('thumbs-down')
     = downvotes
 
-%li.issuable-comments.hidden-xs
+%li.issuable-comments.d-none.d-sm-block
   = link_to issuable_url, class: ['has-tooltip', ('no-comments' if note_count.zero?)], title: _('Comments') do
     = icon('comments')
     = note_count
diff --git a/app/views/shared/_project_limit.html.haml b/app/views/shared/_project_limit.html.haml
index 3a1f3de85b0..5c3d6baa718 100644
--- a/app/views/shared/_project_limit.html.haml
+++ b/app/views/shared/_project_limit.html.haml
@@ -1,5 +1,5 @@
 - if cookies[:hide_project_limit_message].blank? && !current_user.d-none_project_limit && !current_user.can_create_project? && current_user.projects_limit > 0
-  .project-limit-message.alert.alert-warning.hidden-xs
+  .project-limit-message.alert.alert-warning.d-none.d-sm-block
     You won't be able to create new projects because you have reached your project limit.
 
     .float-right
diff --git a/app/views/shared/groups/_group.html.haml b/app/views/shared/groups/_group.html.haml
index 90395600d4e..a1b901aaffa 100644
--- a/app/views/shared/groups/_group.html.haml
+++ b/app/views/shared/groups/_group.html.haml
@@ -16,7 +16,7 @@
 
   .avatar-container.s40
     = link_to group do
-      = group_icon(group, class: "avatar s40 hidden-xs")
+      = group_icon(group, class: "avatar s40 d-none d-sm-block")
   .title
     = link_to group.full_name, group, class: 'group-name'
 
diff --git a/app/views/shared/hook_logs/_content.html.haml b/app/views/shared/hook_logs/_content.html.haml
index c80b179d525..b04a5767d32 100644
--- a/app/views/shared/hook_logs/_content.html.haml
+++ b/app/views/shared/hook_logs/_content.html.haml
@@ -6,7 +6,7 @@
 
 %p
   %strong Trigger:
-  %td.hidden-xs
+  %td.d-none.d-sm-block
     %span.label.label-gray.deploy-project-label
       = hook_log.trigger.singularize.titleize
 %p
diff --git a/app/views/shared/members/_group.html.haml b/app/views/shared/members/_group.html.haml
index 91ca7b26819..769312bd84c 100644
--- a/app/views/shared/members/_group.html.haml
+++ b/app/views/shared/members/_group.html.haml
@@ -42,4 +42,4 @@
         class: 'btn btn-remove prepend-left-10' do
         %span.d-block.d-sm-none
           Delete
-        = icon('trash', class: 'hidden-xs')
+        = icon('trash', class: 'd-none d-sm-block')
diff --git a/app/views/shared/members/_member.html.haml b/app/views/shared/members/_member.html.haml
index aac55110fff..4ca7631a64f 100644
--- a/app/views/shared/members/_member.html.haml
+++ b/app/views/shared/members/_member.html.haml
@@ -53,7 +53,7 @@
         - if member.can_resend_invite?
           = link_to icon('paper-plane'), polymorphic_path([:resend_invite, member]),
                     method: :post,
-                    class: 'btn btn-secondary prepend-left-10 hidden-xs',
+                    class: 'btn btn-secondary prepend-left-10 d-none d-sm-block',
                     title: 'Resend invite'
 
         - if user != current_user && member.can_update?
@@ -92,7 +92,7 @@
             %span{ class: ('.d-block.d-sm-none' unless force_mobile_view) }
               Grant access
             - unless force_mobile_view
-              = icon('check inverse', class: 'hidden-xs')
+              = icon('check inverse', class: 'd-none d-sm-block')
 
         - if member.can_remove?
           - if current_user == user
@@ -109,6 +109,6 @@
               %span{ class: ('.d-block.d-sm-none' unless force_mobile_view) }
                 Delete
               - unless force_mobile_view
-                = icon('trash', class: 'hidden-xs')
+                = icon('trash', class: 'd-none d-sm-block')
       - else
         %span.member-access-text= member.human_access
diff --git a/app/views/shared/snippets/_blob.html.haml b/app/views/shared/snippets/_blob.html.haml
index 11f0fa7c49f..2132fcbccc5 100644
--- a/app/views/shared/snippets/_blob.html.haml
+++ b/app/views/shared/snippets/_blob.html.haml
@@ -2,7 +2,7 @@
 .js-file-title.file-title-flex-parent
   = render 'projects/blob/header_content', blob: blob
 
-  .file-actions.hidden-xs
+  .file-actions.d-none.d-sm-block
     = render 'projects/blob/viewer_switcher', blob: blob
 
     .btn-group{ role: "group" }<
diff --git a/app/views/shared/snippets/_header.html.haml b/app/views/shared/snippets/_header.html.haml
index 12df79a28c7..52fe3be92fe 100644
--- a/app/views/shared/snippets/_header.html.haml
+++ b/app/views/shared/snippets/_header.html.haml
@@ -7,7 +7,7 @@
     %span.creator
       Authored
       = time_ago_with_tooltip(@snippet.created_at, placement: 'bottom', html_class: 'snippet_updated_ago')
-      by #{link_to_member(@project, @snippet.author, size: 24, author_class: "author item-title", avatar_class: "hidden-xs")}
+      by #{link_to_member(@project, @snippet.author, size: 24, author_class: "author item-title", avatar_class: "d-none d-sm-block")}
 
   .detail-page-header-actions
     - if @snippet.project_id?
diff --git a/app/views/shared/snippets/_snippet.html.haml b/app/views/shared/snippets/_snippet.html.haml
index 7d142e335fc..e2acd74bc66 100644
--- a/app/views/shared/snippets/_snippet.html.haml
+++ b/app/views/shared/snippets/_snippet.html.haml
@@ -1,13 +1,13 @@
 - link_project = local_assigns.fetch(:link_project, false)
 
 %li.snippet-row
-  = image_tag avatar_icon_for_user(snippet.author), class: "avatar s40 hidden-xs", alt: ''
+  = image_tag avatar_icon_for_user(snippet.author), class: "avatar s40 d-none d-sm-block", alt: ''
 
   .title
     = link_to reliable_snippet_path(snippet) do
       = snippet.title
     - if snippet.file_name
-      %span.snippet-filename.monospace.hidden-xs
+      %span.snippet-filename.monospace.d-none.d-sm-block
         = snippet.file_name
 
     %ul.controls
@@ -28,7 +28,7 @@
     = link_to user_snippets_path(snippet.author) do
       = snippet.author_name
     - if link_project && snippet.project_id?
-      %span.hidden-xs
+      %span.d-none.d-sm-block
         in
         = link_to project_path(snippet.project) do
           = snippet.project.full_name
diff --git a/app/views/snippets/_actions.html.haml b/app/views/snippets/_actions.html.haml
index bf47d42e5c9..cf04a0ab675 100644
--- a/app/views/snippets/_actions.html.haml
+++ b/app/views/snippets/_actions.html.haml
@@ -1,6 +1,6 @@
 - return unless current_user
 
-.hidden-xs
+.d-none.d-sm-block
   - if can?(current_user, :update_personal_snippet, @snippet)
     = link_to edit_snippet_path(@snippet), class: "btn btn-grouped" do
       Edit
diff --git a/app/views/snippets/index.html.haml b/app/views/snippets/index.html.haml
index 9b3134e66be..9b4a7dbe68d 100644
--- a/app/views/snippets/index.html.haml
+++ b/app/views/snippets/index.html.haml
@@ -6,7 +6,7 @@
       Snippets
   %li.breadcrumb-item
     = @user.name
-  .float-right.hidden-xs
+  .float-right.d-none.d-sm-block
     = link_to user_path(@user) do
       #{@user.name} profile page
 
diff --git a/app/views/users/show.html.haml b/app/views/users/show.html.haml
index 4bf01ecb48c..94cbf8b234c 100644
--- a/app/views/users/show.html.haml
+++ b/app/views/users/show.html.haml
@@ -107,7 +107,7 @@
     .tab-content
       - if profile_tab?(:activity)
         #activity.tab-pane
-          .row-content-block.calender-block.white.second-block.hidden-xs
+          .row-content-block.calender-block.white.second-block.d-none.d-sm-block
             .user-calendar{ data: { calendar_path: user_calendar_path(@user, :json), calendar_activities_path: user_calendar_activities_path, utc_offset: Time.zone.utc_offset } }
               %h4.center.light
                 %i.fa.fa-spinner.fa-spin
diff --git a/spec/javascripts/notes_spec.js b/spec/javascripts/notes_spec.js
index ec56ab0e2f0..c709e7f13a3 100644
--- a/spec/javascripts/notes_spec.js
+++ b/spec/javascripts/notes_spec.js
@@ -975,7 +975,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);
@@ -1021,7 +1021,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..715c7a36361 100644
--- a/spec/javascripts/projects_dropdown/components/search_spec.js
+++ b/spec/javascripts/projects_dropdown/components/search_spec.js
@@ -92,7 +92,7 @@ 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(vm.$el.classList.contains('d-none d-sm-block')).toBeTruthy();
       expect(inputEl).not.toBe(null);
       expect(inputEl.getAttribute('placeholder')).toBe('Search your projects');
       expect(vm.$el.querySelector('.search-icon')).toBeDefined();