diff --git a/libraries.txt b/libraries.txt
index b70eb4ac..2826b3c6 100644
--- a/libraries.txt
+++ b/libraries.txt
@@ -21,7 +21,6 @@ font-Awesome        4.5            SIL OFL      http://fortawesome.github.io/Fon
 font-mfizz          2.4.1          MIT          http://fizzed.com/oss/font-mfizz
 backgrid.js         0.3.5          MIT          http://backgridjs.com/
 backbone.undo       0.2            MIT          http://backbone.undojs.com/
-bootstrap-switch    3.3.2          MIT          http://www.bootstrap-switch.org/
 select2             4.0.1          MIT          https://select2.github.io/
 backgrid-filter     01b2b21        MIT          https://github.com/wyuenho/backgrid-filter
 backbone.paginator  2.0.3          MIT          http://github.com/backbone-paginator/backbone.paginator
diff --git a/web/package.json b/web/package.json
index a554bbb5..4b6a5c76 100644
--- a/web/package.json
+++ b/web/package.json
@@ -59,7 +59,6 @@
     "bignumber.js": "^6.0.0",
     "bootstrap": "^4.1.3",
     "bootstrap-datepicker": "^1.7.0",
-    "bootstrap-switch": "3.3.4",
     "bowser": "1.6.1",
     "browserify": "~14.1.0",
     "codemirror": "^5.29.0",
@@ -98,7 +97,8 @@
     "underscore.string": "^3.3.4",
     "watchify": "~3.9.0",
     "webcabin-docker": "git+https://github.com/EnterpriseDB/wcDocker/#25f6fda624c5469340da0c111a18545a4455973a",
