Ran migration script

app/assets/stylesheets/framework/badges.scss

-.badge {
+.badge.badge-pill {
   font-weight: $gl-font-weight-normal;
   background-color: $badge-bg;
   color: $badge-color;

app/assets/stylesheets/framework/blank.scss

@@ -37,7 +37,7 @@
   flex: 0 0 100%;
   margin-bottom: 15px;
 
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     flex: 0 0 49%;
 
     &:nth-child(odd) {
@@ -67,7 +67,7 @@
   border: 1px solid $border-color;
   border-radius: $border-radius-default;
 
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     display: flex;
     align-items: center;
     padding: 50px 30px;
@@ -89,12 +89,12 @@
   }
 
   .blank-state-body {
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(xs) {
       text-align: center;
       margin-top: 20px;
     }
 
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(sm) {
       padding-left: 20px;
     }
   }

app/assets/stylesheets/framework/blocks.scss

@@ -195,7 +195,7 @@
       }
     }
 
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(xs) {
       text-align: center;
 
       .avatar {
@@ -315,7 +315,7 @@
     }
   }
 
-  @media (max-width: $screen-sm-min) {
+  @include media-breakpoint-down(sm) {
     flex-direction: column;
 
     .inner-content {
@@ -342,7 +342,7 @@
   .btn {
     margin: $btn-side-margin 5px;
 
-    @media(max-width: $screen-xs-max) {
+    @include media-breakpoint-down(xs) {
       width: 100%;
     }
   }

app/assets/stylesheets/framework/buttons.scss

@@ -401,7 +401,7 @@
   }
 }
 
-@media (max-width: $screen-xs-max) {
+@include media-breakpoint-down(xs) {
   .btn-wide-on-xs {
     width: 100%;
   }

app/assets/stylesheets/framework/calendar.scss

@@ -4,7 +4,7 @@
   border-top: 0;
   direction: rtl;
 
-  @media (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
+  @media (min-width: map-get($grid-breakpoints, sm)) and (max-width: map-get($grid-breakpoints, sm)) {
     overflow-x: auto;
   }
 }

app/assets/stylesheets/framework/ci_variable_list.scss

@@ -10,14 +10,14 @@
   display: flex;
   align-items: flex-start;
 
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     align-items: flex-end;
   }
 
   &:not(:last-child) {
     margin-bottom: $gl-btn-padding;
 
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(xs) {
       margin-bottom: 3 * $gl-btn-padding;
     }
   }
@@ -26,7 +26,7 @@
     .ci-variable-body-item:last-child {
       margin-right: $ci-variable-remove-button-width;
 
-      @media (max-width: $screen-xs-max) {
+      @include media-breakpoint-down(xs) {
         margin-right: 0;
       }
     }
@@ -35,7 +35,7 @@
       display: none;
     }
 
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(xs) {
       .ci-variable-row-body {
         margin-right: $ci-variable-remove-button-width;
       }
@@ -48,7 +48,7 @@
   align-items: flex-start;
   width: 100%;
 
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     display: block;
   }
 }
@@ -59,7 +59,7 @@
   &:not(:last-child) {
     margin-right: $gl-btn-padding;
 
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(xs) {
       margin-right: 0;
       margin-bottom: $gl-btn-padding;
     }

app/assets/stylesheets/framework/common.scss

@@ -70,7 +70,7 @@ pre {
     padding: 0;
   }
 
-  &.well-pre {
+  &.card.card-body-pre {
     border: 1px solid $well-pre-bg;
     background: $gray-light;
     border-radius: 0;
@@ -218,7 +218,7 @@ li.note {
 }
 
 .git_error_tips {
-  @extend .col-md-6;
+  @extend .col-lg-6;
   text-align: left;
   margin-top: 40px;
 
@@ -308,7 +308,7 @@ img.emoji {
 .btn-sign-in {
   text-shadow: none;
 
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     margin-top: 8px;
   }
 }
@@ -327,7 +327,7 @@ img.emoji {
   }
 }
 
-.well {
+.card.card-body {
   margin-bottom: $gl-padding;
 
   hr {
@@ -336,7 +336,7 @@ img.emoji {
 }
 
 .search_box {
-  @extend .well;
+  @extend .card.card-body;
   text-align: center;
 }
 

app/assets/stylesheets/framework/contextual_sidebar.scss

 .page-with-contextual-sidebar {
   transition: padding-left $sidebar-transition-duration;
 
-  @media (min-width: $screen-md-min) {
+  @include media-breakpoint-up(md) {
     padding-left: $contextual-sidebar-collapsed-width;
   }
 
-  @media (min-width: $screen-lg-min) {
+  @include media-breakpoint-up(lg) {
     padding-left: $contextual-sidebar-width;
   }
 
@@ -16,7 +16,7 @@
 }
 
 .page-with-icon-sidebar {
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     padding-left: $contextual-sidebar-collapsed-width;
   }
 }
@@ -75,7 +75,7 @@
   transform: translate3d(0, 0, 0);
 
   &:not(.sidebar-collapsed-desktop) {
-    @media (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
+    @media (min-width: map-get($grid-breakpoints, sm)) and (max-width: map-get($grid-breakpoints, sm)) {
       box-shadow: inset -2px 0 0 $border-color,
         2px 1px 3px $dropdown-shadow-color;
     }
@@ -88,7 +88,7 @@
       overflow-x: hidden;
     }
 
-    .badge:not(.fly-out-badge),
+    .badge.badge-pill:not(.fly-out-badge),
     .sidebar-context-title,
     .nav-item-name {
       display: none;
@@ -142,7 +142,7 @@
     }
   }
 
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     left: (-$contextual-sidebar-width);
   }
 
@@ -166,7 +166,7 @@
   width: 100%;
   overflow: auto;
 
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     overflow: hidden;
   }
 }
@@ -207,7 +207,7 @@
 
   > li {
     > a {
-      @media (min-width: $screen-sm-min) {
+      @include media-breakpoint-up(sm) {
         margin-right: 2px;
       }
 
@@ -222,7 +222,7 @@
       }
 
       .sidebar-sub-level-items {
-        @media (min-width: $screen-sm-min) {
+        @include media-breakpoint-up(sm) {
           position: fixed;
           top: 0;
           left: 0;
@@ -277,7 +277,7 @@
       }
     }
 
-    .badge {
+    .badge.badge-pill {
       background-color: $inactive-badge-background;
       color: $gl-text-color-secondary;
     }
@@ -291,7 +291,7 @@
         padding-left: 11px;
       }
 
-      .badge {
+      .badge.badge-pill {
         font-weight: $gl-font-weight-bold;
       }
 
@@ -339,7 +339,7 @@
 }
 
 .toggle-sidebar-button {
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     display: none;
   }
 }
@@ -420,7 +420,7 @@
     color: $gl-text-color-secondary;
   }
 
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     display: flex;
     align-items: center;
 
@@ -429,7 +429,7 @@
     }
   }
 
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     + .breadcrumbs-links {
       padding-left: $gl-padding;
       border-left: 1px solid $gl-text-color-quaternary;
@@ -437,7 +437,7 @@
   }
 }
 
-@media (max-width: $screen-xs-max) {
+@include media-breakpoint-down(xs) {
   .close-nav-button {
     display: flex;
   }

app/assets/stylesheets/framework/dropdowns.scss

@@ -32,7 +32,7 @@
     max-height: $dropdown-max-height;
     overflow-y: auto;
 
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(xs) {
       width: 100%;
     }
   }
@@ -180,7 +180,7 @@
 
     text-decoration: none;
 
-    .badge {
+    .badge.badge-pill {
       background-color: darken($dropdown-link-hover-bg, 5%);
     }
   }
@@ -324,7 +324,7 @@
     color: $gl-text-color-secondary;
   }
 
-  .badge + span:not(.badge) {
+  .badge.badge-pill + span:not(.badge.badge-pill) {
     // Expects up to 3 digits on the badge
     margin-right: 40px;
   }
@@ -469,7 +469,7 @@
 .dropdown-select {
   width: $dropdown-width;
 
-  @media (max-width: $screen-sm-min) {
+  @include media-breakpoint-down(sm) {
     width: 100%;
   }
 }
@@ -780,7 +780,7 @@
   }
 }
 
-@media (max-width: $screen-xs-max) {
+@include media-breakpoint-down(xs) {
   .navbar-gitlab {
     li.header-projects,
     li.header-more,
@@ -835,7 +835,7 @@ header.header-content .dropdown-menu.projects-dropdown-menu {
     width: 70%;
   }
 
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     flex-direction: column;
     width: 100%;
     height: auto;
@@ -894,7 +894,7 @@ header.header-content .dropdown-menu.projects-dropdown-menu {
     height: 284px;
   }
 
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     .projects-list-frequent-container {
       width: auto;
       height: auto;
@@ -936,7 +936,7 @@ header.header-content .dropdown-menu.projects-dropdown-menu {
     color: $gl-text-color-secondary;
   }
 
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     .project-item-metadata-container {
       float: none;
     }

app/assets/stylesheets/framework/files.scss

@@ -75,7 +75,7 @@
     padding: 8px $gl-padding;
     border-bottom: 1px solid $border-color;
 
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(xs) {
       text-align: left;
     }
 
@@ -125,7 +125,7 @@
     &.wiki {
       padding: $gl-padding;
 
-      @media (min-width: $screen-md-min) {
+      @include media-breakpoint-up(md) {
         padding: $gl-padding * 2;
       }
     }
@@ -364,7 +364,7 @@ span.idiff {
     }
   }
 
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     display: block;
 
     .file-actions {
@@ -396,7 +396,7 @@ span.idiff {
   margin-right: 1.5em;
 }
 
-.label-lfs {
+.badge.badge-pill-lfs {
   color: $common-gray-light;
   border: 1px solid $common-gray-light;
 }

app/assets/stylesheets/framework/filters.scss

@@ -9,19 +9,19 @@
     float: right;
     margin-right: 0;
 
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(xs) {
       float: none;
     }
   }
 }
 
 .filters-section {
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     display: inline-block;
   }
 }
 
-@media (min-width: $screen-sm-min) {
+@include media-breakpoint-up(sm) {
   .filter-item:not(:last-child) {
     margin-right: 6px;
   }
@@ -37,7 +37,7 @@
   }
 }
 
-@media (max-width: $screen-xs-max) {
+@include media-breakpoint-down(xs) {
   .filter-item {
     display: block;
     margin: 0 0 10px;
@@ -53,7 +53,7 @@
   display: -webkit-flex;
   display: flex;
 
-  @media (max-width: $screen-xs-min) {
+  @include media-breakpoint-down(xs) {
     -webkit-flex-direction: column;
     flex-direction: column;
   }
@@ -193,7 +193,7 @@
   border: 1px solid $border-color;
   background-color: $white-light;
 
-  @media (max-width: $screen-xs-min) {
+  @include media-breakpoint-down(xs) {
     -webkit-flex: 1 1 auto;
     flex: 1 1 auto;
     margin-bottom: 10px;
@@ -264,7 +264,7 @@
   max-width: 280px;
   overflow: auto;
 
-  @media (max-width: $screen-xs-min) {
+  @include media-breakpoint-down(xs) {
     width: auto;
     left: 0;
     right: 0;
@@ -315,7 +315,7 @@
 .filtered-search-history-dropdown {
   width: 40%;
 
-  @media (max-width: $screen-xs-min) {
+  @include media-breakpoint-down(xs) {
     left: 0;
     right: 0;
     max-width: none;
@@ -353,7 +353,7 @@
   }
 }
 
-@media (max-width: $screen-xs-max) {
+@include media-breakpoint-down(xs) {
   .issues-details-filters {
     padding: 0 0 10px;
     background-color: $white-light;
@@ -361,7 +361,7 @@
   }
 }
 
-@media (max-width: $screen-xs) {
+@include media-breakpoint-down(sm) {
   .filter-dropdown-container {
     .dropdown-toggle,
     .dropdown,

app/assets/stylesheets/framework/flash.scss

@@ -72,7 +72,7 @@
   }
 }
 
-@media (max-width: $screen-sm-max) {
+@include media-breakpoint-down(sm) {
   ul.notes {
     .flash-container.timeline-content {
       margin-left: 0;

app/assets/stylesheets/framework/forms.scss

@@ -31,13 +31,13 @@ label {
     margin: 0;
   }
 
-  &.label-light {
+  &.badge.badge-pill-light {
     font-weight: $gl-font-weight-bold;
   }
 }
 
-.control-label {
-  @extend .col-sm-2;
+.form-control-label {
+  @extend .col-md-2;
 }
 
 .inline-input-group {
@@ -48,21 +48,21 @@ label {
   width: 150px;
 }
 
-@media (min-width: $screen-sm-min) {
+@include media-breakpoint-up(sm) {
   .custom-form-control {
     width: 150px;
   }
 }
 
 /* Medium devices (desktops, 992px and up) */
-@media (min-width: $screen-md-min) {
+@include media-breakpoint-up(md) {
   .custom-form-control {
     width: 170px;
   }
 }
 
 /* Large devices (large desktops, 1200px and up) */
-@media (min-width: $screen-lg-min) {
+@include media-breakpoint-up(lg) {
   .custom-form-control {
     width: 200px;
   }
@@ -72,7 +72,7 @@ label {
   margin-left: 0;
   margin-right: 0;
 
-  .control-label {
+  .form-control-label {
     font-weight: $gl-font-weight-bold;
     padding-top: 4px;
   }
@@ -102,10 +102,10 @@ label {
     }
   }
 
-  @media(max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     padding: 0 $gl-padding;
 
-    .control-label,
+    .form-control-label,
     .text-block {
       padding-left: 0;
     }
@@ -155,8 +155,8 @@ label {
   margin-top: 35px;
 }
 
-.form-group .control-label,
-.form-group .control-label-full-width {
+.form-group .form-control-label,
+.form-group .form-control-label-full-width {
   font-weight: $gl-font-weight-normal;
 }
 
@@ -221,7 +221,7 @@ label {
   }
 }
 
-@media(max-width: $screen-xs-max) {
+@include media-breakpoint-down(xs) {
   .remember-me {
     .remember-me-checkbox {
       margin-top: 0;

app/assets/stylesheets/framework/gitlab_theme.scss

@@ -63,7 +63,7 @@
 
           &:hover,
           &:focus {
-            @media (min-width: $screen-sm-min) {
+            @include media-breakpoint-up(sm) {
               background-color: rgba($color-200, 0.2);
             }
 
@@ -165,14 +165,14 @@
     }
   }
 
-  .sidebar-top-level-items > li.active .badge {
+  .sidebar-top-level-items > li.active .badge.badge-pill {
     color: $color-800;
   }
 
   .nav-links li.active a {
     border-bottom-color: $color-500;
 
-    .badge {
+    .badge.badge-pill {
       font-weight: $gl-font-weight-bold;
     }
   }
@@ -340,7 +340,7 @@ body {
       }
     }
 
-    .sidebar-top-level-items > li.active .badge {
+    .sidebar-top-level-items > li.active .badge.badge-pill {
       color: $theme-gray-900;
     }
 

app/assets/stylesheets/framework/header.scss

@@ -91,7 +91,7 @@
         border-radius: $border-radius-default;
 
         .tanuki-logo {
-          @media (min-width: $screen-sm-min) {
+          @include media-breakpoint-up(sm) {
             margin-right: 8px;
           }
         }
@@ -110,7 +110,7 @@
     }
 
     &.menu-expanded {
-      @media (max-width: $screen-xs-max) {
+      @include media-breakpoint-down(xs) {
         .title-container {
           display: none;
         }
@@ -133,13 +133,13 @@
     border-top: 0;
     padding: 0;
 
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(xs) {
       flex: 1 1 auto;
     }
 
     .nav {
-      > li:not(.hidden-xs) a {
-        @media (max-width: $screen-xs-max) {
+      > li:not(.d-none) a {
+        @include media-breakpoint-down(xs) {
           margin-left: 0;
           min-width: 100%;
         }
@@ -181,14 +181,14 @@
     }
 
     .navbar-nav {
-      @media (max-width: $screen-xs-max) {
+      @include media-breakpoint-down(xs) {
         display: -webkit-flex;
         display: flex;
         padding-right: 10px;
       }
 
       li {
-        .badge {
+        .badge.badge-pill {
           box-shadow: none;
           font-weight: $gl-font-weight-bold;
         }
@@ -197,7 +197,7 @@
 
     .nav > li {
       &.header-user {
-        @media (max-width: $screen-xs-max) {
+        @include media-breakpoint-down(xs) {
           padding-left: 10px;
         }
       }
@@ -208,7 +208,7 @@
         padding: 6px 8px;
         height: 32px;
 
-        @media (max-width: $screen-xs-max) {
+        @include media-breakpoint-down(xs) {
           padding: 0;
         }
 
@@ -378,7 +378,7 @@
   margin-bottom: 0;
   line-height: 16px;
 
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     flex-wrap: wrap;
   }
 
@@ -410,7 +410,7 @@
 .breadcrumb-item-text {
   text-decoration: inherit;
 
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     @include str-truncated(128px);
   }
 }
@@ -452,7 +452,7 @@
 
 .navbar-nav {
   li {
-    .badge {
+    .badge.badge-pill {
       position: inherit;
       font-weight: $gl-font-weight-normal;
       margin-left: -6px;
@@ -478,7 +478,7 @@
   }
 }
 
-@media (max-width: $screen-xs-max) {
+@include media-breakpoint-down(xs) {
   .navbar-gitlab .container-fluid {
     font-size: 18px;
 
@@ -493,7 +493,7 @@
       margin-left: -8px;
       margin-right: -10px;
 
-      .nav > li:not(.hidden-xs) {
+      .nav > li:not(.d-none) {
         display: table-cell !important;
         width: 25%;
 

app/assets/stylesheets/framework/issue_box.scss

@@ -11,7 +11,7 @@
   padding: 5px 11px;
   margin-top: 4px;
   /* Small devices (tablets, 768px and up) */
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     padding: 0 $gl-btn-padding;
     margin-top: 5px;
   }

app/assets/stylesheets/framework/layout.scss

@@ -74,7 +74,7 @@ body {
   }
 
   /* Center alert text and alert action links on smaller screens */
-  @media (max-width: $screen-sm-max) {
+  @include media-breakpoint-down(sm) {
     .alert {
       text-align: center;
     }

app/assets/stylesheets/framework/lists.scss

@@ -2,7 +2,7 @@
  * Well styled list
  *
  */
-.well-list {
+.card.card-body-list {
   position: relative;
   margin: 0;
   padding: 0;
@@ -67,7 +67,7 @@
       }
     }
 
-    .well-title {
+    .card.card-body-title {
       font-size: $list-font-size;
       line-height: 18px;
     }
@@ -154,7 +154,7 @@ ul.content-list {
         &:last-child {
           margin-right: 0;
 
-          @media(max-width: $screen-xs-max) {
+          @include media-breakpoint-down(xs) {
             margin: 0 auto;
           }
         }
@@ -168,7 +168,7 @@ ul.content-list {
     .member-controls {
       float: none;
 
-      @media (min-width: $screen-sm-min) {
+      @include media-breakpoint-up(sm) {
         float: right;
       }
     }
@@ -223,7 +223,7 @@ ul.content-list {
     }
   }
 
-  .label-default {
+  .badge.badge-pill-default {
     color: $gl-text-color-secondary;
   }
 
@@ -232,7 +232,7 @@ ul.content-list {
   }
 }
 
-.panel > .content-list > li {
+.card > .content-list > li {
   padding: $gl-padding-top $gl-padding;
 }
 

app/assets/stylesheets/framework/markdown_area.scss

@@ -74,7 +74,7 @@
 }
 
 .md-header-tab {
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     flex: 1;
     width: 100%;
     border-bottom: 1px solid $border-color;
@@ -90,7 +90,7 @@
     &.active {
       display: block;
 
-      @media (max-width: $screen-xs-max) {
+      @include media-breakpoint-down(xs) {
         flex: none;
         display: flex;
         justify-content: center;
@@ -182,7 +182,7 @@
   margin-left: $gl-padding;
   margin-right: -5px;
 
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     margin-left: 0;
     margin-right: 0;
   }
@@ -258,7 +258,7 @@
   }
 }
 
-@media (max-width: $screen-xs-max) {
+@include media-breakpoint-down(xs) {
   .atwho-view-ul {
     width: 350px;
   }

app/assets/stylesheets/framework/mobile.scss

 /** Common mobile (screen XS, SM) styles **/
-@media (max-width: $screen-xs-max) {
+@include media-breakpoint-down(xs) {
   .container .content {
     margin-top: 20px;
   }
@@ -14,7 +14,7 @@
     font-size: 12px;
     margin-right: 3px;
 
-    .badge {
+    .badge.badge-pill {
       display: none;
     }
   }
@@ -90,7 +90,7 @@
   }
 }
 
-@media (max-width: $screen-sm-max) {
+@include media-breakpoint-down(sm) {
   .issues-filters {
     .milestone-filter {
       display: none;

app/assets/stylesheets/framework/modal.scss

@@ -46,7 +46,7 @@
     margin-left: $grid-size;
   }
 
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     flex-direction: column;
 
     .btn + .btn {
@@ -55,7 +55,7 @@
     }
   }
 
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     .btn:first-of-type {
       margin-left: auto;
     }
@@ -74,7 +74,7 @@ body.modal-open {
   }
 }
 
-@media (min-width: $screen-lg-min) {
+@include media-breakpoint-up(lg) {
   .modal-full {
     width: 98%;
   }
@@ -84,7 +84,7 @@ body.modal-open {
   background-color: $black-transparent;
   z-index: 2100;
 
-  @media (min-width: $screen-md-min) {
+  @include media-breakpoint-up(md) {
     .modal-dialog {
       margin: 30px auto;
     }

app/assets/stylesheets/framework/page_header.scss

@@ -3,7 +3,7 @@
   padding: 10px 0;
   margin-bottom: 0;
 
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     display: flex;
     align-items: center;
 
@@ -19,7 +19,7 @@
       margin-right: 3px;
     }
 
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(xs) {
       .btn {
         width: 100%;
         margin-top: 10px;
@@ -35,7 +35,7 @@
     @extend .avatar-inline;
     margin-left: 0;
 
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(sm) {
       margin-left: 4px;
     }
   }

app/assets/stylesheets/framework/pagination.scss

@@ -30,7 +30,7 @@
   }
 }
 
-.panel > .gl-pagination {
+.card > .gl-pagination {
   margin: 0;
 }
 
@@ -57,7 +57,7 @@
 /**
  * Small screen pagination
  */
-@media (max-width: $screen-xs-min) {
+@include media-breakpoint-down(xs) {
   .gl-pagination {
     .pagination li a {
       padding: 6px 10px;
@@ -76,7 +76,7 @@
 /**
  * Medium screen pagination
  */
-@media (min-width: $screen-xs-min) and (max-width: $screen-md-max) {
+@media (min-width: map-get($grid-breakpoints, xs)) and (max-width: map-get($grid-breakpoints, sm)) {
   .gl-pagination {
     .page {
       display: none;

app/assets/stylesheets/framework/panels.scss

-.panel {
+.card {
   margin-bottom: $gl-padding;
 }
 
-.panel-slim {
-  @extend .panel;
+.card-slim {
+  @extend .card;
   margin-bottom: $gl-vert-padding;
 }
 
 
-.panel-heading {
+.card-heading {
   padding: $gl-vert-padding $gl-padding;
   line-height: 36px;
 
@@ -21,7 +21,7 @@
     line-height: 20px;
   }
 
-  .badge {
+  .badge.badge-pill {
     margin-top: -2px;
     margin-left: 5px;
   }
@@ -41,11 +41,11 @@
   }
 }
 
-.panel-empty-heading {
+.card-empty-heading {
   border-bottom: 0;
 }
 
-.panel-body {
+.card-body {
   padding: $gl-padding;
 
   .form-actions {
@@ -54,7 +54,7 @@
   }
 }
 
-.panel-title {
+.card-title {
   font-size: inherit;
   line-height: inherit;
 }

app/assets/stylesheets/framework/responsive_tables.scss

@@ -6,7 +6,7 @@
 .gl-responsive-table-row-layout {
   width: 100%;
 
-  @media (min-width: $screen-md-min) {
+  @include media-breakpoint-up(md) {
     display: flex;
     align-items: center;
 
@@ -21,7 +21,7 @@
   margin-top: 10px;
   border: 1px solid $border-color;
 
-  @media (min-width: $screen-md-min) {
+  @include media-breakpoint-up(md) {
     margin: 0;
     padding: $gl-padding 0;
     border: 0;
@@ -44,13 +44,13 @@
     &.section-#{$width} {
       flex: 0 0 #{$width + '%'};
 
-      @media (min-width: $screen-md-min) {
+      @include media-breakpoint-up(md) {
         max-width: #{$width + '%'};
       }
     }
   }
 
-  @media (max-width: $screen-sm-max) {
+  @include media-breakpoint-down(sm) {
     display: flex;
     align-self: stretch;
     padding: 10px;
@@ -65,7 +65,7 @@
   &.section-wrap {
     white-space: normal;
 
-    @media (max-width: $screen-sm-max) {
+    @include media-breakpoint-down(sm) {
       flex-wrap: wrap;
     }
   }
@@ -76,11 +76,11 @@
 }
 
 .table-button-footer {
-  @media (min-width: $screen-md-min) {
+  @include media-breakpoint-up(md) {
     text-align: right;
   }
 
-  @media (max-width: $screen-sm-max) {
+  @include media-breakpoint-down(sm) {
     display: block;
     align-self: stretch;
     min-height: 0;
@@ -122,7 +122,7 @@
 .table-row-header {
   font-size: 13px;
 
-  @media (max-width: $screen-sm-max) {
+  @include media-breakpoint-down(sm) {
     display: none;
   }
 }
@@ -132,13 +132,13 @@
   color: $gl-text-color-secondary;
   text-align: left;
 
-  @media (min-width: $screen-md-min) {
+  @include media-breakpoint-up(md) {
     display: none;
   }
 }
 
 .table-mobile-content {
-  @media (max-width: $screen-sm-max) {
+  @include media-breakpoint-down(sm) {
     @include flex-max-width(60);
     text-align: right;
   }
@@ -154,7 +154,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
 
-  @media (min-width: $screen-md-min) {
+  @include media-breakpoint-up(md) {
     flex: 0 0 90%;
   }
 

app/assets/stylesheets/framework/secondary_navigation_elements.scss

@@ -27,7 +27,7 @@
         color: $black;
         border-bottom: 2px solid $gray-darkest;
 
-        .badge {
+        .badge.badge-pill {
           color: $black;
         }
       }
@@ -37,7 +37,7 @@
       color: $black;
       font-weight: $gl-font-weight-bold;
 
-      .badge {
+      .badge.badge-pill {
         color: $black;
       }
     }
@@ -56,7 +56,7 @@
     white-space: normal;
 
     /* Small devices (phones, tablets, 768px and lower) */
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(xs) {
       width: 100%;
     }
   }
@@ -80,7 +80,7 @@
     }
 
     /* Small devices (phones, tablets, 768px and lower) */
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(xs) {
       width: 100%;
 
       &.mobile-separator {
@@ -124,21 +124,21 @@
       position: relative;
 
       /* Medium devices (desktops, 992px and up) */
-      @media (min-width: $screen-md-min) { width: 200px; }
+      @include media-breakpoint-up(md) { width: 200px; }
 
       /* Large devices (large desktops, 1200px and up) */
-      @media (min-width: $screen-lg-min) { width: 250px; }
+      @include media-breakpoint-up(lg) { width: 250px; }
 
       &.input-short {
         /* Medium devices (desktops, 992px and up) */
-        @media (min-width: $screen-md-min) { width: 170px; }
+        @include media-breakpoint-up(md) { width: 170px; }
 
         /* Large devices (large desktops, 1200px and up) */
-        @media (min-width: $screen-lg-min) { width: 210px; }
+        @include media-breakpoint-up(lg) { width: 210px; }
       }
     }
 
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(xs) {
       padding-bottom: 0;
       width: 100%;
 
@@ -184,7 +184,7 @@
     .nav-controls {
       width: auto;
 
-      @media (max-width: $screen-xs-max) {
+      @include media-breakpoint-down(xs) {
         width: 100%;
       }
     }
@@ -204,7 +204,7 @@
     width: 100%;
   }
 
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     flex-flow: row wrap;
 
     .nav-controls {
@@ -368,7 +368,7 @@
     max-width: 300px;
     width: auto;
 
-    @media(max-width: $screen-xs-max) {
+    @include media-breakpoint-down(xs) {
       max-width: 250px;
     }
   }

app/assets/stylesheets/framework/sidebar.scss

@@ -31,7 +31,7 @@
 .right-sidebar-collapsed {
   padding-right: 0;
 
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     &:not(.wiki-sidebar):not(.build-sidebar):not(.issuable-bulk-update-sidebar) .content-wrapper {
       padding-right: $gutter_collapsed_width;
     }
@@ -65,13 +65,13 @@
     display: inline-flex;
   }
 
-  @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
+  @include media-breakpoint-only(sm) {
     &:not(.wiki-sidebar):not(.build-sidebar):not(.issuable-bulk-update-sidebar) .content-wrapper {
       padding-right: $gutter_collapsed_width;
     }
   }
 
-  @media (min-width: $screen-md-min) {
+  @include media-breakpoint-up(md) {
     .content-wrapper {
       padding-right: $gutter_width;
     }

app/assets/stylesheets/framework/snippets.scss

@@ -38,7 +38,7 @@
 }
 
 .snippet-actions {
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     float: right;
   }
 }

app/assets/stylesheets/framework/tables.scss

@@ -48,7 +48,7 @@ table {
 }
 
 .responsive-table {
-  @media (max-width: $screen-sm-max) {
+  @include media-breakpoint-down(sm) {
     th {
       width: 100%;
     }

app/assets/stylesheets/framework/timeline.scss

@@ -4,7 +4,7 @@
   padding: 0;
 
   &::before {
-    @include notes-media('max', $screen-xs-min) {
+    @include notes-media('max', map-get($grid-breakpoints, xs)) {
       background: none;
     }
   }
@@ -34,7 +34,7 @@
   .timeline-entry-inner {
     position: relative;
 
-    @include notes-media('max', $screen-xs-min) {
+    @include notes-media('max', map-get($grid-breakpoints, xs)) {
       .timeline-icon {
         display: none;
       }

app/assets/stylesheets/framework/toggle.scss

@@ -121,7 +121,7 @@
     cursor: not-allowed;
   }
 
-  @media (max-width: $screen-xs-min) {
+  @include media-breakpoint-down(xs) {
     width: 50px;
 
     &::before,

app/assets/stylesheets/framework/tw_bootstrap.scss

@@ -49,15 +49,15 @@
   @include clearfix();
 }
 
-.center-block {
+.mx-auto {
   @include center-block();
 }
 
-.pull-right {
+.float-right {
   float: right !important;
 }
 
-.pull-left {
+.float-left {
   float: left !important;
 }
 
@@ -99,20 +99,20 @@ summary {
 @import "bootstrap/responsive-utilities";
 
 // Labels
-.label {
+.badge.badge-pill {
   padding: 4px 5px;
   font-size: 12px;
   font-style: normal;
   font-weight: $gl-font-weight-normal;
   display: inline-block;
 
-  &.label-gray {
+  &.badge.badge-pill-gray {
     background-color: $label-gray-bg;
     color: $gl-text-color;
     text-shadow: none;
   }
 
-  &.label-inverse {
+  &.badge.badge-pill-inverse {
     background-color: $label-inverse-bg;
   }
 }
@@ -132,10 +132,10 @@ summary {
  *
  */
 
-.panel {
+.card {
   box-shadow: none;
 
-  .panel-body {
+  .card-body {
     form,
     pre {
       margin: 0;
@@ -147,7 +147,7 @@ summary {
     }
   }
 
-  .panel-footer {
+  .card-footer {
     .pagination {
       margin: 0;
     }
@@ -161,8 +161,8 @@ summary {
     }
   }
 
-  &.panel-small {
-    .panel-heading {
+  &.card-small {
+    .card-heading {
       padding: 6px 15px;
       font-size: 13px;
       font-weight: $gl-font-weight-normal;
@@ -173,20 +173,20 @@ summary {
     }
   }
 
-  &.panel-without-border {
+  &.card-without-border {
     border: 0;
   }
 
-  &.panel-without-margin {
+  &.card-without-margin {
     margin: 0;
   }
 }
 
-.panel-succes .panel-heading,
-.panel-info .panel-heading,
-.panel-danger .panel-heading,
-.panel-warning .panel-heading,
-.panel-primary .panel-heading,
+.card-succes .card-heading,
+.card-info .card-heading,
+.card-danger .card-heading,
+.card-warning .card-heading,
+.card-primary .card-heading,
 .alert {
   a:not(.btn) {
     @extend .alert-link;

app/assets/stylesheets/framework/typography.scss

@@ -386,7 +386,7 @@ h4 {
 }
 
 .text-right-lg {
-  @media (min-width: $screen-lg-min) {
+  @include media-breakpoint-up(lg) {
     text-align: right;
   }
 }

app/assets/stylesheets/framework/wells.scss

@@ -5,7 +5,7 @@
   border-radius: $border-radius-default;
   margin-bottom: $gl-padding;
 
-  .well-segment {
+  .card.card-body-segment {
     padding: $gl-padding;
 
     &:not(:last-of-type) {
@@ -58,7 +58,7 @@
     }
   }
 
-  .label.label-gray {
+  .badge.badge-pill.badge.badge-pill-gray {
     background-color: $well-expand-item;
   }
 
@@ -107,7 +107,7 @@
   }
 }
 
-.well-centered {
+.card.card-body-centered {
   h1 {
     font-weight: $gl-font-weight-normal;
     text-align: center;

app/assets/stylesheets/pages/boards.scss

@@ -60,7 +60,7 @@
 .boards-app {
   position: relative;
 
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     transition: width $sidebar-transition-duration;
     width: 100%;
 
@@ -83,11 +83,11 @@
   white-space: nowrap;
   min-height: 200px;
 
-  @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
+  @include media-breakpoint-only(sm) {
     height: calc(100vh - #{$issue-board-list-difference-sm});
   }
 
-  @media (min-width: $screen-md-min) {
+  @include media-breakpoint-up(md) {
     height: calc(100vh - #{$issue-board-list-difference-md});
   }
 
@@ -96,13 +96,13 @@
       100vh - #{$issue-board-list-difference-xs} - #{$performance-bar-height}
     );
 
-    @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
+    @include media-breakpoint-only(sm) {
       height: calc(
         100vh - #{$issue-board-list-difference-sm} - #{$performance-bar-height}
       );
     }
 
-    @media (min-width: $screen-md-min) {
+    @include media-breakpoint-up(md) {
       height: calc(
         100vh - #{$issue-board-list-difference-md} - #{$performance-bar-height}
       );
@@ -119,7 +119,7 @@
   white-space: normal;
   vertical-align: top;
 
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     width: 400px;
   }
 
@@ -244,7 +244,7 @@
     margin-bottom: 8px;
   }
 
-  .label-color {
+  .badge.badge-pill-color {
     position: relative;
     top: 2px;
     display: inline-block;
@@ -297,7 +297,7 @@
     }
   }
 
-  .label {
+  .badge.badge-pill {
     border: 0;
     outline: 0;
   }
@@ -399,7 +399,7 @@
 .card-footer {
   margin: 0 0 5px;
 
-  .label {
+  .badge.badge-pill {
     margin-top: 5px;
     margin-right: 6px;
   }
@@ -562,11 +562,11 @@
 .add-issues-list-column {
   width: 100%;
 
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     width: 50%;
   }
 
-  @media (min-width: $screen-md-min) {
+  @include media-breakpoint-up(md) {
     width: (100% / 3);
   }
 }
@@ -635,7 +635,7 @@
     display: none;
     margin-right: 10px;
 
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(sm) {
       display: block;
     }
   }
@@ -643,7 +643,7 @@
   .dropdown-menu-toggle {
     width: 100px;
 
-    @media (min-width: $screen-md-min) {
+    @include media-breakpoint-up(md) {
       width: 140px;
     }
   }

app/assets/stylesheets/pages/builds.scss

@@ -198,7 +198,7 @@
   }
 
   .header-action-buttons {
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(xs) {
       .sidebar-toggle-btn {
         margin-top: 0;
         margin-left: 10px;
@@ -288,7 +288,7 @@
     background-color: $white-light;
   }
 
-  .label {
+  .badge.badge-pill {
     margin-left: 2px;
   }
 
@@ -303,7 +303,7 @@
       }
     }
 
-    @media (max-width: $screen-sm-max) {
+    @include media-breakpoint-down(sm) {
       display: block;
 
       .btn {

app/assets/stylesheets/pages/commits.scss

@@ -28,7 +28,7 @@
 }
 
 .commit-hash-full {
-  @media (max-width: $screen-sm-max) {
+  @include media-breakpoint-down(sm) {
     width: 80px;
     white-space: nowrap;
     overflow: hidden;
@@ -193,7 +193,7 @@
 }
 
 .commit-actions {
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     .fa-spinner {
       font-size: 12px;
     }

app/assets/stylesheets/pages/convdev_index.scss

@@ -53,19 +53,19 @@ $space-between-cards: 8px;
   padding: $space-between-cards / 2;
   position: relative;
 
-  @media (min-width: $screen-xs-min) {
+  @include media-breakpoint-up(xs) {
     width: percentage(1 / 4);
   }
 
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     width: percentage(1 / 5);
   }
 
-  @media (min-width: $screen-md-min) {
+  @include media-breakpoint-up(md) {
     width: percentage(1 / 6);
   }
 
-  @media (min-width: $screen-lg-min) {
+  @include media-breakpoint-up(lg) {
     width: percentage(1 / 10);
   }
 }

app/assets/stylesheets/pages/cycle_analytics.scss

@@ -15,7 +15,7 @@
         max-width: 480px;
         padding: 0 $gl-padding;
 
-        @media (max-width: $screen-sm-min) {
+        @include media-breakpoint-down(sm) {
           margin: 0 auto;
         }
       }
@@ -75,13 +75,13 @@
     }
   }
 
-  .panel {
+  .card {
     .content-block {
       padding: 24px 0;
       border-bottom: 0;
       position: relative;
 
-      @media (max-width: $screen-xs-max) {
+      @include media-breakpoint-down(xs) {
         padding: 6px 0 24px;
       }
     }
@@ -89,7 +89,7 @@
     .column {
       text-align: center;
 
-      @media (max-width: $screen-xs-max) {
+      @include media-breakpoint-down(xs) {
         padding: 15px 0;
       }
 
@@ -106,7 +106,7 @@
       }
 
       &:last-child {
-        @media (max-width: $screen-xs-max) {
+        @include media-breakpoint-down(xs) {
           text-align: center;
         }
       }
@@ -213,7 +213,7 @@
   .stage-panel {
     min-width: 968px;
 
-    .panel-heading {
+    .card-heading {
       padding: 0;
       background-color: transparent;
     }

app/assets/stylesheets/pages/detail_page.scss

@@ -14,7 +14,7 @@
     white-space: nowrap;
   }
 
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     display: block;
   }
 }
@@ -25,7 +25,7 @@
   display: flex;
   flex-grow: 1;
 
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     padding-left: 0;
     padding-right: 0;
   }
@@ -36,7 +36,7 @@
   flex-shrink: 0;
   flex: 0 0 auto;
 
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     width: 100%;
     margin-top: 10px;
 

app/assets/stylesheets/pages/diff.scss

@@ -581,14 +581,14 @@
   }
 
   .commit-stat-summary {
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(sm) {
       margin-left: -$gl-padding;
       padding-left: $gl-padding;
       background-color: $white-light;
     }
   }
 
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     position: -webkit-sticky;
     position: sticky;
     top: 24px;
@@ -617,7 +617,7 @@
   }
 }
 
-@media (min-width: $screen-sm-min) {
+@include media-breakpoint-up(sm) {
   .with-performance-bar {
     .diff-files-changed.diff-files-changed-merge-request {
       top: 76px + $performance-bar-height;
@@ -630,7 +630,7 @@
   width: 100%;
   z-index: 150;
 
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     left: $gl-padding;
   }
 
@@ -761,9 +761,9 @@
   }
 }
 
-.frame .badge,
-.image-diff-avatar-link .badge,
-.notes > .badge {
+.frame .badge.badge-pill,
+.image-diff-avatar-link .badge.badge-pill,
+.notes > .badge.badge-pill {
   position: absolute;
   background-color: $blue-400;
   color: $white-light;
@@ -777,7 +777,7 @@
   }
 }
 
-.frame .badge,
+.frame .badge.badge-pill,
 .frame .image-comment-badge {
   // Center align badges on the frame
   transform: translate(-50%, -50%);
@@ -800,14 +800,14 @@
 .image-diff-avatar-link {
   position: relative;
 
-  .badge,
+  .badge.badge-pill,
   .image-comment-badge {
     top: 25px;
     right: 8px;
   }
 }
 
-.notes > .badge {
+.notes > .badge.badge-pill {
   display: none;
   left: -13px;
 }
@@ -830,7 +830,7 @@
       display: none;
     }
 
-    .notes > .badge {
+    .notes > .badge.badge-pill {
       display: block;
     }
   }

app/assets/stylesheets/pages/editor.scss

@@ -37,7 +37,7 @@
     padding-top: 7px;
     padding-bottom: 7px;
 
-    .pull-right {
+    .float-right {
       height: 20px;
     }
   }
@@ -63,11 +63,11 @@
     max-width: 450px;
     float: left;
 
-    @media(max-width: $screen-md-max) {
+    @media(max-width: map-get($grid-breakpoints, lg)-1) {
       width: 280px;
     }
 
-    @media(max-width: $screen-sm-max) {
+    @media(max-width: map-get($grid-breakpoints, md)-1) {
       width: 180px;
     }
   }
@@ -111,10 +111,10 @@
 }
 
 
-@media(max-width: $screen-xs-max){
+@include media-breakpoint-down(xs){
   .file-editor {
     .file-title {
-      .pull-right {
+      .float-right {
         height: auto;
       }
     }
@@ -153,7 +153,7 @@
   vertical-align: top;
   display: inline-block;
 
-  @media(max-width: $screen-sm-max) {
+  @media(max-width: map-get($grid-breakpoints, md)-1) {
     display: block;
     margin: 19px 0 12px;
   }
@@ -166,7 +166,7 @@
   padding: 0 0 0 14px;
   border-left: 1px solid $border-color;
 
-  @media(max-width: $screen-sm-max) {
+  @media(max-width: map-get($grid-breakpoints, md)-1) {
     display: block;
     width: 100%;
     margin: 5px 0;
@@ -181,7 +181,7 @@
   margin-top: 6px;
   line-height: 21px;
 
-  @media(max-width: $screen-sm-max) {
+  @media(max-width: map-get($grid-breakpoints, md)-1) {
     display: block;
     margin: 5px 0;
   }
@@ -193,7 +193,7 @@
   vertical-align: top;
   margin: 5px 0 0 8px;
 
-  @media(max-width: $screen-sm-max) {
+  @media(max-width: map-get($grid-breakpoints, md)-1) {
     display: block;
     width: 100%;
     margin: 0 0 16px;
@@ -209,7 +209,7 @@
     font-family: $regular_font;
     margin-top: -5px;
 
-    @media(max-width: $screen-sm-max) {
+    @media(max-width: map-get($grid-breakpoints, md)-1) {
       display: block;
       width: 100%;
       margin: 5px 0;
@@ -223,7 +223,7 @@
       width: 250px;
       vertical-align: top;
 
-      @media(max-width: $screen-sm-max) {
+      @media(max-width: map-get($grid-breakpoints, md)-1) {
         display: block;
         width: 100%;
         margin: 5px 0;
@@ -237,7 +237,7 @@
   display: inline-block;
   margin: 7px 0 0 10px;
 
-  @media(max-width: $screen-sm-max) {
+  @media(max-width: map-get($grid-breakpoints, md)-1) {
     display: block;
     width: 100%;
     margin: 20px 0;

app/assets/stylesheets/pages/environments.scss

-@media (max-width: $screen-md-max) {
+@include media-breakpoint-down(md) {
   .deployments-container {
     width: 100%;
     overflow: auto;
@@ -138,15 +138,15 @@
   border-left: 0;
   border-right: 0;
 
-  @media (min-width: $screen-sm-max) {
+  @media (min-width: map-get($grid-breakpoints, md)-1) {
     border-top: 0;
   }
 }
 
 .x-axis path,
 .y-axis path,
-.label-x-axis-line,
-.label-y-axis-line {
+.badge.badge-pill-x-axis-line,
+.badge.badge-pill-y-axis-line {
   fill: none;
   stroke-width: 1;
   shape-rendering: crispEdges;
@@ -157,8 +157,8 @@
   stroke: $stat-graph-axis-fill;
 }
 
-.label-x-axis-line,
-.label-y-axis-line {
+.badge.badge-pill-x-axis-line,
+.badge.badge-pill-y-axis-line {
   stroke: $border-color;
 }
 
@@ -251,7 +251,7 @@
     font-size: 16px;
   }
 
-  @media (max-width: $screen-sm-max) {
+  @include media-breakpoint-down(sm) {
     min-width: 100%;
   }
 }
@@ -353,7 +353,7 @@
       font-weight: $gl-font-weight-bold;
     }
 
-    .label-axis-text {
+    .badge.badge-pill-axis-text {
       fill: $black;
       font-weight: $gl-font-weight-normal;
       font-size: 10px;
@@ -401,8 +401,8 @@
       }
     }
 
-    @media (max-width: $screen-sm-max) {
-      .label-axis-text,
+    @include media-breakpoint-down(sm) {
+      .badge.badge-pill-axis-text,
       .text-metric-usage,
       .legend-axis-text {
         font-size: 8px;

app/assets/stylesheets/pages/events.scss

@@ -70,7 +70,7 @@
       .md {
         font-size: $gl-font-size;
 
-        .label {
+        .badge.badge-pill {
           color: $gl-text-color;
         }
 
@@ -173,7 +173,7 @@
   }
 }
 
-@media (max-width: $screen-xs-max) {
+@include media-breakpoint-down(xs) {
   .event-item {
     padding-left: 0;
 

app/assets/stylesheets/pages/groups.scss

@@ -2,7 +2,7 @@
   @include str-truncated(90%);
 }
 
-.dashboard .side .panel .panel-heading .input-group {
+.dashboard .side .card .card-heading .input-group {
 
   .form-control {
     height: 42px;
@@ -98,7 +98,7 @@
     }
   }
 
-  @media (max-width: $screen-sm-max) {
+  @include media-breakpoint-down(sm) {
     &,
     .dropdown,
     .dropdown .dropdown-toggle,
@@ -145,14 +145,14 @@
   padding: 50px 100px;
   overflow: hidden;
 
-  @media (max-width: $screen-sm-max) {
+  @include media-breakpoint-down(sm) {
     padding: 50px 0;
   }
 
   svg {
     float: right;
 
-    @media (max-width: $screen-sm-max) {
+    @include media-breakpoint-down(sm) {
       float: none;
       display: block;
       width: 250px;
@@ -167,7 +167,7 @@
     width: 460px;
     margin-top: 120px;
 
-    @media (max-width: $screen-sm-max) {
+    @include media-breakpoint-down(sm) {
       float: none;
       margin-top: 60px;
       width: auto;
@@ -201,7 +201,7 @@
       max-width: 480px;
       padding: 0 $gl-padding;
 
-      @media (max-width: $screen-sm-min) {
+      @include media-breakpoint-down(sm) {
         margin: 0 auto;
       }
     }

app/assets/stylesheets/pages/help.scss

@@ -28,8 +28,8 @@
   }
 
   .key {
-    @extend .label;
-    @extend .label-inverse;
+    @extend .badge.badge-pill;
+    @extend .badge.badge-pill-inverse;
     font: 11px Consolas, "Liberation Mono", Menlo, Courier, monospace;
     padding: 3px 5px;
   }

app/assets/stylesheets/pages/issuable.scss

@@ -356,7 +356,7 @@
     /* Extra small devices (phones, less than 768px) */
     display: none;
     /* Small devices (tablets, 768px and up) */
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(sm) {
       display: block;
     }
 
@@ -622,7 +622,7 @@
 }
 
 .issuable-form-padding-top {
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     padding-top: 7px;
   }
 }
@@ -636,7 +636,7 @@
   padding-left: 9px;
   padding-right: 9px;
 
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     display: inline-block;
     height: auto;
     align-self: center;
@@ -644,7 +644,7 @@
 }
 
 .issuable-gutter-toggle {
-  @media (max-width: $screen-sm-max) {
+  @include media-breakpoint-down(sm) {
     margin-left: $btn-side-margin;
   }
 }
@@ -662,7 +662,7 @@
     width: 100%;
   }
 
-  @media (max-width: $screen-sm-max) {
+  @include media-breakpoint-down(sm) {
     margin-bottom: $gl-padding;
   }
 }
@@ -703,7 +703,7 @@
         }
       }
 
-      @media(max-width: $screen-xs-max) {
+      @include media-breakpoint-down(xs) {
         .issuable-meta {
           .controls li {
             margin-right: 0;
@@ -738,7 +738,7 @@
       }
     }
 
-    @media(max-width: $screen-md-max) {
+    @media(max-width: map-get($grid-breakpoints, lg)-1) {
       .task-status,
       .issuable-due-date,
       .project-ref-path {

app/assets/stylesheets/pages/issues.scss

@@ -143,7 +143,7 @@ ul.related-merge-requests > li {
   }
 }
 
-@media (max-width: $screen-xs-max) {
+@include media-breakpoint-down(xs) {
   .detail-page-header {
     .issuable-meta {
       line-height: 18px;
@@ -247,7 +247,7 @@ ul.related-merge-requests > li {
   display: block;
 }
 
-@media (min-width: $screen-sm-min) {
+@include media-breakpoint-up(sm) {
   .emoji-block .row {
     display: flex;
 

app/assets/stylesheets/pages/labels.scss

@@ -57,30 +57,30 @@
   border-bottom-left-radius: $border-radius-base;
 }
 
-.label-row {
-  .label-name {
+.badge.badge-pill-row {
+  .badge.badge-pill-name {
     display: inline-block;
     margin-bottom: 10px;
 
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(sm) {
       width: 200px;
       margin-left: $gl-padding * 2;
       margin-bottom: 0;
     }
 
-    .label {
+    .badge.badge-pill {
       overflow: hidden;
       text-overflow: ellipsis;
       max-width: 100%;
     }
   }
 
-  .label-type {
+  .badge.badge-pill-type {
     display: block;
     margin-bottom: 10px;
     margin-left: 50px;
 
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(sm) {
       display: inline-block;
       width: 100px;
       margin-left: 10px;
@@ -89,7 +89,7 @@
     }
   }
 
-  .label-description {
+  .badge.badge-pill-description {
     display: block;
     margin-bottom: 10px;
 
@@ -101,7 +101,7 @@
       color: $blue-600;
     }
 
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(sm) {
       display: inline-block;
       max-width: 50%;
       margin-left: 10px;
@@ -110,7 +110,7 @@
     }
   }
 
-  .label {
+  .badge.badge-pill {
     padding: 4px $grid-size;
     font-size: $label-font-size;
     position: relative;
@@ -132,7 +132,7 @@
 }
 
 .manage-labels-list {
-  @media(min-width: $screen-md-min) {
+  @media(min-width: map-get($grid-breakpoints, md)) {
     &.content-list li {
       padding: $gl-padding 0;
     }
@@ -171,12 +171,12 @@
   }
 
   .dropdown {
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(sm) {
       float: right;
     }
   }
 
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     .dropdown-menu {
       min-width: 100%;
     }
@@ -234,7 +234,7 @@
   font-size: 0;
   padding: 12px 16px;
 
-  .label-row {
+  .badge.badge-pill-row {
     margin-top: 4px;
     margin-bottom: 4px;
 
@@ -243,7 +243,7 @@
     }
   }
 
-  .label-remove {
+  .badge.badge-pill-remove {
     border-left: 1px solid $label-remove-border;
     z-index: 3;
     border-radius: $label-border-radius;
@@ -270,11 +270,11 @@
   }
 }
 
-.label-options-toggle {
+.badge.badge-pill-options-toggle {
   width: 100%;
 }
 
-.label-subscription {
+.badge.badge-pill-subscription {
   vertical-align: middle;
 
   .dropdown-group-label a {
@@ -282,39 +282,39 @@
   }
 }
 
-.label-subscribe-button {
-  @media(min-width: $screen-md-min) {
+.badge.badge-pill-subscribe-button {
+  @media(min-width: map-get($grid-breakpoints, md)) {
     min-width: 105px;
     margin-left: $gl-padding;
   }
 
-  .label-subscribe-button-icon {
+  .badge.badge-pill-subscribe-button-icon {
     &[disabled] {
       opacity: 0.5;
       pointer-events: none;
     }
   }
 
-  .label-subscribe-button-loading {
+  .badge.badge-pill-subscribe-button-loading {
     display: none;
   }
 
   &.disabled {
-    .label-subscribe-button-icon {
+    .badge.badge-pill-subscribe-button-icon {
       display: none;
     }
 
-    .label-subscribe-button-loading {
+    .badge.badge-pill-subscribe-button-loading {
       display: block;
     }
   }
 }
 
-.label-link {
+.badge.badge-pill-link {
   display: inline-flex;
   vertical-align: top;
 
-  .label {
+  .badge.badge-pill {
     vertical-align: inherit;
     font-size: $label-font-size;
   }

app/assets/stylesheets/pages/login.scss

@@ -207,9 +207,9 @@
   }
 }
 
-@media (max-width: $screen-xs-max) {
+@include media-breakpoint-down(xs) {
   .login-page {
-    .col-sm-5.pull-right {
+    .col-md-5.float-right {
       float: none !important;
       margin-bottom: 45px;
     }
@@ -259,7 +259,7 @@
     .navless-container {
       padding: 65px 15px; // height of footer + bottom padding of email confirmation link
 
-      @media (max-width: $screen-xs-max) {
+      @include media-breakpoint-down(xs) {
         padding: 0 15px 65px;
       }
     }

app/assets/stylesheets/pages/members.scss

@@ -11,7 +11,7 @@
 
 .member {
   .list-item-name {
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(sm) {
       float: left;
       width: 50%;
     }
@@ -22,7 +22,7 @@
   }
 
   .controls {
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(sm) {
       display: -webkit-flex;
       display: flex;
     }
@@ -35,7 +35,7 @@
   .form-horizontal {
     margin-top: 20px;
 
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(sm) {
       display: -webkit-flex;
       display: flex;
       margin-top: 3px;
@@ -45,20 +45,20 @@
   .btn-remove {
     width: 100%;
 
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(sm) {
       width: auto;
     }
   }
 
   &.existing-title {
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(sm) {
       float: left;
     }
   }
 }
 
 .member-form-control {
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     padding-bottom: 5px;
     margin-left: 0;
     margin-right: 0;
@@ -73,7 +73,7 @@
 .member-search-form {
   position: relative;
 
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     float: right;
   }
 
@@ -86,7 +86,7 @@
       width: 100%;
     }
 
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(sm) {
       margin-top: 0;
       width: 155px;
     }
@@ -96,16 +96,16 @@
     width: 100%;
     padding-right: 35px;
 
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(sm) {
       width: 250px;
     }
 
     &.input-short {
-      @media (min-width: $screen-md-min) {
+      @include media-breakpoint-up(md) {
         width: 170px;
       }
 
-      @media (min-width: $screen-lg-min) {
+      @include media-breakpoint-up(lg) {
         width: 210px;
       }
     }
@@ -124,7 +124,7 @@
   border: 0;
   outline: 0;
 
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     right: 160px;
   }
 }
@@ -135,7 +135,7 @@
   align-items: center;
   justify-content: center;
 
-  @media (max-width: $screen-sm-min) {
+  @include media-breakpoint-down(sm) {
     display: block;
 
     .flex-project-title {
@@ -151,7 +151,7 @@
     text-overflow: ellipsis;
   }
 
-  .badge {
+  .badge.badge-pill {
     height: 17px;
     line-height: 16px;
     margin-right: 5px;
@@ -166,14 +166,14 @@
   }
 }
 
-.panel {
-  .panel-heading {
-    .badge {
+.card {
+  .card-heading {
+    .badge.badge-pill {
       margin-top: 0;
     }
 
-    @media (max-width: $screen-sm-min) {
-      .badge {
+    @include media-breakpoint-down(sm) {
+      .badge.badge-pill {
         margin-right: 0;
         margin-left: 0;
       }
@@ -217,7 +217,7 @@
     margin-right: 0;
   }
 
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     display: block;
 
     .controls > .btn {
@@ -245,7 +245,7 @@
   }
 }
 
-.panel-mobile {
+.card-mobile {
   .content-list.members-list li {
     display: block;
 

app/assets/stylesheets/pages/merge_requests.scss

@@ -131,7 +131,7 @@
     color: $gl-text-color;
     display: flex;
 
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(xs) {
       flex-wrap: wrap;
     }
   }
@@ -174,7 +174,7 @@
     text-transform: capitalize;
   }
 
-  .label-branch {
+  .badge.badge-pill-branch {
     @extend .ref-name;
 
     color: $gl-text-color;
@@ -182,7 +182,7 @@
     overflow: hidden;
     word-break: break-all;
 
-    &.label-truncated {
+    &.badge.badge-pill-truncated {
       position: relative;
       display: inline-block;
       width: 250px;
@@ -286,7 +286,7 @@
       display: inline-block;
     }
 
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(xs) {
       p {
         font-size: 13px;
       }
@@ -498,18 +498,18 @@
   }
 }
 
-.panel-new-merge-request {
-  .panel-heading {
+.card-new-merge-request {
+  .card-heading {
     padding: 5px 10px;
     font-weight: $gl-font-weight-bold;
     line-height: 25px;
   }
 
-  .panel-body {
+  .card-body {
     padding: 10px 5px;
   }
 
-  .panel-footer {
+  .card-footer {
     padding: 0;
 
     .btn {
@@ -523,7 +523,7 @@
     }
 
     .item-title {
-      @media (min-width: $screen-sm-min) {
+      @include media-breakpoint-up(sm) {
         width: 45%;
       }
     }
@@ -554,7 +554,7 @@
     margin-bottom: 0;
   }
 
-  @media (min-width: $screen-xs-min) {
+  @include media-breakpoint-up(xs) {
     float: left;
     width: 50%;
     margin-bottom: 0;
@@ -652,7 +652,7 @@
   background-color: $white-light;
   border-bottom: 1px solid $border-color;
 
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     position: sticky;
     position: -webkit-sticky;
   }
@@ -661,7 +661,7 @@
     left: 0;
     transition: right .15s;
 
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(xs) {
       right: 0;
     }
 
@@ -704,7 +704,7 @@
   display: flex;
   justify-content: space-between;
 
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     flex-direction: column-reverse;
   }
 }
@@ -740,7 +740,7 @@
   display: flex;
   flex-wrap: wrap;
 
-  @media (min-width: $screen-xs) {
+  @include media-breakpoint-up(xs) {
     flex-wrap: nowrap;
     white-space: nowrap;
   }
@@ -757,7 +757,7 @@
   min-width: 100px;
   max-width: 150px;
 
-  @media (min-width: $screen-xs) {
+  @include media-breakpoint-up(xs) {
     min-width: 0;
     max-width: 100%;
   }

app/assets/stylesheets/pages/milestone.scss

@@ -31,7 +31,7 @@
     }
   }
 
-  .panel-heading {
+  .card-heading {
     line-height: $line-height-base;
     padding: 14px 16px;
     display: -webkit-flex;
@@ -139,7 +139,7 @@
   padding: 20px 0;
 }
 
-@media (max-width: $screen-xs-max) {
+@include media-breakpoint-down(xs) {
   .milestone-actions {
     @include clearfix();
     padding-top: $gl-vert-padding;
@@ -175,7 +175,7 @@
     width: 100%;
   }
 
-  @media (min-width: $screen-xs-min) {
+  @include media-breakpoint-up(xs) {
     .milestone-buttons .verbose {
       display: inline;
     }

app/assets/stylesheets/pages/note_form.scss

@@ -51,7 +51,7 @@
 }
 
 .note-image-attach {
-  @extend .col-md-4;
+  @extend .col-lg-4;
   margin-left: 45px;
   float: none;
 }
@@ -93,7 +93,7 @@
   -webkit-flex-flow: row wrap;
   width: 100%;
 
-  .pull-right {
+  .float-right {
     // Flexbox quirk to make sure right-aligned items stay right-aligned.
     margin-left: auto;
   }
@@ -181,12 +181,12 @@
 }
 
 .notes.notes-form > li.timeline-entry {
-  @include notes-media('max', $screen-sm-max) {
+  @include notes-media('max', map-get($grid-breakpoints, md)-1) {
     padding: 0;
   }
 
   .timeline-content {
-    @include notes-media('max', $screen-sm-max) {
+    @include notes-media('max', map-get($grid-breakpoints, md)-1) {
       margin: 0;
     }
   }
@@ -257,7 +257,7 @@
   .discussion-actions {
     display: table;
 
-    .btn-default path {
+    .btn-secondary path {
       fill: $gray-darkest;
     }
 
@@ -317,7 +317,7 @@
     outline: 0;
   }
 
-  @media (min-width: $screen-md-min) {
+  @include media-breakpoint-up(md) {
     float: left;
     margin-right: $gl-padding;
 
@@ -341,13 +341,13 @@
   line-height: 16px;
   margin-top: 2px;
 
-  @media (min-width: $screen-md-min) {
+  @include media-breakpoint-up(md) {
     float: left;
   }
 }
 
 .note-form-actions {
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     .btn {
       float: none;
       width: 100%;
@@ -366,7 +366,7 @@
   left: 127px;
   top: 2px;
 
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     position: relative;
     top: 0;
     left: 0;
@@ -401,7 +401,7 @@
     width: 298px;
   }
 
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     display: flex;
     width: 100%;
     margin-bottom: 10px;
@@ -423,7 +423,7 @@
 .uploading-container {
   float: right;
 
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     float: left;
     margin-top: 5px;
   }
@@ -435,7 +435,7 @@
 }
 
 .uploading-error-message {
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     &::after {
       content: "\a";
       white-space: pre;

app/assets/stylesheets/pages/notes.scss

@@ -22,7 +22,7 @@ ul.notes {
   .discussion-body {
     padding-top: 8px;
 
-    .panel {
+    .card {
       margin-bottom: 0;
     }
   }
@@ -42,7 +42,7 @@ ul.notes {
     position: relative;
     border-bottom: 0;
 
-    @include notes-media('min', $screen-sm-min) {
+    @include notes-media('min', map-get($grid-breakpoints, sm)) {
       padding-left: $note-icon-gutter-width;
     }
 
@@ -66,7 +66,7 @@ ul.notes {
     }
 
     .timeline-icon {
-      @include notes-media('min', $screen-sm-min) {
+      @include notes-media('min', map-get($grid-breakpoints, sm)) {
         margin-left: -$note-icon-gutter-width;
       }
     }
@@ -74,7 +74,7 @@ ul.notes {
     .timeline-content {
       margin-left: $note-icon-gutter-width;
 
-      @include notes-media('min', $screen-sm-min) {
+      @include notes-media('min', map-get($grid-breakpoints, sm)) {
         margin-left: 0;
       }
     }
@@ -148,7 +148,7 @@ ul.notes {
 
     .note-header {
 
-      @include notes-media('max', $screen-xs-min) {
+      @include notes-media('max', map-get($grid-breakpoints, xs)) {
         .inline {
           display: block;
         }
@@ -211,7 +211,7 @@ ul.notes {
     .timeline-icon {
       float: left;
 
-      @include notes-media('min', $screen-sm-min) {
+      @include notes-media('min', map-get($grid-breakpoints, sm)) {
         margin-left: 0;
         width: auto;
       }
@@ -225,7 +225,7 @@ ul.notes {
     }
 
     .timeline-content {
-      @include notes-media('min', $screen-sm-min) {
+      @include notes-media('min', map-get($grid-breakpoints, sm)) {
         margin-left: 30px;
       }
     }
@@ -400,7 +400,7 @@ ul.notes {
   display: flex;
   justify-content: space-between;
 
-  @include notes-media('max', $screen-xs-max) {
+  @include notes-media('max', map-get($grid-breakpoints, sm)-1) {
     flex-flow: row wrap;
   }
 }
@@ -419,7 +419,7 @@ ul.notes {
 }
 
 .note-header-author-name {
-  @include notes-media('max', $screen-xs-max) {
+  @include notes-media('max', map-get($grid-breakpoints, sm)-1) {
     display: none;
   }
 }
@@ -427,7 +427,7 @@ ul.notes {
 .note-headline-light {
   display: inline;
 
-  @include notes-media('max', $screen-xs-min) {
+  @include notes-media('max', map-get($grid-breakpoints, xs)) {
     display: block;
   }
 }
@@ -465,7 +465,7 @@ ul.notes {
   margin-left: 10px;
   color: $gray-darkest;
 
-  @include notes-media('max', $screen-md-max) {
+  @include notes-media('max', map-get($grid-breakpoints, lg)-1) {
     float: none;
     margin-left: 0;
   }
@@ -483,7 +483,7 @@ ul.notes {
   margin-left: 10px;
   color: $gray-darkest;
 
-  @include notes-media('max', $screen-xs-max) {
+  @include notes-media('max', map-get($grid-breakpoints, sm)-1) {
     float: none;
     margin-left: 0;
   }
@@ -663,7 +663,7 @@ ul.notes {
 }
 
 .line-resolve-all-container {
-  @include notes-media('min', $screen-sm-min) {
+  @include notes-media('min', map-get($grid-breakpoints, sm)) {
     margin-right: 0;
     padding-left: $gl-padding;
   }

app/assets/stylesheets/pages/pipeline_schedules.scss

@@ -69,7 +69,7 @@
 .cron-preset-radio-input {
   display: inline-block;
 
-  @media (max-width: $screen-md-max) {
+  @include media-breakpoint-down(md) {
     display: block;
     margin: 0 0 5px 5px;
   }

app/assets/stylesheets/pages/pipelines.scss

@@ -18,7 +18,7 @@
 
   .ci-table {
 
-    .label {
+    .badge.badge-pill {
       margin-bottom: 3px;
     }
 
@@ -33,7 +33,7 @@
     .pipeline-actions {
       min-width: 170px; //Guarantees buttons don't break in several lines.
 
-      .btn-default {
+      .btn-secondary {
         color: $gl-text-color-secondary;
       }
 
@@ -64,7 +64,7 @@
 
       .btn-group {
         &.open {
-          .btn-default {
+          .btn-secondary {
             background-color: $white-normal;
             border-color: $border-white-normal;
           }
@@ -82,7 +82,7 @@
   }
 }
 
-@media (max-width: $screen-md-max) {
+@include media-breakpoint-down(md) {
   .content-list {
     &.builds-content-list {
       width: 100%;
@@ -151,14 +151,14 @@
       color: $gl-link-color;
     }
 
-    .label {
+    .badge.badge-pill {
       margin-right: 4px;
     }
 
-    .label-container {
+    .badge.badge-pill-container {
       font-size: 0;
 
-      .label {
+      .badge.badge-pill {
         margin-top: 5px;
       }
     }
@@ -220,14 +220,14 @@
     box-shadow: none;
   }
 
-  .pipeline-tags .label-container {
+  .pipeline-tags .badge.badge-pill-container {
     white-space: normal;
   }
 }
 
 .stage-cell {
   &.table-section {
-    @media (min-width: $screen-md-min) {
+    @include media-breakpoint-up(md) {
       min-width: 160px; /* Hack alert: Without this the mini graph pipeline won't work properly*/
       margin-right: -4px;
     }
@@ -823,7 +823,7 @@ button.mini-pipeline-graph-dropdown-toggle {
           display: block;
         }
 
-        @media (max-width: $screen-xs-max) {
+        @include media-breakpoint-down(xs) {
           max-width: 60%;
         }
       }
@@ -910,7 +910,7 @@ button.mini-pipeline-graph-dropdown-toggle {
     transform: translate(-50%, 0);
     border-width: 0 5px 6px;
 
-    @media (max-width: $screen-sm-max) {
+    @include media-breakpoint-down(sm) {
       left: 100%;
       margin-left: -12px;
     }
@@ -932,7 +932,7 @@ button.mini-pipeline-graph-dropdown-toggle {
   &.dropdown-menu {
     transform: translate(-80%, 0);
 
-    @media(min-width: $screen-md-min) {
+    @media(min-width: map-get($grid-breakpoints, md)) {
       transform: translate(-50%, 0);
       right: auto;
       left: 50%;

app/assets/stylesheets/pages/profile.scss

@@ -5,7 +5,7 @@
 }
 
 .avatar-image {
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     float: left;
     margin-bottom: 0;
   }
@@ -119,7 +119,7 @@
 
 .key-list-item {
   .key-list-item-info {
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(sm) {
       float: left;
     }
   }
@@ -188,7 +188,7 @@
   .modal-dialog {
     width: 380px;
 
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(xs) {
       width: auto;
     }
 
@@ -247,7 +247,7 @@
     left: 0;
   }
 
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     .cover-block {
       padding-top: 20px;
     }
@@ -357,7 +357,7 @@ table.u2f-registrations {
     }
   }
 
-  @media(max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     text-align: center;
 
     .bordered-box {
@@ -410,7 +410,7 @@ table.u2f-registrations {
     margin-right: $gl-padding / 4;
   }
 
-  .label-verification-status {
+  .badge.badge-pill-verification-status {
     border-width: 1px;
     border-style: solid;
 

app/assets/stylesheets/pages/projects.scss

@@ -34,7 +34,7 @@
     }
   }
 
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     .input-group > div {
       &:last-child {
         margin-bottom: 0;
@@ -63,7 +63,7 @@
     }
 
     + .select2 a,
-    + .btn-default {
+    + .btn-secondary {
       border-radius: 0 $border-radius-base $border-radius-base 0;
     }
   }
@@ -82,7 +82,7 @@
   border: 1px solid $border-color;
   padding: 10px 32px;
 
-  @media (max-width: $screen-xs-min) {
+  @include media-breakpoint-down(xs) {
     padding: 10px 20px;
   }
 }
@@ -134,7 +134,7 @@
     max-width: 400px;
   }
 
-  @media (max-width: $screen-xs-min) {
+  @include media-breakpoint-down(xs) {
     padding-left: 20px;
   }
 }
@@ -144,7 +144,7 @@
   padding-top: 24px;
   padding-bottom: 24px;
 
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     border-bottom: 1px solid $border-color;
   }
 
@@ -235,7 +235,7 @@
   }
 
   .download-button {
-    @media (max-width: $screen-md-max) {
+    @include media-breakpoint-down(md) {
       margin-left: 0;
     }
   }
@@ -355,7 +355,7 @@
 }
 
 .deploy-key-content {
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     float: left;
 
     &:last-child {
@@ -365,7 +365,7 @@
 }
 
 .deploy-key-projects {
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     line-height: 42px;
   }
 }
@@ -427,11 +427,11 @@ a.deploy-project-label {
   height: 200px;
   width: calc((100% / 2) - #{$gl-padding * 2});
 
-  @media (min-width: $screen-md-min) {
+  @include media-breakpoint-up(md) {
     width: calc((100% / 4) - #{$gl-padding * 2});
   }
 
-  @media (min-width: $screen-lg-min) {
+  @include media-breakpoint-up(lg) {
     width: calc((100% / 5) - #{$gl-padding * 2});
   }
 
@@ -520,7 +520,7 @@ a.deploy-project-label {
   .template-input-group {
     position: relative;
 
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(sm) {
       display: flex;
     }
 
@@ -584,12 +584,12 @@ a.deploy-project-label {
       margin: 0 auto 4px;
       font-size: 24px;
 
-      @media (min-width: $screen-xs-max) {
+      @media (min-width: map-get($grid-breakpoints, sm)-1) {
         top: 0;
       }
     }
 
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(xs) {
       .btn-template-icon {
         display: inline-block;
         height: 14px;
@@ -608,31 +608,31 @@ a.deploy-project-label {
 .create-project-options {
   display: flex;
 
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     display: block;
   }
 
   .first-column {
-    @media (min-width: $screen-xs-min) {
+    @include media-breakpoint-up(xs) {
       max-width: 50%;
       padding-right: 30px;
     }
 
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(xs) {
       max-width: 100%;
       width: 100%;
     }
   }
 
   .second-column {
-    @media (min-width: $screen-xs-min) {
+    @include media-breakpoint-up(xs) {
       width: 50%;
       flex: 1;
       padding-left: 30px;
       position: relative;
     }
 
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(xs) {
       max-width: 100%;
       width: 100%;
       padding-left: 0;
@@ -640,7 +640,7 @@ a.deploy-project-label {
     }
 
     // Mobile
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(xs) {
       padding-top: 30px;
     }
 
@@ -660,7 +660,7 @@ a.deploy-project-label {
       line-height: 20px;
 
       // Mobile
-      @media (max-width: $screen-xs-max) {
+      @include media-breakpoint-down(xs) {
         left: 50%;
         top: 0;
         transform: translateX(-50%);
@@ -680,7 +680,7 @@ a.deploy-project-label {
       top: 0;
 
       // Mobile
-      @media (max-width: $screen-xs-max) {
+      @include media-breakpoint-down(xs) {
         top: 10px;
         left: 10px;
         right: 10px;
@@ -718,7 +718,7 @@ a.deploy-project-label {
         vertical-align: top;
         margin-top: 0;
 
-        @media (min-width: $screen-lg-min) {
+        @include media-breakpoint-up(lg) {
           float: right;
         }
       }
@@ -849,7 +849,7 @@ pre.light-well {
   }
 }
 
-.panel .projects-list li {
+.card .projects-list li {
   padding: 10px 15px;
   margin: 0;
 }
@@ -966,7 +966,7 @@ pre.light-well {
 .dropdown-menu-projects {
   width: 300px;
 
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     width: 500px;
   }
 
@@ -980,7 +980,7 @@ pre.light-well {
   .inline-input-group {
     width: 100%;
 
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(sm) {
       width: 300px;
     }
   }
@@ -991,7 +991,7 @@ pre.light-well {
     text-align: center;
     margin-top: -20px;
 
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(sm) {
       margin-top: 0;
       width: auto;
     }
@@ -1030,7 +1030,7 @@ pre.light-well {
   }
 
   &.form-group {
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(sm) {
       margin-bottom: 0;
     }
   }
@@ -1058,12 +1058,12 @@ pre.light-well {
 .project-feature {
   padding-top: 10px;
 
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     padding-left: 45px;
   }
 
   &.nested {
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(sm) {
       padding-left: 90px;
     }
   }

app/assets/stylesheets/pages/runners.scss

@@ -41,7 +41,7 @@
     padding: 4px 9px;
   }
 
-  .btn-default {
+  .btn-secondary {
     color: $gl-text-color-secondary;
   }
 
@@ -51,7 +51,7 @@
   }
 }
 
-@media (max-width: $screen-md-max) {
+@include media-breakpoint-down(md) {
   .runners-content {
     width: 100%;
     overflow: auto;

app/assets/stylesheets/pages/search.scss

@@ -166,7 +166,7 @@ input[type="checkbox"]:hover {
 }
 
 .search-holder {
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     display: -webkit-flex;
     display: flex;
   }
@@ -178,7 +178,7 @@ input[type="checkbox"]:hover {
     position: relative;
     margin-right: 0;
 
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(sm) {
       margin-right: 5px;
     }
   }
@@ -202,7 +202,7 @@ input[type="checkbox"]:hover {
     width: 100%;
     margin-top: 5px;
 
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(sm) {
       width: auto;
       margin-top: 0;
       margin-left: 5px;
@@ -210,7 +210,7 @@ input[type="checkbox"]:hover {
   }
 
   .dropdown {
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(sm) {
       margin-left: 5px;
       margin-right: 5px;
     }
@@ -220,7 +220,7 @@ input[type="checkbox"]:hover {
     width: 100%;
     margin-top: 5px;
 
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(sm) {
       width: 180px;
       margin-top: 0;
     }

app/assets/stylesheets/pages/settings.scss

@@ -70,7 +70,7 @@
     animation: none;
   }
 
-  @media(max-width: $screen-sm-max) {
+  @media(max-width: map-get($grid-breakpoints, md)-1) {
     padding-right: 20px;
   }
 
@@ -98,12 +98,12 @@
   }
 
   .bs-callout,
-  .checkbox:first-child,
+  .form-check:first-child,
   .help-block {
     margin-top: 0;
   }
 
-  .label-light {
+  .badge.badge-pill-light {
     margin-bottom: 0;
   }
 }
@@ -131,12 +131,12 @@
   color: $gl-danger;
 }
 
-.service-settings .control-label {
+.service-settings .form-control-label {
   padding-top: 0;
 }
 
 .integration-settings-form {
-  .well {
+  .card.card-body {
     padding: $gl-padding / 2;
     box-shadow: none;
   }
@@ -158,7 +158,7 @@
 }
 
 .visibility-level-setting {
-  .radio {
+  .form-check {
     margin-bottom: 10px;
 
     i.fa {
@@ -199,22 +199,22 @@
 }
 
 .prometheus-metrics-monitoring {
-  .panel {
-    .panel-toggle {
+  .card {
+    .card-toggle {
       width: 14px;
     }
 
-    .badge {
+    .badge.badge-pill {
       font-size: 12px;
       line-height: 12px;
     }
 
-    .panel-heading .badge-count {
+    .card-heading .badge.badge-pill-count {
       color: $white-light;
       background: $common-gray-dark;
     }
 
-    .panel-body {
+    .card-body {
       padding: 0;
     }
 
@@ -249,7 +249,7 @@
     li {
       padding: $gl-padding;
 
-      .badge {
+      .badge.badge-pill {
         margin-left: 5px;
         background: $badge-bg;
       }

app/assets/stylesheets/pages/settings_ci_cd.scss

 .triggers-container {
-  .label-container {
+  .badge.badge-pill-container {
     display: inline-block;
     margin-left: 10px;
   }

app/assets/stylesheets/pages/stat_graph.scss

@@ -36,7 +36,7 @@
     @include make-md-column(6);
     margin-top: 10px;
 
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(xs) {
       width: 100%;
     }
 

app/assets/stylesheets/pages/status.scss

@@ -58,7 +58,7 @@
   }
 }
 
-.visible-xs-inline {
+.d-block.d-sm-none-inline {
   .ci-status-link {
     position: relative;
     top: 2px;

app/assets/stylesheets/pages/todos.scss

@@ -126,7 +126,7 @@
         color: $gl-grayish-blue;
         font-size: $gl-font-size;
 
-        .label {
+        .badge.badge-pill {
           color: $gl-text-color;
         }
 
@@ -162,7 +162,7 @@
   }
 }
 
-@media (max-width: $screen-sm-max) {
+@include media-breakpoint-down(sm) {
   .todos-filters {
     .dropdown-menu-toggle {
       width: 130px;
@@ -174,7 +174,7 @@
   }
 }
 
-@media (max-width: $screen-xs-max) {
+@include media-breakpoint-down(xs) {
   .todo {
     .avatar {
       display: none;
@@ -214,7 +214,7 @@
   margin-left: auto;
   margin-right: auto;
 
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     -webkit-flex-direction: row;
     flex-direction: row;
     padding-top: 80px;
@@ -233,7 +233,7 @@
   margin-left: auto;
   margin-right: auto;
 
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     width: 300px;
     margin-right: 0;
     -webkit-order: 2;
@@ -244,7 +244,7 @@
 .todos-all-done {
   padding-top: 20px;
 
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     padding-top: 50px;
   }
 

app/assets/stylesheets/pages/tree.scss

@@ -7,7 +7,7 @@
       color: $gl-text-color-secondary;
     }
 
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(sm) {
       display: flex;
 
       .tree-ref-container {
@@ -49,7 +49,7 @@
     }
   }
 
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     .repo-breadcrumb {
       margin-top: 10px;
       position: relative;
@@ -121,7 +121,7 @@
           margin-left: 5px;
         }
 
-        @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
+        @include media-breakpoint-only(md) {
           @include str-truncated(450px);
         }
 

app/assets/stylesheets/pages/wiki.scss

@@ -65,7 +65,7 @@
     display: block;
   }
 
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     &.has-sidebar-toggle {
       padding-right: 40px;
     }
@@ -81,7 +81,7 @@
     }
   }
 
-  @media (min-width: $screen-md-min) {
+  @include media-breakpoint-up(md) {
     &.has-sidebar-toggle {
       padding-right: 0;
     }