Merge branch 'bootstrap4' into 'master'

Upgrade to Bootstrap 4

Closes #45185 and #46710

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

.scss-lint.yml

@@ -46,8 +46,9 @@ linters:
   # - properties
   # - @include declarations with inner @content
   # - nested rule sets.
+  # Disabled to minimize Bootstrap migration footprint
   DeclarationOrder:
-    enabled: true
+    enabled: false
 
   # `scss-lint:disable` control comments should be preceded by a comment
   # explaining why these linters are being disabled for this file.

Gemfile

@@ -257,7 +257,6 @@ gem 'sass-rails', '~> 5.0.6'
 gem 'uglifier', '~> 2.7.2'
 
 gem 'addressable', '~> 2.5.2'
-gem 'bootstrap-sass', '~> 3.3.0'
 gem 'font-awesome-rails', '~> 4.7'
 gem 'gemojione', '~> 3.3'
 gem 'gon', '~> 6.2'

Gemfile.lock

@@ -69,9 +69,6 @@ GEM
     attr_encrypted (3.1.0)
       encryptor (~> 3.0.0)
     attr_required (1.0.0)
-    autoprefixer-rails (6.2.3)
-      execjs
-      json
     awesome_print (1.2.0)
     axiom-types (0.1.1)
       descendants_tracker (~> 0.0.4)
@@ -91,9 +88,6 @@ GEM
     binding_of_caller (0.7.2)
       debug_inspector (>= 0.0.1)
     blankslate (2.1.2.4)
-    bootstrap-sass (3.3.6)
-      autoprefixer-rails (>= 5.2.1)
-      sass (>= 3.3.4)
     bootstrap_form (2.7.0)
     brakeman (4.2.1)
     browser (2.2.0)
@@ -992,7 +986,6 @@ DEPENDENCIES
   benchmark-ips (~> 2.3.0)
   better_errors (~> 2.1.0)
   binding_of_caller (~> 0.7.2)
-  bootstrap-sass (~> 3.3.0)
   bootstrap_form (~> 2.7.0)
   brakeman (~> 4.2)
   browser (~> 2.2)

app/assets/javascripts/awards_handler.js