-    "wkx": "^0.4.5"
+    "wkx": "^0.4.5",
+    "bootstrap4-toggle": "3.4.0"
   },
   "scripts": {
     "linter": "yarn eslint --no-eslintrc -c .eslintrc.js --ext .js --ext .jsx .",
diff --git a/web/pgadmin/browser/server_groups/servers/databases/casts/static/js/cast.js b/web/pgadmin/browser/server_groups/servers/databases/casts/static/js/cast.js
index 3f38adef..c253734b 100644
--- a/web/pgadmin/browser/server_groups/servers/databases/casts/static/js/cast.js
+++ b/web/pgadmin/browser/server_groups/servers/databases/casts/static/js/cast.js
@@ -234,7 +234,7 @@ define('pgadmin.node.cast', [
           group: gettext('Definition'), disabled: true, mode:['properties','edit'],
         },{
           id: 'castcontext', label: gettext('Context'),
-          options:{'onText':'IMPLICIT','offText':'EXPLICIT'},
+          options:{'onText':'IMPLICIT','offText':'EXPLICIT', width: '110'},
           editable: false, type: 'string', group: gettext('Definition'),
           mode:['create'],
           control: Backform.SwitchControl.extend({
diff --git a/web/pgadmin/browser/server_groups/servers/databases/schemas/static/js/schema.js b/web/pgadmin/browser/server_groups/servers/databases/schemas/static/js/schema.js
index f440eb75..1be73b53 100644
--- a/web/pgadmin/browser/server_groups/servers/databases/schemas/static/js/schema.js
+++ b/web/pgadmin/browser/server_groups/servers/databases/schemas/static/js/schema.js
@@ -463,10 +463,10 @@ define('pgadmin.node.schema', [
       is_editable = _.isFunction(editable) ? !!editable.apply(column, [model]) : !!editable;
       if (is_editable) {
         this.$el.addClass('editable');
-        input.bootstrapSwitch('disabled',false);
+        input.bootstrapToggle('disabled',false);
       } else {
         this.$el.removeClass('editable');
-        input.bootstrapSwitch('disabled',true);
+        input.bootstrapToggle('disabled',true);
         // Set self value into model to false
         setTimeout(function() { model.set(self_name, false); }, 10);
       }
diff --git a/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/triggers/static/js/trigger.js b/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/triggers/static/js/trigger.js
index 8b29d417..bde683bc 100644
--- a/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/triggers/static/js/trigger.js
+++ b/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/triggers/static/js/trigger.js
@@ -18,21 +18,22 @@ define('pgadmin.node.trigger', [
   SchemaChildTreeNode
 ) {
   Backform.CustomSwitchControl = Backform.SwitchControl.extend({
-    template: _.template([
-      '<label class="control-label pg-el-sm-6 pg-el-12"><%=label%></label>',
-      '<div class="pgadmin-controls pg-el-sm-6 pg-el-12">',
-      '  <div class="checkbox">',
-      '    <label>',
-      '      <input type="checkbox" class="<%=extraClasses.join(\' \')%>"',
-      '        name="<%=name%>" <%=value ? "checked=\'checked\'" : ""%>',
-      '        <%=disabled ? "disabled" : ""%> <%=required ? "required" : ""%> />',
-      '    </label>',
-      '  </div>',
-      '</div>',
-      '<% if (helpMessage && helpMessage.length) { %>',
-      '  <span class="<%=Backform.helpMessageClassName%>"><%=helpMessage%></span>',
-      '<% } %>',
-    ].join('\n')),
+    defaults: {
+      label: '',
+      options: {
+        onText: gettext('Yes'),
+        offText: gettext('No'),
+        onColor: 'success',
+        offColor: 'primary',
+        size: 'small',
+        width: null,
+        height: null,
+      },
+      controlLabelClassName: 'control-label pg-el-sm-5 pg-el-12',
+      controlsClassName: 'pgadmin-controls pg-el-sm-7 pg-el-12',
+      extraClasses: [],
+      helpMessage: null,
+    },
     className: 'pgadmin-control-group form-group col-6 row',
   });
 
diff --git a/web/pgadmin/browser/server_groups/servers/roles/static/js/role.js b/web/pgadmin/browser/server_groups/servers/roles/static/js/role.js
index 17ee0c44..5403dc23 100644
--- a/web/pgadmin/browser/server_groups/servers/roles/static/js/role.js
+++ b/web/pgadmin/browser/server_groups/servers/roles/static/js/role.js
@@ -72,23 +72,27 @@ define('pgadmin.node.role', [
 
   var switchOptions = {
     'onText': gettext('Yes'), 'offText': gettext('No'),
-    'size': 'mini',
+    'size': 'small', onColor: 'success',
+    offColor: 'primary',
   };
 
   var RoleCustomSwitchControl = Backform.SwitchControl.extend({
-    template: _.template([
-      '<label class="control-label pg-el-sm-10 pg-el-12"><%=label%></label>',
-      '<div class="pgadmin-controls pg-el-sm-2 pg-el-12">',
-      '  <div class="checkbox">',
-      '    <label>',
-      '      <input type="checkbox" class="<%=extraClasses.join(\' \')%>" name="<%=name%>" <%=value ? "checked=\'checked\'" : ""%> <%=disabled ? "disabled" : ""%> <%=required ? "required" : ""%> />',
-      '    </label>',
-      '  </div>',
-      '</div>',
-      '<% if (helpMessage && helpMessage.length) { %>',
-      '  <span class="<%=Backform.helpMessageClassName%>"><%=helpMessage%></span>',
-      '<% } %>',
-    ].join('\n')),
+    defaults: {
+      label: '',
+      options: {
+        onText: gettext('Yes'),
+        offText: gettext('No'),
+        onColor: 'success',
+        offColor: 'primary',
+        size: 'small',
+        width: null,
+        height: null,
+      },
+      controlLabelClassName: 'control-label pg-el-sm-4 pg-el-12',
+      controlsClassName: 'pgadmin-controls pg-el-sm-8 pg-el-12',
+      extraClasses: [],
+      helpMessage: null,
+    },
     className: 'pgadmin-control-group form-group pg-el-12 row',
   });
 
diff --git a/web/pgadmin/browser/server_groups/servers/static/js/server.js b/web/pgadmin/browser/server_groups/servers/static/js/server.js
index 540bebec..924dadc0 100644
--- a/web/pgadmin/browser/server_groups/servers/static/js/server.js
+++ b/web/pgadmin/browser/server_groups/servers/static/js/server.js
@@ -936,7 +936,7 @@ define('pgadmin.node.server', [
           id: 'tunnel_authentication', label: gettext('Authentication'), type: 'switch',
           mode: ['properties', 'edit', 'create'], group: gettext('SSH Tunnel'),
           'options': {'onText':  gettext('Identity file'),
-            'offText':  gettext('Password'), 'size': 'small'},
+            'offText':  gettext('Password'), 'size': '', width: '110'},
           deps: ['use_ssh_tunnel'],
           disabled: function(model) {
             return !model.get('use_ssh_tunnel');
diff --git a/web/pgadmin/browser/static/js/collection.js b/web/pgadmin/browser/static/js/collection.js
index aa758afd..3671a9af 100644
--- a/web/pgadmin/browser/static/js/collection.js
+++ b/web/pgadmin/browser/static/js/collection.js
@@ -188,6 +188,7 @@ define([
           'remove': function() {
             if (this.grid) {
               if (this.grid.collection) {
+//                _.invoke(this.grid.collection.toArray(), 'destroy');
                 this.grid.collection.reset(null, {silent: true});
                 delete (this.grid.collection);
               }
diff --git a/web/pgadmin/feature_tests/pg_datatype_validation_test.py b/web/pgadmin/feature_tests/pg_datatype_validation_test.py
index a8e94be0..7d1ed698 100644
--- a/web/pgadmin/feature_tests/pg_datatype_validation_test.py
+++ b/web/pgadmin/feature_tests/pg_datatype_validation_test.py
@@ -102,10 +102,10 @@ class PGDataypeFeatureTest(BaseFeatureTest):
         )
 
         switch_btn = insert_bracket_pairs_control.\
-            find_element_by_class_name('bootstrap-switch')
+            find_element_by_class_name('toggle')
 
         # check if switch is on then only toggle.
-        if 'bootstrap-switch-on' in switch_btn.get_attribute('class'):
+        if 'off' not in switch_btn.get_attribute('class'):
             switch_btn.click()
 
         # save and close the preference dialog.
diff --git a/web/pgadmin/misc/statistics/static/js/statistics.js b/web/pgadmin/misc/statistics/static/js/statistics.js
index cfd573e1..95a4cd80 100644
--- a/web/pgadmin/misc/statistics/static/js/statistics.js
+++ b/web/pgadmin/misc/statistics/static/js/statistics.js
@@ -104,7 +104,9 @@ define('misc.statistics', [
       offText: gettext('False'),
       onColor: 'success',
       offColor: 'primary',
-      size: 'mini',
+      size: 'small',
+      width: null,
+      height: null,
     }
   );
 
diff --git a/web/pgadmin/preferences/static/js/preferences.js b/web/pgadmin/preferences/static/js/preferences.js
index 0c2a626d..f9d54f1a 100644
--- a/web/pgadmin/preferences/static/js/preferences.js
+++ b/web/pgadmin/preferences/static/js/preferences.js
@@ -214,8 +214,8 @@ define('pgadmin.preferences', [
                 onText: gettext('True'),
                 offText: gettext('False'),
                 onColor: 'success',
-                offColor: 'default',
-                size: 'mini',
+                offColor: 'primary',
+                size: 'small',
               };
               return 'switch';
             case 'node':
@@ -223,8 +223,8 @@ define('pgadmin.preferences', [
                 onText: gettext('Show'),
                 offText: gettext('Hide'),
                 onColor: 'success',
-                offColor: 'default',
-                size: 'mini',
+                offColor: 'primary',
+                size: 'small',
               };
               return 'switch';
             case 'integer':
diff --git a/web/pgadmin/static/css/style.css b/web/pgadmin/static/css/style.css
index aeb0354a..e7293d47 100644
--- a/web/pgadmin/static/css/style.css
+++ b/web/pgadmin/static/css/style.css
@@ -3,7 +3,7 @@
 @import '~font-awesome/css/font-awesome.css';
 @import '~bootstrap-datepicker/dist/css/bootstrap-datepicker3.css';
 @import '~tempusdominus-bootstrap-4/build/css/tempusdominus-bootstrap-4.css';
-@import '~bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.css';
+@import '~bootstrap4-toggle/css/bootstrap4-toggle.css';
 @import '~backgrid-select-all/backgrid-select-all.css';
 @import '~backgrid-filter/backgrid-filter.css';
 @import '~backgrid-sizeable-columns/backgrid-sizeable-columns.css';
diff --git a/web/pgadmin/static/js/backform.pgadmin.js b/web/pgadmin/static/js/backform.pgadmin.js
index a4ed36be..bb5c78b4 100644
--- a/web/pgadmin/static/js/backform.pgadmin.js
+++ b/web/pgadmin/static/js/backform.pgadmin.js
@@ -10,7 +10,7 @@
 define([
   'sources/gettext', 'underscore', 'underscore.string', 'jquery',
   'backbone', 'backform', 'backgrid', 'codemirror', 'sources/sqleditor_utils',
-  'spectrum', 'pgadmin.backgrid', 'select2',
+  'spectrum', 'pgadmin.backgrid', 'select2', 'bootstrap.toggle',
 ], function(gettext, _, S, $, Backbone, Backform, Backgrid, CodeMirror, SqlEditorUtils) {
 
   var pgAdmin = (window.pgAdmin = window.pgAdmin || {}),
@@ -431,6 +431,8 @@ define([
         onColor: 'success',
         offColor: 'primary',
         size: 'small',
+        width: null,
+        height: null,
       },
       controlLabelClassName: Backform.controlLabelClassName,
       controlsClassName: Backform.controlsClassName,
@@ -440,11 +442,11 @@ define([
     template: _.template([
       '<label class="<%=controlLabelClassName%>"><%=label%></label>',
       '<div class="<%=controlsClassName%>">',
-      '  <div class="checkbox">',
-      '    <label>',
-      '      <input type="checkbox" class="<%=extraClasses.join(\' \')%>" name="<%=name%>" <%=value ? "checked=\'checked\'" : ""%> <%=disabled ? "disabled" : ""%> <%=required ? "required" : ""%> />',
-      '    </label>',
-      '  </div>',
+      '      <input tabindex="0" type="checkbox" data-style="quick" data-toggle="toggle"',
+      '      data-size="<%=options.size%>" data-height="<%=options.height%>"  ',
+      '      data-on="<%=options.onText%>" data-off="<%=options.offText%>" ',
+      '      data-onstyle="<%=options.onColor%>" data-offstyle="<%=options.offColor%>" data-width="<%=options.width%>" ',
+      '      name="<%=name%>" <%=value ? "checked=\'checked\'" : ""%> <%=disabled ? "disabled" : ""%> <%=required ? "required" : ""%> />',
       '  <% if (helpMessage && helpMessage.length) { %>',
       '    <span class="<%=Backform.helpMessageClassName%>"><%=helpMessage%></span>',
       '  <% } %>',
@@ -457,7 +459,14 @@ define([
       );
     },
     events: {
-      'switchChange.bootstrapSwitch': 'onChange',
+      'change input': 'onChange',
+      'keyup': 'toggleSwitch',
+    },
+    toggleSwitch: function(e) {
+      if (e.keyCode == 32) {
+        this.$el.find('input[type=checkbox]').bootstrapToggle('toggle');
+        e.preventDefault();
+      }
     },
     render: function() {
       var field = _.defaults(this.field.toJSON(), this.defaults),
@@ -466,23 +475,46 @@ define([
         name = attrArr.shift(),
         path = attrArr.join('.'),
         rawValue = this.keyPathAccessor(attributes[name], path),
+        data = _.extend(field, {
+          rawValue: rawValue,
+          value: this.formatter.fromRaw(rawValue, this.model),
+          attributes: attributes,
+          formatter: this.formatter,
+        }),
         evalF = function(f, d, m) {
           return (_.isFunction(f) ? !!f.apply(d, [m]) : !!f);
-        },
-        options = _.defaults({
-          disabled: evalF(field.disabled, field, this.model),
-        }, this.field.get('options'), this.defaults.options,
-          $.fn.bootstrapSwitch.defaults);
+        };
 
-      Backform.InputControl.prototype.render.apply(this, arguments);
-      this.$input = this.$el.find('input[type=checkbox]').first();
+      // Evaluate the disabled, visible, and required option
+      _.extend(data, {
+        disabled: evalF(field.disabled, field, this.model),
+        visible:  evalF(data.visible, field, this.model),
+        required: evalF(data.required, field, this.model),
+      });
 
-      //Check & set additional properties
-      this.$input.bootstrapSwitch(
-        _.extend(options, {
-          'state': rawValue,
-        })
-      );
+      // Clean up first
+      this.$el.removeClass(Backform.hiddenClassName);
+
+      if (!data.visible)
+        this.$el.addClass(Backform.hiddenClassName);
+
+      if(Backform.requiredInputClassName) {
+        this.$el.removeClass(Backform.requiredInputClassName);
+      }
+
+      if (data.required) {
+        this.$el.addClass(Backform.requiredInputClassName);
+      }
+
+      data.options = _.defaults({
+        disabled: evalF(field.disabled, field, this.model),
+      }, this.field.get('options'), this.defaults.options,
+        $.fn.bootstrapToggle.defaults);
+
+      this.$el.html(this.template(data)).addClass(field.name);
+      this.$input = this.$el.find('input[type=checkbox]').first();
+      this.$input.bootstrapToggle();
+      this.updateInvalid();
 
       return this;
     },
diff --git a/web/pgadmin/static/js/backgrid.pgadmin.js b/web/pgadmin/static/js/backgrid.pgadmin.js
index 9ea4ad43..4b608c0e 100644
--- a/web/pgadmin/static/js/backgrid.pgadmin.js
+++ b/web/pgadmin/static/js/backgrid.pgadmin.js
@@ -9,7 +9,8 @@
 
 define([
   'sources/gettext', 'underscore', 'jquery', 'backbone', 'backform', 'backgrid', 'alertify',
-  'moment', 'bignumber', 'bootstrap.datetimepicker', 'bootstrap.switch', 'backgrid.filter',
+  'moment', 'bignumber', 'bootstrap.datetimepicker', 'backgrid.filter',
+  'bootstrap.toggle',
 ], function(
   gettext, _, $, Backbone, Backform, Backgrid, Alertify, moment, BigNumber
 ) {
@@ -451,18 +452,20 @@ define([
   /**
     SwitchCell renders a Bootstrap Switch in backgrid cell
   */
-  if (window.jQuery && window.jQuery.fn.bootstrapSwitch)
-    $.fn.bootstrapSwitch = window.jQuery.fn.bootstrapSwitch;
+  if (window.jQuery && window.jQuery.fn.bootstrapToggle)
+    $.fn.bootstrapToggle = window.jQuery.fn.bootstrapToggle;
 
   Backgrid.Extension.SwitchCell = Backgrid.BooleanCell.extend({
     defaults: {
       options: _.defaults({
-        onText: gettext('True'),
-        offText: gettext('False'),
+        onText: gettext('Yes'),
+        offText: gettext('No'),
         onColor: 'success',
-        offColor: 'default',
-        size: 'mini',
-      }, $.fn.bootstrapSwitch.defaults),
+        offColor: 'primary',
+        size: 'small',
+        width: null,
+        height: null,
+      }, $.fn.bootstrapToggle.defaults),
     },
 
     className: 'switch-cell',
@@ -474,7 +477,7 @@ define([
 
     enterEditMode: function() {
       this.$el.addClass('editor');
-      $(this.$el.find('input')).trigger('focus');
+      $(this.$el.find('input[type=checkbox]')).trigger('focus');
     },
 
     exitEditMode: function() {
@@ -482,7 +485,16 @@ define([
     },
 
     events: {
-      'switchChange.bootstrapSwitch': 'onChange',
+      'change input': 'onChange',
+      'keyup': 'toggleSwitch',
+      'blur input': 'exitEditMode'
+    },
+
+    toggleSwitch: function(e) {
+      if (e.keyCode == 32) {
+        this.$el.find('input[type=checkbox]').bootstrapToggle('toggle');
+        e.preventDefault();
+      }
     },
 
     onChange: function() {
@@ -503,7 +515,8 @@ define([
         rawValue = this.formatter.fromRaw(
           model.get(column.get('name')), model
         ),
-        editable = Backgrid.callByNeed(col.editable, column, model);
+        editable = Backgrid.callByNeed(col.editable, column, model),
+        options =  _.defaults({}, col.options, this.defaults.options);
 
       this.undelegateEvents();
 
@@ -513,17 +526,14 @@ define([
         $('<input>', {
           tabIndex: -1,
           type: 'checkbox',
-        }).prop('checked', rawValue).prop('disabled', !editable));
+        }).prop('checked', rawValue).prop('disabled', !editable).attr('data-toggle', 'toggle')
+        .attr('data-size', options.size).attr('data-on', options.onText).attr('data-off', options.offText)
+        .attr('data-onstyle', options.onColor).attr('data-offstyle', options.offColor));
+
       this.$input = this.$el.find('input[type=checkbox]').first();
 
-      // Override BooleanCell checkbox with Bootstrapswitch
-      this.$input.bootstrapSwitch(
-        _.defaults({
-          'state': rawValue,
-          'disabled': !editable,
-        }, col.options,
-          this.defaults.options
-        ));
+      // Override BooleanCell checkbox with Bootstraptoggle
+      this.$input.bootstrapToggle();
 
       // Listen for Tab key
       this.$el.on('keydown', function(e) {
@@ -546,6 +556,7 @@ define([
               });
               self.model.trigger('backgrid:edited', self.model,
                 self.column, command);
+              this.exitEditMode();
               gotoCell.trigger('focus');
             }
           }, 20);
diff --git a/web/pgadmin/static/scss/_bootstrap.overrides.scss b/web/pgadmin/static/scss/_bootstrap.overrides.scss
index 2bd8b760..e0ec5560 100644
--- a/web/pgadmin/static/scss/_bootstrap.overrides.scss
+++ b/web/pgadmin/static/scss/_bootstrap.overrides.scss
@@ -228,30 +228,13 @@ legend {
 	font-size: 13px;
 }
 
-
-/* Remove default left padding from checkbox for bootstrap-switch */
-.checkbox {
-	margin-bottom: 0px !important;
-	margin-top: 0px !important;
-}
-.checkbox label {
-	padding-left: 0px !important;
-	margin-bottom: 0px !important;
-}
-.bootstrap-switch > .bootstrap-switch-container > input {
-	border: 0px solid $color-fg;
-	height: 0px;
-	margin: 0px;
-	padding: 0px;
-	width: 0px;
-}
 .switch-cell {
 	height: 0px;
 	width: 0px;
 }
 
 /* Center align the switch in backgrid */
-td.switch-cell > div.bootstrap-switch {
+td.switch-cell > div.toggle {
 	display: block;
 	margin: auto;
 }
@@ -309,13 +292,6 @@ td.switch-cell > div.bootstrap-switch {
   line-height: 0.7rem;
 }
 
-
-.bootstrap-switch.bootstrap-switch-disabled, .bootstrap-switch.bootstrap-switch-readonly {
-  background-color: $input-disabled-bg !important;
-  opacity: 1;
-}
-
-
 .btn-toolbar {
   min-width: 100%;
 }
@@ -330,10 +306,6 @@ td.switch-cell > div.bootstrap-switch {
 	}
 }
 
-/* bootstrap-switch */
-.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary {
-	background: $color-primary;
-}
-.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success {
-	background: $color-success;
+.btn.disabled, .btn:disabled, .btn[disabled] {
+  opacity: $btn-disabled-opacity;
 }
diff --git a/web/pgadmin/tools/backup/static/js/backup.js b/web/pgadmin/tools/backup/static/js/backup.js
index 70e8a68b..535a765c 100644
--- a/web/pgadmin/tools/backup/static/js/backup.js
+++ b/web/pgadmin/tools/backup/static/js/backup.js
@@ -44,21 +44,6 @@ define([
   */
 
   Backform.CustomSwitchControl = Backform.SwitchControl.extend({
-    template: _.template([
-      '<label class="<%=controlLabelClassName%> custom_switch_label_class"><%=label%></label>',
-      '<div class="<%=controlsClassName%> custom_switch_control_class">',
-      '  <div class="checkbox">',
-      '    <label>',
-      '      <input type="checkbox" class="<%=extraClasses.join(\' \')%>"',
-      '        name="<%=name%>" <%=value ? "checked=\'checked\'" : ""%>',
-      '        <%=disabled ? "disabled" : ""%> <%=required ? "required" : ""%> />',
-      '    </label>',
-      '  </div>',
-      '</div>',
-      '<% if (helpMessage && helpMessage.length) { %>',
-      '  <span class="<%=Backform.helpMessageClassName%>"><%=helpMessage%></span>',
-      '<% } %>',
-    ].join('\n')),
     className: 'pgadmin-control-group form-group pg-el-md-6 pg-el-12 row',
   });
 
diff --git a/web/pgadmin/tools/maintenance/static/js/maintenance.js b/web/pgadmin/tools/maintenance/static/js/maintenance.js
index f8d88908..591bf880 100644
--- a/web/pgadmin/tools/maintenance/static/js/maintenance.js
+++ b/web/pgadmin/tools/maintenance/static/js/maintenance.js
@@ -30,19 +30,6 @@ define([
     return pgAdmin.Tools.maintenance;
 
   Backform.CustomSwitchControl = Backform.SwitchControl.extend({
-    template: _.template([
-      '<label class="<%=Backform.controlLabelClassName%> custom_switch_label_class"><%=label%></label>',
-      '<div class="<%=Backform.controlsClassName%> custom_switch_control_class">',
-      '  <div class="checkbox">',
-      '    <label>',
-      '      <input type="checkbox" class="<%=extraClasses.join(\' \')%>" name="<%=name%>" <%=value ? "checked=\'checked\'" : ""%> <%=disabled ? "disabled" : ""%> <%=required ? "required" : ""%> />',
-      '    </label>',
-      '  </div>',
-      '</div>',
-      '<% if (helpMessage && helpMessage.length) { %>',
-      '  <span class="<%=Backform.helpMessageClassName%>"><%=helpMessage%></span>',
-      '<% } %>',
-    ].join('\n')),
     className: 'pgadmin-control-group form-group pg-el-md-6 pg-el-12 row',
   });
 
diff --git a/web/pgadmin/tools/restore/static/js/restore.js b/web/pgadmin/tools/restore/static/js/restore.js
index 1f249abf..6c79476d 100644
--- a/web/pgadmin/tools/restore/static/js/restore.js
+++ b/web/pgadmin/tools/restore/static/js/restore.js
@@ -25,19 +25,6 @@ commonUtils, menuUtils, supportedNodes, restoreDialog
   }
 
   Backform.CustomSwitchControl = Backform.SwitchControl.extend({
-    template: _.template([
-      '<label class="<%=Backform.controlLabelClassName%> custom_switch_label_class"><%=label%></label>',
-      '<div class="<%=Backform.controlsClassName%> custom_switch_control_class">',
-      '  <div class="checkbox">',
-      '    <label>',
-      '      <input type="checkbox" class="<%=extraClasses.join(\' \')%>" name="<%=name%>" <%=value ? "checked=\'checked\'" : ""%> <%=disabled ? "disabled" : ""%> <%=required ? "required" : ""%> />',
-      '    </label>',
-      '  </div>',
-      '</div>',
-      '<% if (helpMessage && helpMessage.length) { %>',
-      '  <span class="<%=Backform.helpMessageClassName%>"><%=helpMessage%></span>',
-      '<% } %>',
-    ].join('\n')),
     className: 'pgadmin-control-group form-group pg-el-md-6 row',
   });
 
diff --git a/web/webpack.shim.js b/web/webpack.shim.js
index db45166f..be244949 100644
--- a/web/webpack.shim.js
+++ b/web/webpack.shim.js
@@ -37,9 +37,9 @@ var webpackShimConfig = {
       'deps': ['moment'],
       'exports': 'jQuery.fn.datetimepicker',
     },
-    'bootstrap.switch': {
+    'bootstrap.toggle': {
       deps: ['jquery', 'bootstrap'],
-      'exports': '$.fn.bootstrapSwitch',
+      'exports': '$.fn.bootstrapToggle',
     },
     'backbone': {
       exports: 'Backbone', // Once loaded, use the global 'Backbone' as the module value.
@@ -53,10 +53,10 @@ var webpackShimConfig = {
       'exports': 'Backgrid',
     },
     'pgadmin.backform': {
-      'deps': ['backform', 'pgadmin.backgrid', 'select2'],
+      'deps': ['backform', 'pgadmin.backgrid', 'select2', 'bootstrap.toggle'],
     },
     'pgadmin.backgrid': {
-      'deps': ['backgrid', 'bootstrap.datetimepicker', 'bootstrap.switch'],
+      'deps': ['backgrid', 'bootstrap.datetimepicker', 'bootstrap.toggle'],
     },
 
     'backgrid.select.all': {
@@ -172,7 +172,7 @@ var webpackShimConfig = {
     'backform': path.join(__dirname, './pgadmin/static/vendor/backform/backform'),
     'backgrid': path.join(__dirname, './node_modules/backgrid/lib/backgrid'),
     'bootstrap.datetimepicker': path.join(__dirname, './node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min'),
-    'bootstrap.switch': path.join(__dirname, './node_modules/bootstrap-switch/dist/js/bootstrap-switch'),
+    'bootstrap.toggle': path.join(__dirname, './node_modules/bootstrap4-toggle/js/bootstrap4-toggle'),
     'select2': path.join(__dirname, './node_modules/select2/dist/js/select2.full'),
     'backgrid.filter': path.join(__dirname, './node_modules/backgrid-filter/backgrid-filter'),
     'backgrid.sizeable.columns': path.join(__dirname, './node_modules/backgrid-sizeable-columns/backgrid-sizeable-columns'),
diff --git a/web/webpack.test.config.js b/web/webpack.test.config.js
index 6cce766c..b65e924a 100644
--- a/web/webpack.test.config.js
+++ b/web/webpack.test.config.js
@@ -77,7 +77,7 @@ module.exports = {
       'spectrum': path.join(__dirname, './node_modules/spectrum-colorpicker/spectrum'),
       'bignumber': path.join(__dirname, './node_modules/bignumber.js/bignumber'),
       'bootstrap.datetimepicker': path.join(__dirname, './node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min'),
-      'bootstrap.switch': path.join(__dirname, './node_modules/bootstrap-switch/dist/js/bootstrap-switch'),
+      'bootstrap.toggle': path.join(__dirname, './node_modules/bootstrap4-toggle/js/bootstrap4-toggle'),
       'backbone': path.join(__dirname, './node_modules/backbone/backbone'),
       'backform': path.join(__dirname, './node_modules/backform/src/backform'),
       'backgrid': path.join(__dirname, './node_modules/backgrid/lib/backgrid'),
diff --git a/web/yarn.lock b/web/yarn.lock
index 8a71a39f..48ee35ec 100644
--- a/web/yarn.lock
+++ b/web/yarn.lock
@@ -1617,10 +1617,10 @@ bootstrap-datepicker@^1.7.0:
   dependencies:
     jquery ">=1.7.1 <4.0.0"
 
-bootstrap-switch@3.3.4:
-  version "3.3.4"
-  resolved "https://registry.yarnpkg.com/bootstrap-switch/-/bootstrap-switch-3.3.4.tgz#70e0aeb2a877c0dc766991de108e2170fc29a2ff"
-  integrity sha1-cOCusqh3wNx2aZHeEI4hcPwpov8=
+bootstrap4-toggle@3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/bootstrap4-toggle/-/bootstrap4-toggle-3.4.0.tgz#58264d4c7fd24eb2e09cca5156a338b2b22a4792"
+  integrity sha512-vKfBgsjICW6mOqb264qwwbbGtpcOx+p9jOlQmLfRZ07iGE+b5YbQlY4ft9aAhPulh7V3oKOtEuuq0FcSKAI4bQ==
 
 bootstrap@>=4.1.2, bootstrap@^4.1.3:
   version "4.1.3"
