diff --git a/src/core/lib/DateTime.mjs b/src/core/lib/DateTime.mjs
index 89b0e3c6..7fd64ec5 100644
--- a/src/core/lib/DateTime.mjs
+++ b/src/core/lib/DateTime.mjs
@@ -49,7 +49,7 @@ export const DATETIME_FORMATS = [
  * MomentJS DateTime formatting examples.
  */
 export const FORMAT_EXAMPLES = `Format string tokens:
-<table class="table table-striped table-hover table-condensed table-bordered" style="font-family: sans-serif">
+<table class="table table-striped table-hover table-sm table-bordered" style="font-family: sans-serif">
   <thead>
     <tr>
       <th>Category</th>
diff --git a/src/core/operations/Magic.mjs b/src/core/operations/Magic.mjs
index b44b7ccc..c5e7c53e 100644
--- a/src/core/operations/Magic.mjs
+++ b/src/core/operations/Magic.mjs
@@ -77,7 +77,7 @@ class Magic extends Operation {
         const currentRecipeConfig = this.state.opList.map(op => op.config);
 
         let output = `<table
-                class='table table-hover table-condensed table-bordered'
+                class='table table-hover table-sm table-bordered'
                 style='table-layout: fixed;'>
             <tr>
                 <th>Recipe (click to load)</th>
diff --git a/src/core/operations/ParseIPv4Header.mjs b/src/core/operations/ParseIPv4Header.mjs
index 4c745eaa..cf5b31aa 100644
--- a/src/core/operations/ParseIPv4Header.mjs
+++ b/src/core/operations/ParseIPv4Header.mjs
@@ -97,7 +97,7 @@ class ParseIPv4Header extends Operation {
             checksumResult = givenChecksum + " (incorrect, should be " + correctChecksum + ")";
         }
 
-        output = `<table class='table table-hover table-condensed table-bordered table-nonfluid'><tr><th>Field</th><th>Value</th></tr>
+        output = `<table class='table table-hover table-sm table-bordered table-nonfluid'><tr><th>Field</th><th>Value</th></tr>
 <tr><td>Version</td><td>${version}</td></tr>
 <tr><td>Internet Header Length (IHL)</td><td>${ihl} (${ihl * 4} bytes)</td></tr>
 <tr><td>Differentiated Services Code Point (DSCP)</td><td>${dscp}</td></tr>
diff --git a/src/core/operations/ToTable.mjs b/src/core/operations/ToTable.mjs
index 944904e6..d2e8d2c1 100644
--- a/src/core/operations/ToTable.mjs
+++ b/src/core/operations/ToTable.mjs
@@ -147,7 +147,7 @@ class ToTable extends Operation {
          */
         function htmlOutput(tableData) {
             // Start the HTML output with suitable classes for styling.
-            let output = "<table class='table table-hover table-condensed table-bordered table-nonfluid'>";
+            let output = "<table class='table table-hover table-sm table-bordered table-nonfluid'>";
 
             // If the first row is a header then put it in <thead> with <th> cells.
             if (firstRowHeader) {