@@ -345,7 +345,7 @@ class AwardsHandler {
       counter.text(counterNumber - 1);
       this.removeYouFromUserList($emojiButton);
     } else if (emoji === 'thumbsup' || emoji === 'thumbsdown') {
-      $emojiButton.tooltip('destroy');
+      $emojiButton.tooltip('dispose');
       counter.text('0');
       this.removeYouFromUserList($emojiButton);
       if ($emojiButton.parents('.note').length) {
@@ -358,7 +358,7 @@ class AwardsHandler {
   }
 
   removeEmoji($emojiButton) {
-    $emojiButton.tooltip('destroy');
+    $emojiButton.tooltip('dispose');
     $emojiButton.remove();
     const $votesBlock = this.getVotesBlock();
     if ($votesBlock.find('.js-emoji-btn').length === 0) {
@@ -392,7 +392,7 @@ class AwardsHandler {
       .removeAttr('data-title')
       .removeAttr('data-original-title')
       .attr('title', this.toSentence(authors))
-      .tooltip('fixTitle');
+      .tooltip('_fixTitle');
   }
 
   addYouToUserList(votesBlock, emoji) {
@@ -405,7 +405,7 @@ class AwardsHandler {
     users.unshift('You');
     return awardBlock
       .attr('title', this.toSentence(users))
-      .tooltip('fixTitle');
+      .tooltip('_fixTitle');
   }
 
   createAwardButtonForVotesBlock(votesBlock, emojiName) {

app/assets/javascripts/badges/components/badge.vue

@@ -89,7 +89,7 @@ export default {
       v-show="hasError"
       class="btn-group"
     >
-      <div class="btn btn-default btn-xs disabled">
+      <div class="btn btn-default btn-sm disabled">
         <icon
           class="prepend-left-8 append-right-8"
           name="doc_image"
@@ -98,7 +98,7 @@ export default {
         />
       </div>
       <div
-        class="btn btn-default btn-xs disabled"
+        class="btn btn-default btn-sm disabled"
       >
         <span class="prepend-left-8 append-right-8">{{ s__('Badges|No badge image') }}</span>
       </div>
@@ -106,7 +106,7 @@ export default {
 
     <button
       v-show="hasError"
-      class="btn btn-transparent btn-xs text-primary"
+      class="btn btn-transparent btn-sm text-primary"
       type="button"
       v-tooltip
       :title="s__('Badges|Reload badge image')"

app/assets/javascripts/badges/components/badge_list.vue

@@ -23,8 +23,8 @@ export default {
 </script>
 
 <template>
-  <div class="panel panel-default">
-    <div class="panel-heading">
+  <div class="card">
+    <div class="card-header">
       {{ s__('Badges|Your badges') }}
       <span
         v-show="!isLoading"
@@ -33,19 +33,19 @@ export default {
     </div>
     <loading-icon
       v-show="isLoading"
-      class="panel-body"
+      class="card-body"
       size="2"
     />
     <div
       v-if="hasNoBadges"
-      class="panel-body"
+      class="card-body"
     >
       <span v-if="isGroupBadge">{{ s__('Badges|This group has no badges') }}</span>
       <span v-else>{{ s__('Badges|This project has no badges') }}</span>
     </div>
     <div
       v-else
-      class="panel-body"
+      class="card-body"
     >
       <badge-list-row
         v-for="badge in badges"

app/assets/javascripts/behaviors/copy_to_clipboard.js

@@ -8,10 +8,10 @@ function showTooltip(target, title) {
   if (!$target.data('hideTooltip')) {
     $target
       .attr('title', title)
-      .tooltip('fixTitle')
+      .tooltip('_fixTitle')
       .tooltip('show')
       .attr('title', originalTitle)
-      .tooltip('fixTitle');
+      .tooltip('_fixTitle');
   }
 }
 

app/assets/javascripts/behaviors/quick_submit.js

@@ -69,7 +69,7 @@ $(document).on('keyup.quick_submit', '.js-quick-submit input[type=submit], .js-q
   $this.tooltip({
     container: 'body',
     html: 'true',
-    placement: 'auto top',
+    placement: 'top',
     title,
     trigger: 'manual',
   });

app/assets/javascripts/behaviors/requires_input.js

@@ -42,9 +42,9 @@ $.fn.requiresInput = function requiresInput() {
 function hideOrShowHelpBlock(form) {
   const selected = $('.js-select-namespace option:selected');
   if (selected.length && selected.data('optionsParent') === 'groups') {
-    form.find('.help-block').hide();
+    form.find('.form-text.text-muted').hide();
   } else if (selected.length) {
-    form.find('.help-block').show();
+    form.find('.form-text.text-muted').show();
   }
 }
 

app/assets/javascripts/blob/balsamiq/balsamiq_viewer.js

@@ -2,9 +2,9 @@ import sqljs from 'sql.js';
 import { template as _template } from 'underscore';
 
 const PREVIEW_TEMPLATE = _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>

app/assets/javascripts/blob/sketch/index.js

@@ -44,7 +44,7 @@ export default class SketchLoader {
     previewLink.href = previewUrl;
     previewLink.target = '_blank';
     previewImage.src = previewUrl;
-    previewImage.className = 'img-responsive';
+    previewImage.className = 'img-fluid';
 
     previewLink.appendChild(previewImage);
     this.container.appendChild(previewLink);

app/assets/javascripts/blob/viewer/index.js

@@ -116,7 +116,7 @@ export default class BlobViewer {
       this.copySourceBtn.classList.add('disabled');
     }
 
-    $(this.copySourceBtn).tooltip('fixTitle');
+    $(this.copySourceBtn).tooltip('_fixTitle');
   }
 
   switchToViewer(name) {

app/assets/javascripts/boards/components/board_card.vue

@@ -77,7 +77,7 @@ export default {
 
 <template>
   <li
-    class="card"
+    class="board-card"
     :class="{
       'user-can-drag': !disabled && issue.id,
       'is-disabled': disabled || !issue.id,

app/assets/javascripts/boards/components/board_new_issue.vue

@@ -92,7 +92,7 @@ export default {
 
 <template>
   <div class="board-new-issue-form">
-    <div class="card">
+    <div class="board-card">
       <form @submit="submit($event)">
         <div
           class="flash-container"
@@ -122,7 +122,7 @@ export default {
         />
         <div class="clearfix prepend-top-10">
           <button
-            class="btn btn-success pull-left"
+            class="btn btn-success float-left"
             type="submit"
             :disabled="disabled"
             ref="submit-button"
@@ -130,7 +130,7 @@ export default {
             Submit issue
           </button>
           <button
-            class="btn btn-default pull-right"
+            class="btn btn-default float-right"
             type="button"
             @click="cancel"
           >

app/assets/javascripts/boards/components/issue_card_inner.js

@@ -135,8 +135,8 @@ gl.issueBoards.IssueCardInner = Vue.extend({
   },
   template: `
     <div>
-      <div class="card-header">
-        <h4 class="card-title">
+      <div class="board-card-header">
+        <h4 class="board-card-title">
           <i
             class="fa fa-eye-slash confidential-icon"
             v-if="issue.confidential"
@@ -147,13 +147,13 @@ gl.issueBoards.IssueCardInner = Vue.extend({
             :href="issue.path"
             :title="issue.title">{{ issue.title }}</a>
           <span
-            class="card-number"
+            class="board-card-number"
             v-if="issueId"
           >
             {{ issue.referencePath }}
           </span>
         </h4>
-        <div class="card-assignee">
+        <div class="board-card-assignee">
           <user-avatar-link
             v-for="(assignee, index) in issue.assignees"
             :key="assignee.id"
@@ -175,11 +175,11 @@ gl.issueBoards.IssueCardInner = Vue.extend({
         </div>
       </div>
       <div
-        class="card-footer"
+        class="board-card-footer"
         v-if="showLabelFooter"
       >
         <button
-          class="label color-label has-tooltip"
+          class="badge color-label has-tooltip"
           v-for="label in issue.labels"
           type="button"
           v-if="showLabel(label)"

app/assets/javascripts/boards/components/modal/empty_state.js

@@ -41,10 +41,10 @@ gl.issueBoards.ModalEmptyState = Vue.extend({
   template: `
     <section class="empty-state">
       <div class="row">
-        <div class="col-xs-12 col-sm-6 col-sm-push-6">
+        <div class="col-xs-12 col-sm-6 order-sm-last">
           <aside class="svg-content"><img :src="emptyStateSvg"/></aside>
         </div>
-        <div class="col-xs-12 col-sm-6 col-sm-pull-6">
+        <div class="col-xs-12 col-sm-6 order-sm-first">
           <div class="text-content">
             <h4>{{ contents.title }}</h4>
             <p v-html="contents.content"></p>

app/assets/javascripts/boards/components/modal/footer.js

@@ -58,7 +58,7 @@ gl.issueBoards.ModalFooter = Vue.extend({
   template: `
     <footer
       class="form-actions add-issues-footer">
-      <div class="pull-left">
+      <div class="float-left">
         <button
           class="btn btn-success"
           type="button"
@@ -72,7 +72,7 @@ gl.issueBoards.ModalFooter = Vue.extend({
         <lists-dropdown></lists-dropdown>
       </div>
       <button
-        class="btn btn-default pull-right"
+        class="btn btn-default float-right"
         type="button"
         @click="toggleModal(false)">
         Cancel

app/assets/javascripts/boards/components/modal/list.js

@@ -133,9 +133,9 @@ gl.issueBoards.ModalList = Vue.extend({
         <div
           v-for="issue in group"
           v-if="showIssue(issue)"
-          class="card-parent">
+          class="board-card-parent">
           <div
-            class="card"
+            class="board-card"
             :class="{ 'is-active': issue.selected }"
             @click="toggleIssue($event, issue)">
             <issue-card-inner

app/assets/javascripts/boards/components/modal/tabs.js

@@ -24,7 +24,7 @@ gl.issueBoards.ModalTabs = Vue.extend({
             role="button"
             @click.prevent="changeTab('all')">
             Open issues
-            <span class="badge">
+            <span class="badge badge-pill">
               {{ issuesCount }}
             </span>
           </a>
@@ -35,7 +35,7 @@ gl.issueBoards.ModalTabs = Vue.extend({
             role="button"
             @click.prevent="changeTab('selected')">
             Selected issues
-            <span class="badge">
+            <span class="badge badge-pill">
               {{ selectedCount }}
             </span>
           </a>

app/assets/javascripts/boards/index.js

@@ -214,7 +214,7 @@ export default () => {
           if (this.disabled) {
             $tooltip.tooltip();
           } else {
-            $tooltip.tooltip('destroy');
+            $tooltip.tooltip('dispose');
           }
         });
       },

app/assets/javascripts/ci_variable_list/ci_variable_list.js

@@ -141,6 +141,11 @@ export default class VariableList {
       $rowClone.find(entry.selector).val(entry.default);
     });
 
+    // Close any dropdowns
+    $rowClone.find('.dropdown-menu.show').each((index, $dropdown) => {
+      $dropdown.classList.remove('show');
+    });
+
     this.initRow($rowClone);
 
     $row.after($rowClone);

app/assets/javascripts/clusters/components/applications.vue

@@ -191,11 +191,11 @@ export default {
                     :value="ingressExternalIp"
                     readonly
                   />
-                  <span class="input-group-btn">
+                  <span class="input-group-append">
                     <clipboard-button
                       :text="ingressExternalIp"
                       :title="s__('ClusterIntegration|Copy Ingress IP Address to clipboard')"
-                      class="js-clipboard-btn"
+                      class="input-group-text js-clipboard-btn"
                     />
                   </span>
                 </div>

app/assets/javascripts/commons/bootstrap.js

 import $ from 'jquery';
 
 // bootstrap jQuery plugins
-import 'bootstrap-sass/assets/javascripts/bootstrap/affix';
-import 'bootstrap-sass/assets/javascripts/bootstrap/alert';
-import 'bootstrap-sass/assets/javascripts/bootstrap/button';
-import 'bootstrap-sass/assets/javascripts/bootstrap/dropdown';
-import 'bootstrap-sass/assets/javascripts/bootstrap/modal';
-import 'bootstrap-sass/assets/javascripts/bootstrap/tab';
-import 'bootstrap-sass/assets/javascripts/bootstrap/transition';
-import 'bootstrap-sass/assets/javascripts/bootstrap/tooltip';
-import 'bootstrap-sass/assets/javascripts/bootstrap/popover';
+import 'bootstrap';
 
 // custom jQuery functions
 $.fn.extend({

app/assets/javascripts/compare_autocomplete.js

@@ -78,7 +78,7 @@ export default function initCompareAutocomplete(limitTo = null, clickHandler = (
     $dropdownContainer.on('click', '.dropdown-content a', e => {
       $dropdown.prop('title', e.target.text.replace(/_+?/g, '-'));
       if ($dropdown.hasClass('has-tooltip')) {
-        $dropdown.tooltip('fixTitle');
+        $dropdown.tooltip('_fixTitle');
       }
     });
   });

app/assets/javascripts/create_merge_request_dropdown.js

@@ -61,8 +61,8 @@ export default class CreateMergeRequestDropdown {
   }
 
   available() {
-    this.availableButton.classList.remove('hide');
-    this.unavailableButton.classList.add('hide');
+    this.availableButton.classList.remove('hidden');
+    this.unavailableButton.classList.add('hidden');
   }
 
   bindEvents() {
@@ -232,7 +232,7 @@ export default class CreateMergeRequestDropdown {
   }
 
   hide() {
-    this.wrapperEl.classList.add('hide');
+    this.wrapperEl.classList.add('hidden');
   }
 
   init() {
@@ -406,8 +406,8 @@ export default class CreateMergeRequestDropdown {
   }
 
   unavailable() {
-    this.availableButton.classList.add('hide');
-    this.unavailableButton.classList.remove('hide');
+    this.availableButton.classList.add('hidden');
+    this.unavailableButton.classList.remove('hidden');
   }
 
   updateBranchName(suggestedBranchName) {

app/assets/javascripts/cycle_analytics/components/limit_warning_component.vue

@@ -16,7 +16,7 @@
 <template>
   <span
     v-if="count === 50"
-    class="events-info pull-right"
+    class="events-info float-right"
   >
     <i
       class="fa fa-warning"

app/assets/javascripts/diff_notes/components/diff_note_avatars.js

@@ -79,7 +79,7 @@ const DiffNoteAvatars = Vue.extend({
     storeState: {
       handler() {
         this.$nextTick(() => {
-          $('.has-tooltip', this.$el).tooltip('fixTitle');
+          $('.has-tooltip', this.$el).tooltip('_fixTitle');
 
           // We need to add/remove a class to an element that is outside the Vue instance
           this.addNoCommentClass();
@@ -138,7 +138,7 @@ const DiffNoteAvatars = Vue.extend({
       this.$nextTick(() => {
         this.setDiscussionVisible();
 
-        $('.has-tooltip', this.$el).tooltip('fixTitle');
+        $('.has-tooltip', this.$el).tooltip('_fixTitle');
         $('.has-tooltip', this.$el).tooltip('hide');
       });
     },

app/assets/javascripts/diff_notes/components/resolve_btn.js

@@ -61,7 +61,7 @@ const ResolveBtn = Vue.extend({
       this.$nextTick(() => {
         $(this.$refs.button)
           .tooltip('hide')
-          .tooltip('fixTitle');
+          .tooltip('_fixTitle');
       });
     },
     resolve: function () {

app/assets/javascripts/environments/components/environment_actions.vue

@@ -74,7 +74,7 @@
       </span>
     </button>
 
-    <ul class="dropdown-menu dropdown-menu-align-right">
+    <ul class="dropdown-menu dropdown-menu-right">
       <li
         v-for="(action, i) in actions"
         :key="i">

app/assets/javascripts/environments/components/environment_item.vue

@@ -486,14 +486,14 @@
           {{ model.folderName }}
         </span>
 
-        <span class="badge">
+        <span class="badge badge-pill">
           {{ model.size }}
         </span>
       </span>
     </div>
 
     <div
-      class="table-section section-10 deployment-column hidden-xs hidden-sm"
+      class="table-section section-10 deployment-column d-none d-sm-none d-md-block"
       role="gridcell"
     >
       <span v-if="shouldRenderDeploymentID">
@@ -513,7 +513,7 @@
     </div>
 
     <div
-      class="table-section section-15 hidden-xs hidden-sm"
+      class="table-section section-15 d-none d-sm-none d-md-block"
       role="gridcell"
     >
       <a

app/assets/javascripts/environments/components/environment_monitoring.vue

@@ -28,7 +28,7 @@
 <template>
   <a
     v-tooltip
-    class="btn monitoring-url hidden-xs hidden-sm"
+    class="btn monitoring-url d-none d-sm-none d-md-block"
     data-container="body"
     rel="noopener noreferrer nofollow"
     :href="monitoringUrl"

app/assets/javascripts/environments/components/environment_rollback.vue

@@ -40,7 +40,7 @@
 <template>
   <button
     type="button"
-    class="btn hidden-xs hidden-sm"
+    class="btn d-none d-sm-none d-md-block"
     @click="onClick"
     :disabled="isLoading"
   >

app/assets/javascripts/environments/components/environment_stop.vue

@@ -43,7 +43,7 @@
         if (confirm('Are you sure you want to stop this environment?')) {
           this.isLoading = true;
 
-          $(this.$el).tooltip('destroy');
+          $(this.$el).tooltip('dispose');
 
           eventHub.$emit('postAction', this.stopUrl);
         }
@@ -55,7 +55,7 @@
   <button
     v-tooltip
     type="button"
-    class="btn stop-env-link hidden-xs hidden-sm"
+    class="btn stop-env-link d-none d-sm-none d-md-block"
     data-container="body"
     @click="onClick"
     :disabled="isLoading"

app/assets/javascripts/environments/components/environment_terminal_button.vue

@@ -30,7 +30,7 @@
 <template>
   <a
     v-tooltip
-    class="btn terminal-button hidden-xs hidden-sm"
+    class="btn terminal-button d-none d-sm-none d-md-block"
     data-container="body"
     :title="title"
     :aria-label="title"

app/assets/javascripts/feature_highlight/feature_highlight.js

@@ -24,7 +24,7 @@ export function setupFeatureHighlightPopover(id, debounceTimeout = 300) {
       template: `
         <div class="popover feature-highlight-popover" role="tooltip">
           <div class="arrow"></div>
-          <div class="popover-content"></div>
+          <div class="popover-body"></div>
         </div>
       `,
     })

app/assets/javascripts/gl_dropdown.js

@@ -374,7 +374,7 @@ GitLabDropdown = (function() {
           $relatedTarget = $(e.relatedTarget);
           $dropdownMenu = $relatedTarget.closest('.dropdown-menu');
           if ($dropdownMenu.length === 0) {
-            return _this.dropdown.removeClass('open');
+            return _this.dropdown.removeClass('show');
           }
         }
       };
@@ -801,7 +801,7 @@ GitLabDropdown = (function() {
     if (this.options.filterable) {
       const initialScrollTop = $(window).scrollTop();
 
-      if (this.dropdown.is('.open')) {
+      if (this.dropdown.is('.show') && !this.filterInput.is(':focus')) {
         this.filterInput.focus();
       }
 

app/assets/javascripts/gl_field_error.js

@@ -62,7 +62,7 @@ export default class GlFieldError {
     this.inputDomElement = this.inputElement.get(0);
     this.form = formErrors;
     this.errorMessage = this.inputElement.attr('title') || 'This field is required.';
-    this.fieldErrorElement = $(`<p class='${errorMessageClass} hide'>${this.errorMessage}</p>`);
+    this.fieldErrorElement = $(`<p class='${errorMessageClass} hidden'>${this.errorMessage}</p>`);
 
     this.state = {
       valid: false,
@@ -146,8 +146,8 @@ export default class GlFieldError {
 
   renderInvalid() {
     this.inputElement.addClass(inputErrorClass);
-    this.scopedSiblings.hide();
-    return this.fieldErrorElement.show();
+    this.scopedSiblings.addClass('hidden');
+    return this.fieldErrorElement.removeClass('hidden');
   }
 
   renderClear() {
@@ -157,7 +157,7 @@ export default class GlFieldError {
       this.accessCurrentValue(trimmedInput);
     }
     this.inputElement.removeClass(inputErrorClass);
-    this.scopedSiblings.hide();
-    this.fieldErrorElement.hide();
+    this.scopedSiblings.addClass('hidden');
+    this.fieldErrorElement.addClass('hidden');
   }
 }

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

app/assets/javascripts/ide/components/ide.vue

@@ -102,12 +102,12 @@ export default {
             class="ide-empty-state"
           >
             <div class="row js-empty-state">
-              <div class="col-xs-12">
+              <div class="col-12">
                 <div class="svg-content svg-250">
                   <img :src="emptyStateSvgPath" />
                 </div>
               </div>
-              <div class="col-xs-12">
+              <div class="col-12">
                 <div class="text-content text-center">
                   <h4>
                     Welcome to the GitLab IDE

app/assets/javascripts/ide/components/ide_file_buttons.vue

@@ -32,14 +32,14 @@ export default {
 <template>
   <div
     v-if="showButtons"
-    class="pull-right ide-btn-group"
+    class="float-right ide-btn-group"
   >
     <a
       v-tooltip
       v-if="!file.binary"
       :href="file.blamePath"
       :title="__('Blame')"
-      class="btn btn-xs btn-transparent blame"
+      class="btn btn-sm btn-transparent blame"
     >
       <icon
         name="blame"
@@ -50,7 +50,7 @@ export default {
       v-tooltip
       :href="file.commitsPath"
       :title="__('History')"
-      class="btn btn-xs btn-transparent history"
+      class="btn btn-sm btn-transparent history"
     >
       <icon
         name="history"
@@ -61,7 +61,7 @@ export default {
       v-tooltip
       :href="file.permalink"
       :title="__('Permalink')"
-      class="btn btn-xs btn-transparent permalink"
+      class="btn btn-sm btn-transparent permalink"
     >
       <icon
         name="link"
@@ -72,7 +72,7 @@ export default {
       v-tooltip
       :href="file.rawPath"
       target="_blank"
-      class="btn btn-xs btn-transparent prepend-left-10 raw"
+      class="btn btn-sm btn-transparent prepend-left-10 raw"
       rel="noopener noreferrer"
       :title="rawDownloadButtonLabel">
       <icon

app/assets/javascripts/ide/components/new_dropdown/index.vue

@@ -57,7 +57,7 @@ export default {
     <div
       class="dropdown"
       :class="{
-        open: dropdownOpen,
+        show: dropdownOpen,
       }"
     >
       <button
@@ -69,12 +69,12 @@ export default {
         <icon
           name="plus"
           :size="12"
-          css-classes="pull-left"
+          css-classes="float-left"
         />
         <icon
           name="arrow-down"
           :size="12"
-          css-classes="pull-left"
+          css-classes="float-left"
         />
       </button>
       <ul

app/assets/javascripts/ide/components/new_dropdown/modal.vue

@@ -70,12 +70,12 @@ export default {
     @submit="createEntryInStore"
   >
     <form
-      class="form-horizontal"
       slot="body"
       @submit.prevent="createEntryInStore"
+      class="form-group row append-bottom-0"
     >
       <fieldset class="form-group append-bottom-0">
-        <label class="label-light col-sm-3 ide-new-modal-label">
+        <label class="label-light col-form-label col-sm-3 ide-new-modal-label">
           {{ __('Name') }}
         </label>
         <div class="col-sm-9">

app/assets/javascripts/ide/components/repo_editor.vue

@@ -197,7 +197,7 @@ export default {
   >
     <div class="ide-mode-tabs clearfix" >
       <ul
-        class="nav-links pull-left"
+        class="nav-links float-left"
         v-if="!shouldHideEditor && isEditModeActive"
       >
         <li :class="editTabCSS">

app/assets/javascripts/ide/components/repo_file.vue

@@ -144,7 +144,7 @@ export default {
             :file="file"
           />
         </span>
-        <span class="pull-right ide-file-icon-holder">
+        <span class="float-right ide-file-icon-holder">
           <mr-file-icon
             v-if="file.mrChange"
           />
@@ -177,7 +177,7 @@ export default {
           :project-id="file.projectId"
           :branch="file.branchId"
           :path="file.path"
-          class="pull-right prepend-left-8"
+          class="float-right prepend-left-8"
         />
       </div>
     </div>

app/assets/javascripts/ide/components/repo_loading_file.vue

@@ -25,13 +25,13 @@
       />
     </td>
     <template v-if="!leftPanelCollapsed">
-      <td class="hidden-sm hidden-xs">
+      <td class="d-none d-sm-none d-md-block">
         <skeleton-loading-container
           :small="true"
         />
       </td>
 
-      <td class="hidden-xs">
+      <td class="d-none d-sm-block">
         <skeleton-loading-container
           class="animation-container-right"
           :small="true"

app/assets/javascripts/issue_show/components/edit_actions.vue

@@ -51,7 +51,7 @@
 <template>
   <div class="prepend-top-default append-bottom-default clearfix">
     <button
-      class="btn btn-save pull-left"
+      class="btn btn-save float-left"
       :class="{ disabled: formState.updateLoading || !isSubmitEnabled }"
       type="submit"
       :disabled="formState.updateLoading || !isSubmitEnabled"
@@ -64,14 +64,14 @@
       </i>
     </button>
     <button
-      class="btn btn-default pull-right"
+      class="btn btn-default float-right"
       type="button"
       @click="closeForm">
       Cancel
     </button>
     <button
       v-if="shouldShowDeleteButton"
-      class="btn btn-danger pull-right append-right-default"
+      class="btn btn-danger float-right append-right-default"
       :class="{ disabled: deleteLoading }"
       type="button"
       :disabled="deleteLoading"

app/assets/javascripts/issue_show/components/form.vue

@@ -84,7 +84,7 @@
       <div
         :class="{
           'col-sm-8 col-lg-9': hasIssuableTemplates,
-          'col-xs-12': !hasIssuableTemplates,
+          'col-12': !hasIssuableTemplates,
         }"
       >
         <title-field

app/assets/javascripts/job.js

 import $ from 'jquery';
 import _ from 'underscore';
+import StickyFill from 'stickyfilljs';
 import axios from './lib/utils/axios_utils';
 import { visitUrl } from './lib/utils/url_utility';
 import bp from './breakpoints';
@@ -82,17 +83,11 @@ export default class Job {
     /**
       If the browser does not support position sticky, it returns the position as static.
       If the browser does support sticky, then we allow the browser to handle it, if not
-      then we default back to Bootstraps affix
+      then we use a polyfill
     **/
     if (this.$topBar.css('position') !== 'static') return;
 
-    const offsetTop = this.$buildTrace.offset().top;
-
-    this.$topBar.affix({
-      offset: {
-        top: offsetTop,
-      },
-    });
+    StickyFill.add(this.$topBar);
   }
 
   // eslint-disable-next-line class-methods-use-this

app/assets/javascripts/jobs/components/header.vue

@@ -56,7 +56,7 @@ export default {
         actions.push({
           label: 'New issue',
           path: this.job.new_issue_path,
-          cssClass: 'js-new-issue btn btn-new btn-inverted visible-md-block visible-lg-block',
+          cssClass: 'js-new-issue btn btn-new btn-inverted d-none d-md-block d-lg-block d-xl-block',
           type: 'link',
         });
       }

app/assets/javascripts/jobs/components/sidebar_detail_row.vue

@@ -39,7 +39,7 @@
 
     <span
       v-if="hasHelpURL"
-      class="help-button pull-right"
+      class="help-button float-right"
     >
       <a
         :href="helpUrl"

app/assets/javascripts/jobs/components/sidebar_details_block.vue

@@ -48,7 +48,7 @@ export default {
       return `${this.job.runner.description} (#${this.job.runner.id})`;
     },
     retryButtonClass() {
-      let className = 'js-retry-button pull-right btn btn-retry visible-md-block visible-lg-block';
+      let className = 'js-retry-button pull-right btn btn-retry d-none d-md-block d-lg-block d-xl-block';
       className +=
         this.job.status && this.job.recoverable
           ? ' btn-primary'
@@ -105,7 +105,7 @@ export default {
         type="button"
         :aria-label="__('Toggle Sidebar')"
         class="btn btn-blank gutter-toggle pull-right
-          visible-xs-block visible-sm-block js-sidebar-build-toggle"
+          d-block d-sm-block d-md-none js-sidebar-build-toggle"
       >
         <i
           aria-hidden="true"

app/assets/javascripts/label_manager.js

@@ -35,7 +35,7 @@ export default class LabelManager {
     const $label = $(`#${$btn.data('domId')}`);
     const action = $btn.parents('.js-prioritized-labels').length ? 'remove' : 'add';
     const $tooltip = $(`#${$btn.find('.has-tooltip:visible').attr('aria-describedby')}`);
-    $tooltip.tooltip('destroy');
+    $tooltip.tooltip('dispose');
     _this.toggleLabelPriority($label, action);
     _this.toggleEmptyState($label, $btn, action);
   }

app/assets/javascripts/labels_select.js

@@ -120,7 +120,7 @@ export default class LabelsSelect {
 
             $sidebarLabelTooltip
               .attr('title', labelTooltipTitle)
-              .tooltip('fixTitle');
+              .tooltip('_fixTitle');
 
             $('.has-tooltip', $value).tooltip({
               container: 'body'

app/assets/javascripts/lib/utils/common_utils.js

@@ -51,7 +51,7 @@ export const rstrip = (val) => {
   return val;
 };
 
-export const updateTooltipTitle = ($tooltipEl, newTitle) => $tooltipEl.attr('title', newTitle).tooltip('fixTitle');
+export const updateTooltipTitle = ($tooltipEl, newTitle) => $tooltipEl.attr('title', newTitle).tooltip('_fixTitle');
 
 export const disableButtonIfEmptyField = (fieldSelector, buttonSelector, eventName = 'input') => {
   const field = $(fieldSelector);

app/assets/javascripts/lib/utils/datetime_utility.js

@@ -143,8 +143,7 @@ export const localTimeAgo = ($timeagoEls, setTimeago = true) => {
     if (setTimeago) {
       // Recreate with custom template
       $(el).tooltip({
-        template:
-          '<div class="tooltip local-timeago" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',
+        template: '<div class="tooltip local-timeago" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>',
       });
     }
 

app/assets/javascripts/main.js

@@ -46,9 +46,9 @@ document.addEventListener('beforeunload', () => {
   // Unbind scroll events
   $(document).off('scroll');
   // Close any open tooltips
-  $('.has-tooltip, [data-toggle="tooltip"]').tooltip('destroy');
+  $('.has-tooltip, [data-toggle="tooltip"]').tooltip('dispose');
   // Close any open popover
-  $('[data-toggle="popover"]').popover('destroy');
+  $('[data-toggle="popover"]').popover('dispose');
 });
 
 window.addEventListener('hashchange', handleLocationHash);
@@ -111,7 +111,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
   $('.remove-row').on('ajax:success', function removeRowAjaxSuccessCallback() {
     $(this)
-      .tooltip('destroy')
+      .tooltip('dispose')
       .closest('li')
       .fadeOut();
   });
@@ -141,9 +141,9 @@ document.addEventListener('DOMContentLoaded', () => {
   });
 
   // Initialize tooltips
-  $.fn.tooltip.Constructor.DEFAULTS.trigger = 'hover';
   $body.tooltip({
     selector: '.has-tooltip, [data-toggle="tooltip"]',
+    trigger: 'hover',
     placement(tip, el) {
       return $(el).data('placement') || 'bottom';
     },
@@ -196,7 +196,7 @@ document.addEventListener('DOMContentLoaded', () => {
     $container.remove();
   });
 
-  $('.navbar-toggle').on('click', () => {
+  $('.navbar-toggler').on('click', () => {
     $('.header-content').toggleClass('menu-expanded');
     gl.lazyLoader.loadCheck();
   });

app/assets/javascripts/merge_request_tabs.js

@@ -362,7 +362,7 @@ export default class MergeRequestTabs {
   //
   // status - Boolean, true to show, false to hide
   toggleLoading(status) {
-    $('.mr-loading-status .loading').toggle(status);
+    $('.mr-loading-status .loading').toggleClass('hidden', status);
   }
 
   diffViewType() {

app/assets/javascripts/monitoring/components/graph_group.vue

@@ -17,12 +17,12 @@ export default {
 <template>
   <div
     v-if="showPanels"
-    class="panel panel-default prometheus-panel"
+    class="card prometheus-panel"
   >
-    <div class="panel-heading">
+    <div class="card-header">
       <h4>{{ name }}</h4>
     </div>
-    <div class="panel-body prometheus-graph-group">
+    <div class="card-body prometheus-graph-group">
       <slot></slot>
     </div>
   </div>

app/assets/javascripts/notes.js

@@ -1231,8 +1231,8 @@ export default class Notes {
       const isForced = forceShow === true || forceShow === false;
       const showNow = forceShow === true || (!isCurrentlyShown && !isForced);
 
-      targetRow.toggle(showNow);
-      notesContent.toggle(showNow);
+      targetRow.toggleClass('hide', !showNow);
+      notesContent.toggleClass('hide', !showNow);
     }
 
     if (addForm) {
@@ -1675,7 +1675,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(
@@ -1694,7 +1694,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)}`);

app/assets/javascripts/notes/components/comment_form.vue

@@ -321,7 +321,7 @@ Please check your network connection and try again.`;
       <li class="timeline-entry">
         <div class="timeline-entry-inner">
           <div class="flash-container error-alert timeline-content"></div>
-          <div class="timeline-icon hidden-xs hidden-sm">
+          <div class="timeline-icon d-none d-sm-none d-md-block">
             <user-avatar-link
               v-if="author"
               :link-href="author.path"
@@ -369,7 +369,7 @@ js-gfm-input js-autosize markdown-area js-vue-textarea"
               </markdown-field>
               <div class="note-form-actions">
                 <div
-                  class="pull-left btn-group
+                  class="float-left btn-group
 append-right-10 comment-type-dropdown js-comment-type-dropdown droplab-dropdown">
                   <button
                     @click.prevent="handleSave()"
@@ -383,6 +383,7 @@ append-right-10 comment-type-dropdown js-comment-type-dropdown droplab-dropdown"
                     name="button"
                     type="button"
                     class="btn comment-btn note-type-toggle js-note-new-discussion dropdown-toggle"
+                    data-display="static"
                     data-toggle="dropdown"
                     aria-label="Open comment type dropdown">
                     <i

app/assets/javascripts/notes/components/noteable_discussion.vue

@@ -100,7 +100,7 @@ export default {
         : 'div';
     },
     wrapperClass() {
-      return this.isDiffDiscussion ? '' : 'panel panel-default';
+      return this.isDiffDiscussion ? '' : 'card';
     },
   },
   mounted() {
@@ -263,7 +263,7 @@ Please check your network connection and try again.`;
                   class="discussion-reply-holder">
                   <template v-if="!isReplying && canReply">
                     <div
-                      class="btn-group-justified discussion-with-resolve-btn"
+                      class="btn-group d-flex discussion-with-resolve-btn"
                       role="group">
                       <div
                         class="btn-group"

app/assets/javascripts/notifications_form.js

@@ -15,7 +15,7 @@ export default class NotificationsForm {
 
   toggleCheckbox(e) {
     const $checkbox = $(e.currentTarget);
-    const $parent = $checkbox.closest('.checkbox');
+    const $parent = $checkbox.closest('.form-check');
 
     this.saveEvent($checkbox, $parent);
   }

app/assets/javascripts/pages/admin/admin.js

@@ -25,7 +25,7 @@ export default function adminInit() {
 
   $('body').on('click', '.js-toggle-colors-link', (e) => {
     e.preventDefault();
-    $('.js-toggle-colors-container').toggle();
+    $('.js-toggle-colors-container').toggleClass('hide');
   });
 
   $('.log-tabs a').on('click', function logTabsClick(e) {

app/assets/javascripts/pages/profiles/two_factor_auths/index.js

@@ -5,7 +5,7 @@ document.addEventListener('DOMContentLoaded', () => {
   const twoFactorNode = document.querySelector('.js-two-factor-auth');
   const skippable = twoFactorNode.dataset.twoFactorSkippable === 'true';
   if (skippable) {
-    const button = `<a class="btn btn-xs btn-warning pull-right" data-method="patch" href="${twoFactorNode.dataset.two_factor_skip_url}">Configure it later</a>`;
+    const button = `<a class="btn btn-sm btn-warning float-right" data-method="patch" href="${twoFactorNode.dataset.two_factor_skip_url}">Configure it later</a>`;
     const flashAlert = document.querySelector('.flash-alert .container-fluid');
     if (flashAlert) flashAlert.insertAdjacentHTML('beforeend', button);
   }

app/assets/javascripts/pages/projects/shared/permissions/components/project_setting_row.vue

@@ -42,7 +42,7 @@
     </label>
     <span
       v-if="helpText"
-      class="help-block"
+      class="form-text text-muted"
     >
       {{ helpText }}
     </span>

app/assets/javascripts/pages/users/user_tabs.js

@@ -181,7 +181,7 @@ export default class UserTabs {
 
   toggleLoading(status) {
     return this.$parentEl.find('.loading-status .loading')
-      .toggle(status);
+      .toggleClass('hidden', status);
   }
 
   setCurrentAction(source) {
@@ -195,6 +195,6 @@ export default class UserTabs {
   }
 
   getCurrentAction() {
-    return this.$parentEl.find('.nav-links .active a').data('action');
+    return this.$parentEl.find('.nav-links a.active').data('action');
   }
 }

app/assets/javascripts/performance_bar/components/request_selector.vue

@@ -37,7 +37,7 @@ export default {
 <template>
   <div
     id="peek-request-selector"
-    class="pull-right"
+    class="float-right"
   >
     <select v-model="currentRequestId">
       <option

app/assets/javascripts/pipelines/components/blank_state.vue

@@ -17,13 +17,13 @@
 
 <template>
   <div class="row empty-state">
-    <div class="col-xs-12">
+    <div class="col-12">
       <div class="svg-content">
         <img :src="svgPath" />
       </div>
     </div>
 
-    <div class="col-xs-12 text-center">
+    <div class="col-12 text-center">
       <div class="text-content">
         <h4>{{ message }}</h4>
       </div>

app/assets/javascripts/pipelines/components/empty_state.vue

@@ -19,13 +19,13 @@
 </script>
 <template>
   <div class="row empty-state js-empty-state">
-    <div class="col-xs-12">
+    <div class="col-12">
       <div class="svg-content svg-250">
         <img :src="emptyStateSvgPath" />
       </div>
     </div>
 
-    <div class="col-xs-12">
+    <div class="col-12">
       <div class="text-content">
 
         <template v-if="canSetCi">

app/assets/javascripts/pipelines/components/graph/job_component.vue

@@ -96,6 +96,7 @@ export default {
       :class="cssClassJobName"
       data-container="body"
       data-html="true"
+      data-boundary="viewport"
       class="js-pipeline-graph-job-link"
     >
 

app/assets/javascripts/pipelines/components/pipeline_url.vue

@@ -46,7 +46,7 @@
   };
 </script>
 <template>
-  <div class="table-section section-15 hidden-xs hidden-sm pipeline-tags">
+  <div class="table-section section-15 d-none d-sm-none d-md-block pipeline-tags">
     <a
       :href="pipeline.path"
       class="js-pipeline-url-link">
@@ -69,35 +69,35 @@
       <span
         v-if="pipeline.flags.latest"
         v-tooltip
-        class="js-pipeline-url-latest label label-success"
+        class="js-pipeline-url-latest badge badge-success"
         title="Latest pipeline for this branch">
         latest
       </span>
       <span
         v-if="pipeline.flags.yaml_errors"
         v-tooltip
-        class="js-pipeline-url-yaml label label-danger"
+        class="js-pipeline-url-yaml badge badge-danger"
         :title="pipeline.yaml_errors">
         yaml invalid
       </span>
       <span
         v-if="pipeline.flags.failure_reason"
         v-tooltip
-        class="js-pipeline-url-failure label label-danger"
+        class="js-pipeline-url-failure badge badge-danger"
         :title="pipeline.failure_reason">
         error
       </span>
       <a
         v-if="pipeline.flags.auto_devops"
         tabindex="0"
-        class="js-pipeline-url-autodevops label label-info autodevops-badge"
+        class="js-pipeline-url-autodevops badge badge-info autodevops-badge"
         v-popover="popoverOptions"
         role="button">
         Auto DevOps
       </a>
       <span
         v-if="pipeline.flags.stuck"
-        class="js-pipeline-url-stuck label label-warning">
+        class="js-pipeline-url-stuck badge badge-warning">
         stuck
       </span>
     </div>

app/assets/javascripts/pipelines/components/pipelines_actions.vue

@@ -63,7 +63,7 @@
       <loading-icon v-if="isLoading" />
     </button>
 
-    <ul class="dropdown-menu dropdown-menu-align-right">
+    <ul class="dropdown-menu dropdown-menu-right">
       <li
         v-for="(action, i) in actions"
         :key="i"

app/assets/javascripts/pipelines/components/pipelines_artifacts.vue

@@ -37,7 +37,7 @@
       >
       </i>
     </button>
-    <ul class="dropdown-menu dropdown-menu-align-right">
+    <ul class="dropdown-menu dropdown-menu-right">
       <li
         v-for="(artifact, i) in artifacts"
         :key="i">

app/assets/javascripts/pipelines/components/pipelines_table_row.vue

@@ -331,7 +331,7 @@
 
         <pipelines-artifacts-component
           v-if="pipeline.details.artifacts.length"
-          class="hidden-xs hidden-sm"
+          class="d-none d-sm-none d-md-block"
           :artifacts="pipeline.details.artifacts"
         />
 

app/assets/javascripts/pipelines/components/time_ago.vue

@@ -75,7 +75,7 @@
       </p>
 
       <p
-        class="finished-at hidden-xs hidden-sm"
+        class="finished-at d-none d-sm-none d-md-block"
         v-if="hasFinishedTime"
       >
 

app/assets/javascripts/profile/account/components/update_username.vue

@@ -86,7 +86,11 @@ Please update your Git repository remotes as soon as possible.`),
     <div class="form-group">
       <label :for="$options.inputId">{{ s__('Profiles|Path') }}</label>
       <div class="input-group">
-        <div class="input-group-addon">{{ rootUrl }}</div>
+        <div class="input-group-prepend">
+          <div class="input-group-text">
+            {{ rootUrl }}
+          </div>
+        </div>
         <input
           :id="$options.inputId"
           class="form-control"

app/assets/javascripts/project_fork.js

@@ -4,6 +4,6 @@ export default () => {
   $('.js-fork-thumbnail').on('click', function forkThumbnailClicked() {
     if ($(this).hasClass('disabled')) return false;
 
-    return $('.js-fork-content').toggle();
+    return $('.js-fork-content').toggleClass('hidden');
   });
 };

app/assets/javascripts/project_label_subscription.js

@@ -42,7 +42,7 @@ export default class ProjectLabelSubscription {
         const $button = $(button);
 
         if ($button.attr('data-original-title')) {
-          $button.tooltip('hide').attr('data-original-title', newAction).tooltip('fixTitle');
+          $button.tooltip('hide').attr('data-original-title', newAction).tooltip('_fixTitle');
         }
 
         return button;

app/assets/javascripts/project_visibility.js

@@ -7,7 +7,7 @@ function setVisibilityOptions(namespaceSelector) {
   const selectedNamespace = namespaceSelector.options[namespaceSelector.selectedIndex];
   const { name, visibility, visibilityLevel, showPath, editPath } = selectedNamespace.dataset;
 
-  document.querySelectorAll('.visibility-level-setting .radio').forEach((option) => {
+  document.querySelectorAll('.visibility-level-setting .form-check').forEach((option) => {
     const optionInput = option.querySelector('input[type=radio]');
     const optionValue = optionInput ? optionInput.value : 0;
     const optionTitle = option.querySelector('.option-title');

app/assets/javascripts/projects/project_new.js

@@ -66,8 +66,8 @@ const bindEvents = () => {
       .on('click', (e) => { e.preventDefault(); })
       .popover({
         title: $pushNewProjectTipTrigger.data('title'),
-        placement: 'auto bottom',
-        html: 'true',
+        placement: 'bottom',
+        html: true,
         content: $('.push-new-project-tip-template').html(),
       })
       .on('shown.bs.popover', () => {

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"

app/assets/javascripts/prometheus_metrics/prometheus_metrics.js

@@ -31,7 +31,7 @@ export default class PrometheusMetrics {
   /* eslint-disable class-methods-use-this */
   handlePanelToggle(e) {
     const $toggleBtn = $(e.currentTarget);
-    const $currentPanelBody = $toggleBtn.closest('.panel').find('.panel-body');
+    const $currentPanelBody = $toggleBtn.closest('.card').find('.card-body');
     $currentPanelBody.toggleClass('hidden');
     if ($toggleBtn.hasClass('fa-caret-down')) {
       $toggleBtn.removeClass('fa-caret-down').addClass('fa-caret-right');

app/assets/javascripts/registry/components/collapsible_container.vue

@@ -84,7 +84,7 @@
         css-class="btn-default btn-transparent btn-clipboard"
       />
 
-      <div class="controls hidden-xs pull-right">
+      <div class="controls d-none d-sm-block float-right">
         <button
           v-if="repo.canDelete"
           type="button"

app/assets/javascripts/registry/components/table_registry.vue

@@ -120,7 +120,7 @@
             <button
               v-if="item.canDelete"
               type="button"
-              class="js-delete-registry btn btn-danger hidden-xs pull-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"

app/assets/javascripts/right_sidebar.js

@@ -108,7 +108,7 @@ Sidebar.prototype.todoUpdateDone = function(data) {
       .attr('title', $el.data(`${attrPrefix}Text`));
 
     if ($el.hasClass('has-tooltip')) {
-      $el.tooltip('fixTitle');
+      $el.tooltip('_fixTitle');
     }
 
     if ($el.data(`${attrPrefix}Icon`)) {

app/assets/javascripts/sidebar/components/assignees/assignee_title.vue

@@ -41,7 +41,7 @@ export default {
     </i>
     <a
       v-if="editable"
-      class="js-sidebar-dropdown-toggle edit-link pull-right"
+      class="js-sidebar-dropdown-toggle edit-link float-right"
       href="#"
     >
       {{ __('Edit') }}
@@ -49,7 +49,7 @@ export default {
     <a
       v-if="showToggle"
       aria-label="Toggle sidebar"
-      class="gutter-toggle pull-right js-sidebar-toggle"
+      class="gutter-toggle float-right js-sidebar-toggle"
       href="#"
       role="button"
     >

app/assets/javascripts/sidebar/components/assignees/assignees.vue

@@ -130,6 +130,7 @@ export default {
       v-tooltip
       data-container="body"
       data-placement="left"
+      data-boundary="viewport"
       :title="collapsedTooltipTitle"
     >
       <i

app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue

@@ -75,6 +75,7 @@ export default {
       v-tooltip
       data-container="body"
       data-placement="left"
+      data-boundary="viewport"
       :title="tooltipLabel"
     >
       <icon
@@ -86,7 +87,7 @@ export default {
       {{ __('Confidentiality') }}
       <a
         v-if="isEditable"
-        class="pull-right confidential-edit"
+        class="float-right confidential-edit"
         href="#"
         @click.prevent="toggleForm"
       >

app/assets/javascripts/sidebar/components/confidential/edit_form.vue

@@ -32,7 +32,7 @@ export default {
 </script>
 
 <template>
-  <div class="dropdown open">
+  <div class="dropdown show">
     <div class="dropdown-menu sidebar-item-warning-message">
       <div>
         <p

app/assets/javascripts/sidebar/components/lock/edit_form.vue

@@ -41,7 +41,7 @@ export default {
 </script>
 
 <template>
-  <div class="dropdown open">
+  <div class="dropdown show">
     <div class="dropdown-menu sidebar-item-warning-message">
       <p
         class="text"

app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue

@@ -99,6 +99,7 @@ export default {
       v-tooltip
       data-container="body"
       data-placement="left"
+      data-boundary="viewport"
       :title="tooltipLabel"
     >
       <icon
@@ -112,7 +113,7 @@ export default {
       {{ sprintf(__('Lock %{issuableDisplayName}'), { issuableDisplayName: issuableDisplayName }) }}
       <button
         v-if="isEditable"
-        class="pull-right lock-edit"
+        class="float-right lock-edit"
         type="button"
         @click.prevent="toggleForm"
       >

app/assets/javascripts/sidebar/components/participants/participants.vue

@@ -84,6 +84,7 @@
       v-tooltip
       data-container="body"
       data-placement="left"
+      data-boundary="viewport"
       :title="participantLabel"
       @click="onClickCollapsedIcon"
     >

app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue

@@ -82,6 +82,7 @@
         :title="notificationTooltip"
         data-container="body"
         data-placement="left"
+        data-boundary="viewport"
       >
         <icon
           :name="notificationIcon"
@@ -91,12 +92,12 @@
         />
       </span>
     </div>
-    <span class="issuable-header-text hide-collapsed pull-left">
+    <span class="issuable-header-text hide-collapsed float-left">
       {{ __('Notifications') }}
     </span>
     <toggle-button
       ref="toggleButton"
-      class="pull-right hide-collapsed js-issuable-subscribe-button"
+      class="float-right hide-collapsed js-issuable-subscribe-button"
       :is-loading="showLoadingState"
       :value="subscribed"
       @change="toggleSubscription"

app/assets/javascripts/sidebar/components/time_tracking/collapsed_state.vue

@@ -114,6 +114,7 @@
     v-tooltip
     data-container="body"
     data-placement="left"
+    data-boundary="viewport"
     :title="tooltipText"
   >
     <icon name="timer" />

app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.vue

@@ -71,7 +71,7 @@ export default {
         </div>
       </div>
       <div class="compare-display-container">
-        <div class="compare-display pull-left">
+        <div class="compare-display float-left">
           <span class="compare-label">
             {{ s__('TimeTracking|Spent') }}
           </span>
@@ -79,7 +79,7 @@ export default {
             {{ timeSpentHumanReadable }}
           </span>
         </div>
-        <div class="compare-display estimated pull-right">
+        <div class="compare-display estimated float-right">
           <span class="compare-label">
             {{ s__('TimeTrackingEstimated|Est') }}
           </span>

app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue

@@ -116,7 +116,7 @@ export default {
     <div class="title hide-collapsed">
       {{ __('Time tracking') }}
       <div
-        class="help-button pull-right"
+        class="help-button float-right"
         v-if="!showHelpState"
         @click="toggleHelpState(true)"
       >
@@ -127,7 +127,7 @@ export default {
         </i>
       </div>
       <div
-        class="close-help-button pull-right"
+        class="close-help-button float-right"
         v-if="showHelpState"
         @click="toggleHelpState(false)"
       >

app/assets/javascripts/users_select.js

@@ -202,7 +202,7 @@ function UsersSelect(currentUser, els, options = {}) {
               tooltipTitle = __('Assignee');
             }
             $value.html(assigneeTemplate(user));
-            $collapsedSidebar.attr('title', tooltipTitle).tooltip('fixTitle');
+            $collapsedSidebar.attr('title', tooltipTitle).tooltip('_fixTitle');
             return $collapsedSidebar.html(collapsedAssigneeTemplate(user));
           });
       };

app/assets/javascripts/vue_merge_request_widget/components/deployment.vue

@@ -127,7 +127,7 @@ export default {
           </span>
           <loading-button
             v-if="deployment.stop_url"
-            container-class="btn btn-default btn-xs prepend-left-default"
+            container-class="btn btn-default btn-sm prepend-left-default"
             label="Stop environment"
             :loading="isStopping"
             @click="stopEnvironment"

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue

@@ -131,7 +131,7 @@ export default {
             aria-hidden="true">
           </i>
         </button>
-        <ul class="dropdown-menu dropdown-menu-align-right">
+        <ul class="dropdown-menu dropdown-menu-right">
           <li>
             <a
               class="js-download-email-patches"

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue

@@ -42,7 +42,7 @@
         @click="refreshWidget"
         :disabled="isRefreshing"
         type="button"
-        class="btn btn-xs btn-default"
+        class="btn btn-sm btn-default"
       >
         <loading-icon
           v-if="isRefreshing"