diff --git a/js/notebook/src/SparkStateProgress.ts b/js/notebook/src/SparkStateProgress.ts
index 93ce74cccc..b63009eb02 100644
--- a/js/notebook/src/SparkStateProgress.ts
+++ b/js/notebook/src/SparkStateProgress.ts
@@ -121,10 +121,10 @@ class SparkStateProgressView extends widgets.VBoxView {
     let stagePanel = this.createStagePanel(state);
 
     return $('<div>', {
-      class: 'panel panel-default bx-spark-jobPanel'
+      class: 'bx-panel bx-spark-jobPanel'
     }).append(
-      $('<div>', { class: 'panel-heading' }).append(jobLink),
-      $('<div>', { class: 'panel-body container-fluid bx-spark-stagePanel' }).append(stagePanel)
+      $('<div>', { class: 'bx-panel-heading' }).append(jobLink),
+      $('<div>', { class: 'bx-panel-body bx-spark-stagePanel' }).append(stagePanel)
     );
   }
 
@@ -170,14 +170,14 @@ class SparkStateProgressView extends widgets.VBoxView {
     this.progressBar.classList.add('progress');
 
     this.progressBar.innerHTML = `
-      <div class="progress-bar progress-bar-success" style="width: ${percentDone}%"></div>
-      <div class="progress-bar progress-bar-info" style="width: ${percentActive}%"></div>
-      <div class="progress-bar progress-bar-warning" style="width: ${percentWaiting}%"></div>
+      <div class="bx-progress-bar done" style="width: ${percentDone}%"></div>
+      <div class="progress-bar active" style="width: ${percentActive}%"></div>
+      <div class="progress-bar waiting" style="width: ${percentWaiting}%"></div>
     `;
 
-    this.progressBarDone = this.progressBar.querySelector('.progress-bar-success');
-    this.progressBarActive = this.progressBar.querySelector('.progress-bar-info');
-    this.progressBarWaiting = this.progressBar.querySelector('.progress-bar-warning');
+    this.progressBarDone = this.progressBar.querySelector('.done');
+    this.progressBarActive = this.progressBar.querySelector('.active');
+    this.progressBarWaiting = this.progressBar.querySelector('.waiting');
 
     return $(this.progressBar);
   }
@@ -192,10 +192,10 @@ class SparkStateProgressView extends widgets.VBoxView {
     this.progressLabels.classList.add('bx-spark-stageProgressLabels');
     
     this.progressLabels.innerHTML = `
-      <span class="done label label-success" title="Done">${valueDone}</span> <span
-      class="active label label-info" title="Active">${valueActive}</span> <span
-      class="waiting label label-warning" title="Waiting">${valueWaiting}</span> <span
-      class="all label label-default" title="All tasks">${max}</span>
+      <span class="bx-label done" title="Done">${valueDone}</span> <span
+      class="bx-label active" title="Active">${valueActive}</span> <span
+      class="bx-label waiting" title="Waiting">${valueWaiting}</span> <span
+      class="bx-label all" title="All tasks">${max}</span>
     `;
     
     this.progressLabelDone = this.progressLabels.querySelector('.done');
diff --git a/js/notebook/src/tree/Widgets/JVMOptions/OtherOptionsWidget.ts b/js/notebook/src/tree/Widgets/JVMOptions/OtherOptionsWidget.ts
index 7fae911f3a..b04202fc26 100644
--- a/js/notebook/src/tree/Widgets/JVMOptions/OtherOptionsWidget.ts
+++ b/js/notebook/src/tree/Widgets/JVMOptions/OtherOptionsWidget.ts
@@ -81,13 +81,13 @@ export default class OtherOptionsWidget extends Widget implements OtherOptionsWi
 
   private createFormRowElement(): JQuery<HTMLElement> {
     return $('<div>', {
-      class: 'form-group form-inline'
+      class: 'bx-form-row',
     });
   }
 
   private createInputElement(val: string = ''): JQuery<HTMLElement> {
     return $('<input>', {
-      class: 'form-control',
+      class: 'bx-input-text',
       type: 'text',
       placeholder: 'value',
     }).val(val)
@@ -97,7 +97,7 @@ export default class OtherOptionsWidget extends Widget implements OtherOptionsWi
   private createRemoveButtonElement(): JQuery<HTMLElement> {
     return $('<button>', {
       'type': 'button',
-      'class': 'btn btn-default'
+      'class': 'bx-btn'
     }).append(
       $('<i>', { class: 'fa fa-times'})
     );
diff --git a/js/notebook/src/tree/Widgets/JVMOptions/PropertiesWidget.ts b/js/notebook/src/tree/Widgets/JVMOptions/PropertiesWidget.ts
index 882ab8687a..abea983bd7 100644
--- a/js/notebook/src/tree/Widgets/JVMOptions/PropertiesWidget.ts
+++ b/js/notebook/src/tree/Widgets/JVMOptions/PropertiesWidget.ts
@@ -165,13 +165,13 @@ export default class PropertiesWidget extends Widget {
 
   private createFormRowElement(): JQuery<HTMLElement> {
     return $('<div>', {
-      class: 'form-group form-inline'
+      class: 'bx-form-row'
     });
   }
 
   private createInputElement(placeholder: string, val: string = ''): JQuery<HTMLElement> {
     return $('<input>', {
-      class: 'form-control',
+      class: 'bx-input-text',
       type: 'text',
       placeholder: placeholder,
     }).val(val)
@@ -181,7 +181,7 @@ export default class PropertiesWidget extends Widget {
   private createRemoveButtonElement(): JQuery<HTMLElement> {
     return $('<button>', {
       'type': 'button',
-      'class': 'btn btn-default'
+      'class': 'bx-btn'
     }).append(
       $('<i>', { class: 'fa fa-times'})
     );