diff --git a/asset/css/bootstrap-markbind.css b/asset/css/bootstrap-markbind.css
new file mode 100644
index 0000000000..1cdb8347a4
--- /dev/null
+++ b/asset/css/bootstrap-markbind.css
@@ -0,0 +1,24 @@
+.alert-warning-darker {
+    background-color: #ffd960;
+    color: #6d550f;
+}
+
+.alert-info-darker {
+    background-color: #37bbd3;
+    color: #f5f2f2;
+}
+
+.alert-success-darker {
+    background-color: #53de53bd;
+    color: #181918bd;
+}
+
+.alert-danger-darker {
+    background-color: #f05151db;
+    color: #f5f2f2;
+}
+
+.alert-default-darker {
+    background-color: #afb0b1cc;
+    color: #2e2f30;
+}
diff --git a/index.js b/index.js
index bb30025269..3bb9d0033e 100755
--- a/index.js
+++ b/index.js
@@ -98,6 +98,7 @@ program
   .option('-o, --one-page <file>', 'render and serve only a single page in the site')
   .option('-p, --port <port>', 'port for server to listen on (Default is 8080)')
   .option('-s, --site-config <file>', 'specify the site config file (default: site.json)')
+  .option('-d, --dev', 'enables some developer options')
   .action((userSpecifiedRoot, options) => {
     let rootFolder;
     try {
@@ -114,7 +115,8 @@ program
       options.onePage = ensurePosix(options.onePage);
     }
 
-    const site = new Site(rootFolder, outputFolder, options.onePage, options.forceReload, options.siteConfig);
+    const site = new Site(rootFolder, outputFolder, options.onePage, options.forceReload, options.siteConfig,
+                          options.dev);
 
     const addHandler = (filePath) => {
       logger.info(`[${new Date().toLocaleTimeString()}] Reload for file add: ${filePath}`);
diff --git a/src/Site.js b/src/Site.js
index 4e2c22e718..f4158ff796 100644
--- a/src/Site.js
+++ b/src/Site.js
@@ -64,6 +64,10 @@ function getBootswatchThemePath(theme) {
   return path.join(__dirname, '..', 'node_modules', 'bootswatch', 'dist', theme, 'bootstrap.min.css');
 }
 
+function getExtraBootswatchThemePath(theme) {
+  return path.join(__dirname, 'lib', 'bootswatch', 'src', theme, 'bootstrap-markbind.css');
+}
+
 const SUPPORTED_THEMES_PATHS = {
   'bootswatch-cerulean': getBootswatchThemePath('cerulean'),
   'bootswatch-cosmo': getBootswatchThemePath('cosmo'),
@@ -83,6 +87,25 @@ const SUPPORTED_THEMES_PATHS = {
   'bootswatch-yeti': getBootswatchThemePath('yeti'),
 };
 
+const SUPPORTED_THEMES_EXTRAS_PATHS = {
+  'bootswatch-cerulean': getExtraBootswatchThemePath('cerulean'),
+  'bootswatch-cosmo': getExtraBootswatchThemePath('cosmo'),
+  'bootswatch-flatly': getExtraBootswatchThemePath('flatly'),
+  'bootswatch-journal': getExtraBootswatchThemePath('journal'),
+  'bootswatch-litera': getExtraBootswatchThemePath('litera'),
+  'bootswatch-lumen': getExtraBootswatchThemePath('lumen'),
+  'bootswatch-lux': getExtraBootswatchThemePath('lux'),
+  'bootswatch-materia': getExtraBootswatchThemePath('materia'),
+  'bootswatch-minty': getExtraBootswatchThemePath('minty'),
+  'bootswatch-pulse': getExtraBootswatchThemePath('pulse'),
+  'bootswatch-sandstone': getExtraBootswatchThemePath('sandstone'),
+  'bootswatch-simplex': getExtraBootswatchThemePath('simplex'),
+  'bootswatch-sketchy': getExtraBootswatchThemePath('sketchy'),
+  'bootswatch-spacelab': getExtraBootswatchThemePath('spacelab'),
+  'bootswatch-united': getExtraBootswatchThemePath('united'),
+  'bootswatch-yeti': getExtraBootswatchThemePath('yeti'),
+};
+
 const ABOUT_MARKDOWN_DEFAULT = '# About\n'
   + 'Welcome to your **About Us** page.\n';
 
@@ -101,7 +124,8 @@ const TOP_NAV_DEFAULT = '<header><navbar placement="top" type="inverse">\n'
 
 const MARKBIND_LINK_HTML = `<a href='${MARKBIND_WEBSITE_URL}'>MarkBind ${CLI_VERSION}</a>`;
 
-function Site(rootPath, outputPath, onePagePath, forceReload = false, siteConfigPath = SITE_CONFIG_NAME) {
+function Site(rootPath, outputPath, onePagePath, forceReload = false, siteConfigPath = SITE_CONFIG_NAME,
+              dev = false) {
   this.rootPath = rootPath;
   this.outputPath = outputPath;
   this.tempPath = path.join(rootPath, TEMP_FOLDER_NAME);
@@ -120,6 +144,7 @@ function Site(rootPath, outputPath, onePagePath, forceReload = false, siteConfig
   this.baseUrlMap = new Set();
   this.forceReload = forceReload;
   this.onePagePath = onePagePath;
+  this.dev = dev;
   this.plugins = {};
   this.siteConfig = {};
   this.siteConfigPath = siteConfigPath;
@@ -241,6 +266,9 @@ Site.prototype.createPage = function (config) {
                                 path.join(this.siteAssetsDestPath, 'css', 'page-nav.css')),
       siteNavCss: path.relative(path.dirname(resultPath),
                                 path.join(this.siteAssetsDestPath, 'css', 'site-nav.css')),
+      bootstrapMarkbindCss: path.relative(path.dirname(resultPath),
+                                          path.join(this.siteAssetsDestPath, 'css',
+                                                    'bootstrap-markbind.css')),
       bootstrapUtilityJs: path.relative(path.dirname(resultPath),
                                         path.join(this.siteAssetsDestPath, 'js', 'bootstrap-utility.min.js')),
       bootstrapVueJs: path.relative(path.dirname(resultPath),
@@ -898,6 +926,17 @@ Site.prototype.copyFontAwesomeAsset = function () {
  * Copies MarkBind assets to the assets folder
  */
 Site.prototype.copyMarkBindAsset = function () {
+  const maybeOverrideDefaultBootstrapThemeExtras = (theme) => {
+    if (!_.has(SUPPORTED_THEMES_EXTRAS_PATHS, theme)) {
+      return _.noop;
+    }
+
+    const themeSrcPath = SUPPORTED_THEMES_EXTRAS_PATHS[theme];
+    const themeDestPath = path.join(this.siteAssetsDestPath, 'css', 'bootstrap-markbind.css');
+
+    return fs.copyAsync(themeSrcPath, themeDestPath);
+  };
+
   const maybeOverrideDefaultBootstrapTheme = () => {
     const { theme } = this.siteConfig;
     if (!theme || !_.has(SUPPORTED_THEMES_PATHS, theme)) {
@@ -907,15 +946,39 @@ Site.prototype.copyMarkBindAsset = function () {
     const themeSrcPath = SUPPORTED_THEMES_PATHS[theme];
     const themeDestPath = path.join(this.siteAssetsDestPath, 'css', 'bootstrap.min.css');
 
-    return new Promise((resolve, reject) => {
-      fs.copyAsync(themeSrcPath, themeDestPath)
-        .then(resolve)
-        .catch(reject);
+    return fs.copyAsync(themeSrcPath, themeDestPath)
+      .then(maybeOverrideDefaultBootstrapThemeExtras(theme));
+  };
+
+  const maybeDevCopyAllThemes = () => {
+    if (!this.dev) {
+      return;
+    }
+    logger.info('Dev mode enabled, copying all stylesheets');
+
+    const copyBootSwatchThemes = Object.values(SUPPORTED_THEMES_PATHS).map((themeSrcPath, index) => {
+      const themeDestPath = path.join(this.siteAssetsDestPath, 'dev', 'css',
+                                      'bootswatch', (index + 1).toString(10), 'bootstrap.min.css');
+
+      return fs.copyAsync(themeSrcPath, themeDestPath);
     });
+
+    const copyBootSwatchExtraThemes = Object.values(SUPPORTED_THEMES_EXTRAS_PATHS)
+      .map((themeSrcPath, index) => {
+        const themeDestPath = path.join(this.siteAssetsDestPath, 'dev', 'css',
+                                        'bootswatchExtras', (index + 1).toString(10),
+                                        'bootstrap-markbind.css');
+        return fs.copyAsync(themeSrcPath, themeDestPath);
+      });
+
+    const allPromises = copyBootSwatchThemes.concat(copyBootSwatchExtraThemes);
+
+    Promise.all(allPromises);
   };
 
   return fs.copyAsync(this.siteAssetsSrcPath, this.siteAssetsDestPath)
-    .then(maybeOverrideDefaultBootstrapTheme);
+    .then(maybeOverrideDefaultBootstrapTheme)
+    .then(maybeDevCopyAllThemes);
 };
 
 /**
diff --git a/src/lib/bootswatch/src/cerulean/bootstrap-markbind.css b/src/lib/bootswatch/src/cerulean/bootstrap-markbind.css
new file mode 100644
index 0000000000..6aab0c57ab
--- /dev/null
+++ b/src/lib/bootswatch/src/cerulean/bootstrap-markbind.css
@@ -0,0 +1,22 @@
+.alert-warning-darker {
+    background-color: #fcbe98;
+}
+
+.alert-info-darker {
+    background-color: #75a0cb;
+    color: #f5f2f2;
+}
+
+.alert-success-darker {
+    background-color: #c5ec9a;
+}
+
+.alert-danger-darker {
+    background-color: #f6494eba;
+    color: #f5f2f2;
+}
+
+.alert-default-darker {
+    background-color: #c6c9cb;
+    color: #2e2f30;
+}
diff --git a/src/lib/bootswatch/src/cosmo/bootstrap-markbind.css b/src/lib/bootswatch/src/cosmo/bootstrap-markbind.css
new file mode 100644
index 0000000000..6ed2c70ad8
--- /dev/null
+++ b/src/lib/bootswatch/src/cosmo/bootstrap-markbind.css
@@ -0,0 +1,23 @@
+.alert-warning-darker {
+    background-color: #fabc94;
+    color: #654937;
+}
+
+.alert-info-darker {
+    background-color: #cb90e3b8;
+    color: #faf8fb;
+}
+
+.alert-success-darker {
+    background-color: #9fe388;
+}
+
+.alert-danger-darker {
+    background-color: #ee5e7db3;
+    color: #f3f1f1;
+}
+
+.alert-default-darker {
+    background-color: #afb0b1cc;
+    color: #454646;
+}
diff --git a/src/lib/bootswatch/src/flatly/bootstrap-markbind.css b/src/lib/bootswatch/src/flatly/bootstrap-markbind.css
new file mode 100644
index 0000000000..45cb6dfc63
--- /dev/null
+++ b/src/lib/bootswatch/src/flatly/bootstrap-markbind.css
@@ -0,0 +1,24 @@
+.alert-warning-darker {
+    background-color: #d68205;
+    color: #fcfaf8;
+}
+
+.alert-info-darker {
+    background-color: #2180c0;
+    color: #f5f2f2;
+}
+
+.alert-success-darker {
+    background-color: #118b73;
+    color: #f9fbfa;
+}
+
+.alert-danger-darker {
+    background-color: #c73121ba;
+    color: #f7f5f5;
+}
+
+.alert-default-darker {
+    background-color: #afb0b1cc;
+    color: #000;
+}
diff --git a/src/lib/bootswatch/src/journal/bootstrap-markbind.css b/src/lib/bootswatch/src/journal/bootstrap-markbind.css
new file mode 100644
index 0000000000..ea9abc0f0f
--- /dev/null
+++ b/src/lib/bootswatch/src/journal/bootstrap-markbind.css
@@ -0,0 +1,24 @@
+.alert-warning-darker {
+    background-color: #f8ee66;
+    color: #5f5b35;
+}
+
+.alert-info-darker {
+    background-color: #87aed9;
+    color: #f5faff;
+}
+
+.alert-success-darker {
+    background-color: #7de399;
+    color: #f9f4f1;
+}
+
+.alert-danger-darker {
+    background-color: #d99f67;
+    color: #f9f4f1;
+}
+
+.alert-default-darker {
+    background-color: #afb0b1cc;
+    color: #2e2f30;
+}
diff --git a/src/lib/bootswatch/src/litera/bootstrap-markbind.css b/src/lib/bootswatch/src/litera/bootstrap-markbind.css
new file mode 100644
index 0000000000..356b329bb9
--- /dev/null
+++ b/src/lib/bootswatch/src/litera/bootstrap-markbind.css
@@ -0,0 +1,24 @@
+.alert-warning-darker {
+    background-color: #d58d28;
+    color: #f7f5f3;
+}
+
+.alert-info-darker {
+    background-color: #1c8393d4;
+    color: #f5f2f2;
+}
+
+.alert-success-darker {
+    background-color: #05935fe3;
+    color: #ecfbf5;
+}
+
+.alert-danger-darker {
+    background-color: #c93b37;
+    color: #f3edec;
+}
+
+.alert-default-darker {
+    background-color: #949698;
+    color: #f9fafb;
+}
diff --git a/src/lib/bootswatch/src/lumen/bootstrap-markbind.css b/src/lib/bootswatch/src/lumen/bootstrap-markbind.css
new file mode 100644
index 0000000000..d1e9b9fb6d
--- /dev/null
+++ b/src/lib/bootswatch/src/lumen/bootstrap-markbind.css
@@ -0,0 +1,24 @@
+.alert-warning-darker {
+    background-color: #f27100;
+    color: #f9f8f5;
+}
+
+.alert-info-darker {
+    background-color: #67b5d3;
+    color: #fdf9f9;
+}
+
+.alert-success-darker {
+    background-color: #229925;
+    color: #f5fbf5;
+}
+
+.alert-danger-darker {
+    background-color: #e3392f;
+    color: #fff;
+}
+
+.alert-default-darker {
+    background-color: #afb0b1cc;
+    color: #2e2f30;
+}
diff --git a/src/lib/bootswatch/src/lux/bootstrap-markbind.css b/src/lib/bootswatch/src/lux/bootstrap-markbind.css
new file mode 100644
index 0000000000..6e9a4f673e
--- /dev/null
+++ b/src/lib/bootswatch/src/lux/bootstrap-markbind.css
@@ -0,0 +1,24 @@
+.alert-warning-darker {
+    background-color: #fcd295;
+    color: #5a470d;
+}
+
+.alert-info-darker {
+    background-color: #96cfe6;
+    color: #384b52;
+}
+
+.alert-success-darker {
+    background-color: #a5eebe;
+    color: #3b5243;
+}
+
+.alert-danger-darker {
+    background-color: #eea09d;
+    color: #fffafa;
+}
+
+.alert-default-darker {
+    background-color: #afb0b1cc;
+    color: #2e2f30;
+}
diff --git a/src/lib/bootswatch/src/materia/bootstrap-markbind.css b/src/lib/bootswatch/src/materia/bootstrap-markbind.css
new file mode 100644
index 0000000000..e91a50ba39
--- /dev/null
+++ b/src/lib/bootswatch/src/materia/bootstrap-markbind.css
@@ -0,0 +1,33 @@
+.alert-warning-darker {
+    background-color: #f79300;
+    color: #f9f5ef;
+}
+
+.alert-info-darker {
+    background-color: #a120b7;
+    color: #f5f2f2;
+}
+
+.alert-success-darker {
+    background-color: #30a734;
+    color: #f9fbfa;
+}
+
+.alert-danger-darker {
+    background-color: #dc0f17;
+    color: #f7f5f5;
+}
+
+.alert-default-darker {
+    background-color: #afb0b1cc;
+    color: #000;
+}
+
+.alert-border-left {
+    background-image: none;
+}
+
+.tipbox-header-wrapper > .close-with-heading {
+    margin-top: 0.15rem;
+    font-size: 1.8rem;
+}
diff --git a/src/lib/bootswatch/src/minty/bootstrap-markbind.css b/src/lib/bootswatch/src/minty/bootstrap-markbind.css
new file mode 100644
index 0000000000..f7f1c9908f
--- /dev/null
+++ b/src/lib/bootswatch/src/minty/bootstrap-markbind.css
@@ -0,0 +1,24 @@
+.alert-warning-darker {
+    background-color: #ffc233;
+    color: #fdf9f7;
+}
+
+.alert-info-darker {
+    background-color: #37bbd3;
+    color: #f5f2f2;
+}
+
+.alert-success-darker {
+    background-color: #4ab88c;
+    color: #edfaf5;
+}
+
+.alert-danger-darker {
+    background-color: #f63;
+    color: #fbf0ed;
+}
+
+.alert-default-darker {
+    background-color: #bdbfc0cc;
+    color: #4e4e4e;
+}
diff --git a/src/lib/bootswatch/src/pulse/bootstrap-markbind.css b/src/lib/bootswatch/src/pulse/bootstrap-markbind.css
new file mode 100644
index 0000000000..ed9c0992b3
--- /dev/null
+++ b/src/lib/bootswatch/src/pulse/bootstrap-markbind.css
@@ -0,0 +1,24 @@
+.alert-warning-darker {
+    background-color: #f6cf89;
+    color: #6d550f;
+}
+
+.alert-info-darker {
+    background-color: #77ccf0;
+    color: #335767;
+}
+
+.alert-success-darker {
+    background-color: #86ecae;
+    color: #181918bd;
+}
+
+.alert-danger-darker {
+    background-color: #f48d8d;
+    color: #864848;
+}
+
+.alert-default-darker {
+    background-color: #afb0b1cc;
+    color: #2e2f30;
+}
diff --git a/src/lib/bootswatch/src/sandstone/bootstrap-markbind.css b/src/lib/bootswatch/src/sandstone/bootstrap-markbind.css
new file mode 100644
index 0000000000..698b89323f
--- /dev/null
+++ b/src/lib/bootswatch/src/sandstone/bootstrap-markbind.css
@@ -0,0 +1,24 @@
+.alert-warning-darker {
+    background-color: #f66010;
+    color: #f7f3f1;
+}
+
+.alert-info-darker {
+    background-color: #1b9cd0;
+    color: #f5f2f2;
+}
+
+.alert-success-darker {
+    background-color: #7fba29;
+    color: #f7fbf2;
+}
+
+.alert-danger-darker {
+    background-color: #d23a32;
+    color: #d23a32;
+}
+
+.alert-default-darker {
+    background-color: #afb0b1;
+    color: #fff;
+}
diff --git a/src/lib/bootswatch/src/simplex/bootstrap-markbind.css b/src/lib/bootswatch/src/simplex/bootstrap-markbind.css
new file mode 100644
index 0000000000..5aed0d8e43
--- /dev/null
+++ b/src/lib/bootswatch/src/simplex/bootstrap-markbind.css
@@ -0,0 +1,24 @@
+.alert-warning-darker {
+    background-color: #e5b7e8;
+    color: #46370b;
+}
+
+.alert-info-darker {
+    background-color: #8ad7f0;
+    color: #2c4750;
+}
+
+.alert-success-darker {
+    background-color: #bbe69c;
+    color: #425037;
+}
+
+.alert-danger-darker {
+    background-color: #f6cc9a;
+    color: #4c3f2f;
+}
+
+.alert-default-darker {
+    background-color: #afb0b1a6;
+    color: #2e2f30;
+}
diff --git a/src/lib/bootswatch/src/sketchy/bootstrap-markbind.css b/src/lib/bootswatch/src/sketchy/bootstrap-markbind.css
new file mode 100644
index 0000000000..601c78413a
--- /dev/null
+++ b/src/lib/bootswatch/src/sketchy/bootstrap-markbind.css
@@ -0,0 +1,38 @@
+.alert-warning-darker {
+    background-color: #ffdc73;
+    margin: -2px;
+    width: calc(100% + 4px) !important;
+}
+
+.alert-info-darker {
+    background-color: #37bbd3;
+    color: #fff;
+    margin: -2px;
+    width: calc(100% + 4px) !important;
+}
+
+.alert-success-darker {
+    background-color: #53de53bd;
+    color: #fbfffc;
+    margin: -2px;
+    width: calc(100% + 4px) !important;
+}
+
+.alert-danger-darker {
+    background-color: #f05151db;
+    color: #f5f2f2;
+    margin: -2px;
+    width: calc(100% + 4px) !important;
+}
+
+.alert-default-darker {
+    background-color: #afb0b1b0;
+    color: #2e2f30;
+    margin: -2px;
+    width: calc(100% + 4px) !important;
+}
+
+.tipbox-header-wrapper > .close-with-heading {
+    margin-top: -0.625rem;
+    font-size: 1.2rem;
+}
diff --git a/src/lib/bootswatch/src/spacelab/bootstrap-markbind.css b/src/lib/bootswatch/src/spacelab/bootstrap-markbind.css
new file mode 100644
index 0000000000..4f3a3ac9ba
--- /dev/null
+++ b/src/lib/bootswatch/src/spacelab/bootstrap-markbind.css
@@ -0,0 +1,24 @@
+.alert-warning-darker {
+    background-color: #f4cc9b;
+    color: #6d550f;
+}
+
+.alert-info-darker {
+    background-color: #95c9f6;
+    color: #345877;
+}
+
+.alert-success-darker {
+    background-color: #a3ee93;
+    color: #181918bd;
+}
+
+.alert-danger-darker {
+    background-color: #e67a7a;
+    color: #f5f2f2;
+}
+
+.alert-default-darker {
+    background-color: #afb0b1a3;
+    color: #2e2f30;
+}
diff --git a/src/lib/bootswatch/src/united/bootstrap-markbind.css b/src/lib/bootswatch/src/united/bootstrap-markbind.css
new file mode 100644
index 0000000000..807e6c6708
--- /dev/null
+++ b/src/lib/bootswatch/src/united/bootstrap-markbind.css
@@ -0,0 +1,24 @@
+.alert-warning-darker {
+    background-color: #f8d35e;
+    color: #6d550f;
+}
+
+.alert-info-darker {
+    background-color: #34adc3;
+    color: #f5f2f2;
+}
+
+.alert-success-darker {
+    background-color: #6ddf6d;
+    color: #f9f9f9;
+}
+
+.alert-danger-darker {
+    background-color: #cd426b;
+    color: #f5f2f2;
+}
+
+.alert-default-darker {
+    background-color: #afb0b1a1;
+    color: #3b3c3e;
+}
diff --git a/src/lib/bootswatch/src/yeti/bootstrap-markbind.css b/src/lib/bootswatch/src/yeti/bootstrap-markbind.css
new file mode 100644
index 0000000000..6f2dc52751
--- /dev/null
+++ b/src/lib/bootswatch/src/yeti/bootstrap-markbind.css
@@ -0,0 +1,29 @@
+.alert-warning-darker {
+    background-color: #cf8002;
+    color: #f9f5ef;
+    margin: -1px;
+}
+
+.alert-info-darker {
+    background-color: #2d99b9;
+    color: #fbfafa;
+    margin: -1px;
+}
+
+.alert-success-darker {
+    background-color: #39935a;
+    color: #f9fbfa;
+    margin: -1px;
+}
+
+.alert-danger-darker {
+    background-color: #d82c0e;
+    color: #f9f9f9;
+    margin: -1px;
+}
+
+.alert-default-darker {
+    background-color: #afb0b1cc;
+    color: #000;
+    margin: -1px;
+}
diff --git a/src/page.ejs b/src/page.ejs
index d85e19e29b..12b240cf89 100644
--- a/src/page.ejs
+++ b/src/page.ejs
@@ -13,6 +13,7 @@
     <link rel="stylesheet" href="<%- asset.glyphicons %>" >
     <link rel="stylesheet" href="<%- asset.highlight %>">
     <link rel="stylesheet" href="<%- asset.markbind %>">
+    <link rel="stylesheet" href="<%- asset.bootstrapMarkbindCss %>">
 <% if (asset.pluginLinks) { -%>
 <% for (const link of asset.pluginLinks) { -%>
     <%- link %>
diff --git a/src/template/default/index.md b/src/template/default/index.md
index 231d945f88..89a08ba73b 100755
--- a/src/template/default/index.md
+++ b/src/template/default/index.md
@@ -2,7 +2,6 @@
   header: header.md
   pageNav: 2
   pageNavTitle: "Chapters of This Page"
-  siteNav: site-nav.md
 </frontmatter>
 
 <br>
@@ -84,25 +83,264 @@ value2   | y        | 20       | :far-thumbs-down:
 
 **Some boxes:**
 
-<box>
-    default
+<styleswitcher></styleswitcher>
+
+<table>
+
+<tr>
+<th  style="border: 1px solid black; padding: 3px" style="border: 1px solid black; padding: 3px">
+
+## Normal boxes
+</th>
+<th  style="border: 1px solid black; padding: 3px">
+
+## Normal boxes with dismissible
+</th>
+</tr>
+
+
+<tr>
+<td  style="border: 1px solid black; padding: 3px">
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+<box >
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</box>
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+<box type="warning" >
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 </box>
-<box type="info">
-    info
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+<box type="tip" >
+    tip
 </box>
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+<box type="important" >
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</box>
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+<box type="info" >
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</box>
+
+</td>
+<td  style="border: 1px solid black; padding: 3px">
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+<box dismissible>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</box>
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
 <box type="warning" dismissible>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 </box>
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+<box type="tip" dismissible>
+    tip
+</box>
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+<box type="important" dismissible>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</box>
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+<box type="info" dismissible>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</box>
+
+</td>
+</tr>
+
+<tr>
+<th  style="border: 1px solid black; padding: 3px">
+
+## Normal boxes with heading
+</th>
+<th  style="border: 1px solid black; padding: 3px">
+
+## Normal boxes with dismissible with heading
+</th>
+</tr>
+
+<tr>
+<td  style="border: 1px solid black; padding: 3px">
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+<box heading="Tip box heading">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</box>
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+<box type="warning" heading="Tip box heading">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</box>
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
 <box type="tip" heading="Tip box heading">
     tip
 </box>
-<box type="success" heading="Tip box heading">
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+<box type="important" heading="Tip box heading">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 </box>
-<box type="important" dismissible heading="Tip box heading">
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+<box type="info" heading="Tip box heading">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 </box>
 
+</td>
+<td  style="border: 1px solid black; padding: 3px">
+
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+<box heading="Tip box heading" dismissible>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</box>
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+<box type="warning" heading="Tip box heading" dismissible>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</box>
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+<box type="tip" heading="Tip box heading" dismissible>
+    tip
+</box>
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+<box type="important" heading="Tip box heading" dismissible>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</box>
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+<box type="info" heading="Tip box heading" dismissible>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</box>
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+
+</td>
+</tr>
+
+<tr>
+<th  style="border: 1px solid black; padding: 3px">
+
+## light boxes
+</th>
+<th  style="border: 1px solid black; padding: 3px">
+
+## Light boxes with dismissible
+</th>
+</tr>
+
+<tr>
+<td  style="border: 1px solid black; padding: 3px">
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+<box light >
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</box>
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+<box light type="warning" >
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</box>
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+<box light type="tip" >
+    tip
+</box>
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+<box light type="important" >
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</box>
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+<box light type="info" >
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</box>
+
+</td>
+<td  style="border: 1px solid black; padding: 3px">
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+<box light dismissible>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</box>
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+<box light type="warning" dismissible>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</box>
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+<box light type="tip" dismissible>
+    tip
+</box>
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+<box light type="important" dismissible>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</box>
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+<box light type="info" dismissible>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</box>
+
+</td>
+</tr>
+
+<tr>
+<th  style="border: 1px solid black; padding: 3px">
+
+## Light boxes with heading
+</th>
+<th  style="border: 1px solid black; padding: 3px">
+
+## Light boxes with dismissible with heading
+</th>
+</tr>
+
+<tr>
+<td  style="border: 1px solid black; padding: 3px">
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+<box light heading="Tip box heading">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</box>
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+<box light type="warning" heading="Tip box heading">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</box>
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+<box light type="tip" heading="Tip box heading">
+    tip
+</box>
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+<box light type="important" heading="Tip box heading">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</box>
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+<box light type="info" heading="Tip box heading">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</box>
+
+</td>
+<td  style="border: 1px solid black; padding: 3px">
+
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+<box light heading="Tip box heading" dismissible>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</box>
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+<box light type="warning" heading="Tip box heading" dismissible>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</box>
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+<box light type="tip" heading="Tip box heading" dismissible>
+    tip
+</box>
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+<box light type="important" heading="Tip box heading" dismissible>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</box>
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+<box light type="info" heading="Tip box heading" dismissible>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</box>
+
+</td>
+</tr>
+
+</table>
+
 <br>
 
 # Heading 3
diff --git a/test/functional/test_site/expected/bugs/index.html b/test/functional/test_site/expected/bugs/index.html
index 2bcde6c1cc..ddc1dffb0c 100644
--- a/test/functional/test_site/expected/bugs/index.html
+++ b/test/functional/test_site/expected/bugs/index.html
@@ -14,6 +14,7 @@
   <link rel="stylesheet" href="../markbind/glyphicons/css/bootstrap-glyphicons.min.css">
   <link rel="stylesheet" href="../markbind/css/github.min.css">
   <link rel="stylesheet" href="../markbind/css/markbind.css">
+  <link rel="stylesheet" href="../markbind/css/bootstrap-markbind.css">
   <link rel="stylesheet" href="STYLESHEET_LINK">
   <link rel="stylesheet" href="../markbind/layouts/default/styles.css">
 
diff --git a/test/functional/test_site/expected/diagrams/activity.png b/test/functional/test_site/expected/diagrams/activity.png
index 3ba5430674..39478e3b0f 100644
Binary files a/test/functional/test_site/expected/diagrams/activity.png and b/test/functional/test_site/expected/diagrams/activity.png differ
diff --git a/test/functional/test_site/expected/diagrams/class.png b/test/functional/test_site/expected/diagrams/class.png
index 19423964ec..60021a3f05 100644
Binary files a/test/functional/test_site/expected/diagrams/class.png and b/test/functional/test_site/expected/diagrams/class.png differ
diff --git a/test/functional/test_site/expected/diagrams/component.png b/test/functional/test_site/expected/diagrams/component.png
index 774f9c058c..73b1e474e0 100644
Binary files a/test/functional/test_site/expected/diagrams/component.png and b/test/functional/test_site/expected/diagrams/component.png differ
diff --git a/test/functional/test_site/expected/diagrams/object.png b/test/functional/test_site/expected/diagrams/object.png
index 44f3e64a7d..0d60b1bed2 100644
Binary files a/test/functional/test_site/expected/diagrams/object.png and b/test/functional/test_site/expected/diagrams/object.png differ
diff --git a/test/functional/test_site/expected/diagrams/sequence.png b/test/functional/test_site/expected/diagrams/sequence.png
index cdd7a6e4b3..3dbf107f27 100644
Binary files a/test/functional/test_site/expected/diagrams/sequence.png and b/test/functional/test_site/expected/diagrams/sequence.png differ
diff --git a/test/functional/test_site/expected/diagrams/state.png b/test/functional/test_site/expected/diagrams/state.png
index 95018e0ab9..885da90395 100644
Binary files a/test/functional/test_site/expected/diagrams/state.png and b/test/functional/test_site/expected/diagrams/state.png differ
diff --git a/test/functional/test_site/expected/diagrams/usecase.png b/test/functional/test_site/expected/diagrams/usecase.png
index 65a5afb190..bb826902b4 100644
Binary files a/test/functional/test_site/expected/diagrams/usecase.png and b/test/functional/test_site/expected/diagrams/usecase.png differ
diff --git a/test/functional/test_site/expected/index.html b/test/functional/test_site/expected/index.html
index bf9ac77b7d..f6c3a11558 100644
--- a/test/functional/test_site/expected/index.html
+++ b/test/functional/test_site/expected/index.html
@@ -19,6 +19,7 @@
   <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
   <link rel="stylesheet" href="markbind/css/github.min.css">
   <link rel="stylesheet" href="markbind/css/markbind.css">
+  <link rel="stylesheet" href="markbind/css/bootstrap-markbind.css">
   <link rel="stylesheet" href="STYLESHEET_LINK">
   <link rel="stylesheet" href="markbind/layouts/default/styles.css">
   <link rel="stylesheet" href="markbind/css/site-nav.css">
diff --git a/test/functional/test_site/expected/markbind/css/bootstrap-markbind.css b/test/functional/test_site/expected/markbind/css/bootstrap-markbind.css
new file mode 100644
index 0000000000..1cdb8347a4
--- /dev/null
+++ b/test/functional/test_site/expected/markbind/css/bootstrap-markbind.css
@@ -0,0 +1,24 @@
+.alert-warning-darker {
+    background-color: #ffd960;
+    color: #6d550f;
+}
+
+.alert-info-darker {
+    background-color: #37bbd3;
+    color: #f5f2f2;
+}
+
+.alert-success-darker {
+    background-color: #53de53bd;
+    color: #181918bd;
+}
+
+.alert-danger-darker {
+    background-color: #f05151db;
+    color: #f5f2f2;
+}
+
+.alert-default-darker {
+    background-color: #afb0b1cc;
+    color: #2e2f30;
+}
diff --git a/test/functional/test_site/expected/sub_site/index.html b/test/functional/test_site/expected/sub_site/index.html
index c07da00506..d2a7c5fd2e 100644
--- a/test/functional/test_site/expected/sub_site/index.html
+++ b/test/functional/test_site/expected/sub_site/index.html
@@ -14,6 +14,7 @@
   <link rel="stylesheet" href="../markbind/glyphicons/css/bootstrap-glyphicons.min.css">
   <link rel="stylesheet" href="../markbind/css/github.min.css">
   <link rel="stylesheet" href="../markbind/css/markbind.css">
+  <link rel="stylesheet" href="../markbind/css/bootstrap-markbind.css">
   <link rel="stylesheet" href="STYLESHEET_LINK">
   <link rel="stylesheet" href="../markbind/layouts/default/styles.css">
 
diff --git a/test/functional/test_site/expected/testAfterSetup.html b/test/functional/test_site/expected/testAfterSetup.html
index a6e050c8ac..c8cdac47a2 100644
--- a/test/functional/test_site/expected/testAfterSetup.html
+++ b/test/functional/test_site/expected/testAfterSetup.html
@@ -14,6 +14,7 @@
   <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
   <link rel="stylesheet" href="markbind/css/github.min.css">
   <link rel="stylesheet" href="markbind/css/markbind.css">
+  <link rel="stylesheet" href="markbind/css/bootstrap-markbind.css">
   <link rel="stylesheet" href="STYLESHEET_LINK">
   <link rel="stylesheet" href="markbind/layouts/testAfterSetup/styles.css">
 
diff --git a/test/functional/test_site/expected/testAnchorGeneration.html b/test/functional/test_site/expected/testAnchorGeneration.html
index bf2b31a70d..1c83c6d995 100644
--- a/test/functional/test_site/expected/testAnchorGeneration.html
+++ b/test/functional/test_site/expected/testAnchorGeneration.html
@@ -14,6 +14,7 @@
   <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
   <link rel="stylesheet" href="markbind/css/github.min.css">
   <link rel="stylesheet" href="markbind/css/markbind.css">
+  <link rel="stylesheet" href="markbind/css/bootstrap-markbind.css">
   <link rel="stylesheet" href="STYLESHEET_LINK">
   <link rel="stylesheet" href="markbind/layouts/default/styles.css">
 
diff --git a/test/functional/test_site/expected/testAntiFOUCStyles.html b/test/functional/test_site/expected/testAntiFOUCStyles.html
index d47743771c..347e058af8 100644
--- a/test/functional/test_site/expected/testAntiFOUCStyles.html
+++ b/test/functional/test_site/expected/testAntiFOUCStyles.html
@@ -14,6 +14,7 @@
   <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
   <link rel="stylesheet" href="markbind/css/github.min.css">
   <link rel="stylesheet" href="markbind/css/markbind.css">
+  <link rel="stylesheet" href="markbind/css/bootstrap-markbind.css">
   <link rel="stylesheet" href="STYLESHEET_LINK">
   <link rel="stylesheet" href="markbind/layouts/default/styles.css">
 
diff --git a/test/functional/test_site/expected/testEmptyFrontmatter.html b/test/functional/test_site/expected/testEmptyFrontmatter.html
index 973b33c648..fe800084f1 100644
--- a/test/functional/test_site/expected/testEmptyFrontmatter.html
+++ b/test/functional/test_site/expected/testEmptyFrontmatter.html
@@ -14,6 +14,7 @@
   <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
   <link rel="stylesheet" href="markbind/css/github.min.css">
   <link rel="stylesheet" href="markbind/css/markbind.css">
+  <link rel="stylesheet" href="markbind/css/bootstrap-markbind.css">
   <link rel="stylesheet" href="STYLESHEET_LINK">
   <link rel="stylesheet" href="markbind/layouts/default/styles.css">
 
diff --git a/test/functional/test_site/expected/testExternalScripts.html b/test/functional/test_site/expected/testExternalScripts.html
index 14c877b65b..57914c4157 100644
--- a/test/functional/test_site/expected/testExternalScripts.html
+++ b/test/functional/test_site/expected/testExternalScripts.html
@@ -14,6 +14,7 @@
   <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
   <link rel="stylesheet" href="markbind/css/github.min.css">
   <link rel="stylesheet" href="markbind/css/markbind.css">
+  <link rel="stylesheet" href="markbind/css/bootstrap-markbind.css">
   <link rel="stylesheet" href="STYLESHEET_LINK">
   <link rel="stylesheet" href="markbind/layouts/default/styles.css">
 
diff --git a/test/functional/test_site/expected/testImportVariables.html b/test/functional/test_site/expected/testImportVariables.html
index c40176d22b..60c90a8eeb 100644
--- a/test/functional/test_site/expected/testImportVariables.html
+++ b/test/functional/test_site/expected/testImportVariables.html
@@ -14,6 +14,7 @@
   <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
   <link rel="stylesheet" href="markbind/css/github.min.css">
   <link rel="stylesheet" href="markbind/css/markbind.css">
+  <link rel="stylesheet" href="markbind/css/bootstrap-markbind.css">
   <link rel="stylesheet" href="STYLESHEET_LINK">
   <link rel="stylesheet" href="markbind/layouts/default/styles.css">
 
diff --git a/test/functional/test_site/expected/testLayouts.html b/test/functional/test_site/expected/testLayouts.html
index fde9dd49ba..641ced4ea1 100644
--- a/test/functional/test_site/expected/testLayouts.html
+++ b/test/functional/test_site/expected/testLayouts.html
@@ -14,6 +14,7 @@
   <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
   <link rel="stylesheet" href="markbind/css/github.min.css">
   <link rel="stylesheet" href="markbind/css/markbind.css">
+  <link rel="stylesheet" href="markbind/css/bootstrap-markbind.css">
   <link rel="stylesheet" href="STYLESHEET_LINK">
   <link rel="stylesheet" href="markbind/layouts/testLayout/styles.css">
   <link rel="stylesheet" href="markbind/css/site-nav.css">
diff --git a/test/functional/test_site/expected/testLayoutsOverride.html b/test/functional/test_site/expected/testLayoutsOverride.html
index 0107a8cfbd..335293ed3c 100644
--- a/test/functional/test_site/expected/testLayoutsOverride.html
+++ b/test/functional/test_site/expected/testLayoutsOverride.html
@@ -14,6 +14,7 @@
   <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
   <link rel="stylesheet" href="markbind/css/github.min.css">
   <link rel="stylesheet" href="markbind/css/markbind.css">
+  <link rel="stylesheet" href="markbind/css/bootstrap-markbind.css">
   <link rel="stylesheet" href="STYLESHEET_LINK">
   <link rel="stylesheet" href="markbind/layouts/testLayout/styles.css">
   <link rel="stylesheet" href="markbind/css/site-nav.css">
diff --git a/test/functional/test_site/expected/testPanelsWithImportedVariables.html b/test/functional/test_site/expected/testPanelsWithImportedVariables.html
index 24842a6e5c..3ea5196461 100644
--- a/test/functional/test_site/expected/testPanelsWithImportedVariables.html
+++ b/test/functional/test_site/expected/testPanelsWithImportedVariables.html
@@ -14,6 +14,7 @@
   <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
   <link rel="stylesheet" href="markbind/css/github.min.css">
   <link rel="stylesheet" href="markbind/css/markbind.css">
+  <link rel="stylesheet" href="markbind/css/bootstrap-markbind.css">
   <link rel="stylesheet" href="STYLESHEET_LINK">
   <link rel="stylesheet" href="markbind/layouts/default/styles.css">
 
diff --git a/test/functional/test_site/expected/testPlantUML.html b/test/functional/test_site/expected/testPlantUML.html
index 2a7680bc76..08f418a9f8 100644
--- a/test/functional/test_site/expected/testPlantUML.html
+++ b/test/functional/test_site/expected/testPlantUML.html
@@ -14,6 +14,7 @@
   <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
   <link rel="stylesheet" href="markbind/css/github.min.css">
   <link rel="stylesheet" href="markbind/css/markbind.css">
+  <link rel="stylesheet" href="markbind/css/bootstrap-markbind.css">
   <link rel="stylesheet" href="STYLESHEET_LINK">
   <link rel="stylesheet" href="markbind/layouts/default/styles.css">
 
diff --git a/test/functional/test_site/expected/testThumbnails.html b/test/functional/test_site/expected/testThumbnails.html
index e2dd5c6959..8530bd7304 100644
--- a/test/functional/test_site/expected/testThumbnails.html
+++ b/test/functional/test_site/expected/testThumbnails.html
@@ -14,6 +14,7 @@
   <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
   <link rel="stylesheet" href="markbind/css/github.min.css">
   <link rel="stylesheet" href="markbind/css/markbind.css">
+  <link rel="stylesheet" href="markbind/css/bootstrap-markbind.css">
   <link rel="stylesheet" href="STYLESHEET_LINK">
   <link rel="stylesheet" href="markbind/layouts/default/styles.css">
 
diff --git a/test/functional/test_site/expected/testTooltipSpacing.html b/test/functional/test_site/expected/testTooltipSpacing.html
index 0546bdb0ad..868cc817eb 100644
--- a/test/functional/test_site/expected/testTooltipSpacing.html
+++ b/test/functional/test_site/expected/testTooltipSpacing.html
@@ -14,6 +14,7 @@
   <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
   <link rel="stylesheet" href="markbind/css/github.min.css">
   <link rel="stylesheet" href="markbind/css/markbind.css">
+  <link rel="stylesheet" href="markbind/css/bootstrap-markbind.css">
   <link rel="stylesheet" href="STYLESHEET_LINK">
   <link rel="stylesheet" href="markbind/layouts/default/styles.css">
 
diff --git a/test/functional/test_site/expected/test_md_fragment.html b/test/functional/test_site/expected/test_md_fragment.html
index 8004fe3b37..2a0e9a5a45 100644
--- a/test/functional/test_site/expected/test_md_fragment.html
+++ b/test/functional/test_site/expected/test_md_fragment.html
@@ -14,6 +14,7 @@
   <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
   <link rel="stylesheet" href="markbind/css/github.min.css">
   <link rel="stylesheet" href="markbind/css/markbind.css">
+  <link rel="stylesheet" href="markbind/css/bootstrap-markbind.css">
   <link rel="stylesheet" href="STYLESHEET_LINK">
   <link rel="stylesheet" href="markbind/layouts/default/styles.css">
 
diff --git a/test/functional/test_site_algolia_plugin/expected/index.html b/test/functional/test_site_algolia_plugin/expected/index.html
index d86dae4cda..f0334b003d 100644
--- a/test/functional/test_site_algolia_plugin/expected/index.html
+++ b/test/functional/test_site_algolia_plugin/expected/index.html
@@ -14,6 +14,7 @@
   <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
   <link rel="stylesheet" href="markbind/css/github.min.css">
   <link rel="stylesheet" href="markbind/css/markbind.css">
+  <link rel="stylesheet" href="markbind/css/bootstrap-markbind.css">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
   <link rel="stylesheet" href="markbind/layouts/default/styles.css">
   <link rel="stylesheet" href="markbind/css/site-nav.css">
diff --git a/test/functional/test_site_algolia_plugin/expected/markbind/css/bootstrap-markbind.css b/test/functional/test_site_algolia_plugin/expected/markbind/css/bootstrap-markbind.css
new file mode 100644
index 0000000000..1cdb8347a4
--- /dev/null
+++ b/test/functional/test_site_algolia_plugin/expected/markbind/css/bootstrap-markbind.css
@@ -0,0 +1,24 @@
+.alert-warning-darker {
+    background-color: #ffd960;
+    color: #6d550f;
+}
+
+.alert-info-darker {
+    background-color: #37bbd3;
+    color: #f5f2f2;
+}
+
+.alert-success-darker {
+    background-color: #53de53bd;
+    color: #181918bd;
+}
+
+.alert-danger-darker {
+    background-color: #f05151db;
+    color: #f5f2f2;
+}
+
+.alert-default-darker {
+    background-color: #afb0b1cc;
+    color: #2e2f30;
+}
diff --git a/test/functional/test_site_convert/expected/Home.html b/test/functional/test_site_convert/expected/Home.html
index ae05a3b4d6..ef00a8af66 100644
--- a/test/functional/test_site_convert/expected/Home.html
+++ b/test/functional/test_site_convert/expected/Home.html
@@ -14,6 +14,7 @@
   <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
   <link rel="stylesheet" href="markbind/css/github.min.css">
   <link rel="stylesheet" href="markbind/css/markbind.css">
+  <link rel="stylesheet" href="markbind/css/bootstrap-markbind.css">
   <link rel="stylesheet" href="markbind/layouts/default/styles.css">
   <link rel="stylesheet" href="markbind/css/site-nav.css">
 
diff --git a/test/functional/test_site_convert/expected/Page-1.html b/test/functional/test_site_convert/expected/Page-1.html
index b2832d30e8..2236e0d814 100644
--- a/test/functional/test_site_convert/expected/Page-1.html
+++ b/test/functional/test_site_convert/expected/Page-1.html
@@ -14,6 +14,7 @@
   <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
   <link rel="stylesheet" href="markbind/css/github.min.css">
   <link rel="stylesheet" href="markbind/css/markbind.css">
+  <link rel="stylesheet" href="markbind/css/bootstrap-markbind.css">
   <link rel="stylesheet" href="markbind/layouts/default/styles.css">
   <link rel="stylesheet" href="markbind/css/site-nav.css">
 
diff --git a/test/functional/test_site_convert/expected/_Footer.html b/test/functional/test_site_convert/expected/_Footer.html
index a33b0a47d4..28b4cb900d 100644
--- a/test/functional/test_site_convert/expected/_Footer.html
+++ b/test/functional/test_site_convert/expected/_Footer.html
@@ -14,6 +14,7 @@
   <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
   <link rel="stylesheet" href="markbind/css/github.min.css">
   <link rel="stylesheet" href="markbind/css/markbind.css">
+  <link rel="stylesheet" href="markbind/css/bootstrap-markbind.css">
   <link rel="stylesheet" href="markbind/layouts/default/styles.css">
   <link rel="stylesheet" href="markbind/css/site-nav.css">
 
diff --git a/test/functional/test_site_convert/expected/_Sidebar.html b/test/functional/test_site_convert/expected/_Sidebar.html
index b971eb2265..2ac0fac8e7 100644
--- a/test/functional/test_site_convert/expected/_Sidebar.html
+++ b/test/functional/test_site_convert/expected/_Sidebar.html
@@ -14,6 +14,7 @@
   <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
   <link rel="stylesheet" href="markbind/css/github.min.css">
   <link rel="stylesheet" href="markbind/css/markbind.css">
+  <link rel="stylesheet" href="markbind/css/bootstrap-markbind.css">
   <link rel="stylesheet" href="markbind/layouts/default/styles.css">
   <link rel="stylesheet" href="markbind/css/site-nav.css">
 
diff --git a/test/functional/test_site_convert/expected/about.html b/test/functional/test_site_convert/expected/about.html
index cbba55ddc9..429dfc0b06 100644
--- a/test/functional/test_site_convert/expected/about.html
+++ b/test/functional/test_site_convert/expected/about.html
@@ -14,6 +14,7 @@
   <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
   <link rel="stylesheet" href="markbind/css/github.min.css">
   <link rel="stylesheet" href="markbind/css/markbind.css">
+  <link rel="stylesheet" href="markbind/css/bootstrap-markbind.css">
   <link rel="stylesheet" href="markbind/layouts/default/styles.css">
   <link rel="stylesheet" href="markbind/css/site-nav.css">
 
diff --git a/test/functional/test_site_convert/expected/contents/topic1.html b/test/functional/test_site_convert/expected/contents/topic1.html
index f9f1881e44..044008ba18 100644
--- a/test/functional/test_site_convert/expected/contents/topic1.html
+++ b/test/functional/test_site_convert/expected/contents/topic1.html
@@ -14,6 +14,7 @@
   <link rel="stylesheet" href="../markbind/glyphicons/css/bootstrap-glyphicons.min.css">
   <link rel="stylesheet" href="../markbind/css/github.min.css">
   <link rel="stylesheet" href="../markbind/css/markbind.css">
+  <link rel="stylesheet" href="../markbind/css/bootstrap-markbind.css">
   <link rel="stylesheet" href="../markbind/layouts/default/styles.css">
   <link rel="stylesheet" href="../markbind/css/site-nav.css">
 
diff --git a/test/functional/test_site_convert/expected/contents/topic2.html b/test/functional/test_site_convert/expected/contents/topic2.html
index b6e20af7bf..7e487a845d 100644
--- a/test/functional/test_site_convert/expected/contents/topic2.html
+++ b/test/functional/test_site_convert/expected/contents/topic2.html
@@ -14,6 +14,7 @@
   <link rel="stylesheet" href="../markbind/glyphicons/css/bootstrap-glyphicons.min.css">
   <link rel="stylesheet" href="../markbind/css/github.min.css">
   <link rel="stylesheet" href="../markbind/css/markbind.css">
+  <link rel="stylesheet" href="../markbind/css/bootstrap-markbind.css">
   <link rel="stylesheet" href="../markbind/layouts/default/styles.css">
   <link rel="stylesheet" href="../markbind/css/site-nav.css">
 
diff --git a/test/functional/test_site_convert/expected/contents/topic3a.html b/test/functional/test_site_convert/expected/contents/topic3a.html
index 84387ca69f..e03ff21e9a 100644
--- a/test/functional/test_site_convert/expected/contents/topic3a.html
+++ b/test/functional/test_site_convert/expected/contents/topic3a.html
@@ -14,6 +14,7 @@
   <link rel="stylesheet" href="../markbind/glyphicons/css/bootstrap-glyphicons.min.css">
   <link rel="stylesheet" href="../markbind/css/github.min.css">
   <link rel="stylesheet" href="../markbind/css/markbind.css">
+  <link rel="stylesheet" href="../markbind/css/bootstrap-markbind.css">
   <link rel="stylesheet" href="../markbind/layouts/default/styles.css">
   <link rel="stylesheet" href="../markbind/css/site-nav.css">
 
diff --git a/test/functional/test_site_convert/expected/contents/topic3b.html b/test/functional/test_site_convert/expected/contents/topic3b.html
index de8ebbd692..0383bac3ef 100644
--- a/test/functional/test_site_convert/expected/contents/topic3b.html
+++ b/test/functional/test_site_convert/expected/contents/topic3b.html
@@ -14,6 +14,7 @@
   <link rel="stylesheet" href="../markbind/glyphicons/css/bootstrap-glyphicons.min.css">
   <link rel="stylesheet" href="../markbind/css/github.min.css">
   <link rel="stylesheet" href="../markbind/css/markbind.css">
+  <link rel="stylesheet" href="../markbind/css/bootstrap-markbind.css">
   <link rel="stylesheet" href="../markbind/layouts/default/styles.css">
   <link rel="stylesheet" href="../markbind/css/site-nav.css">
 
diff --git a/test/functional/test_site_convert/expected/index.html b/test/functional/test_site_convert/expected/index.html
index 53ba3fde86..7dd795c710 100644
--- a/test/functional/test_site_convert/expected/index.html
+++ b/test/functional/test_site_convert/expected/index.html
@@ -14,6 +14,7 @@
   <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
   <link rel="stylesheet" href="markbind/css/github.min.css">
   <link rel="stylesheet" href="markbind/css/markbind.css">
+  <link rel="stylesheet" href="markbind/css/bootstrap-markbind.css">
   <link rel="stylesheet" href="markbind/layouts/default/styles.css">
   <link rel="stylesheet" href="markbind/css/site-nav.css">
 
diff --git a/test/functional/test_site_convert/expected/markbind/css/bootstrap-markbind.css b/test/functional/test_site_convert/expected/markbind/css/bootstrap-markbind.css
new file mode 100644
index 0000000000..1cdb8347a4
--- /dev/null
+++ b/test/functional/test_site_convert/expected/markbind/css/bootstrap-markbind.css
@@ -0,0 +1,24 @@
+.alert-warning-darker {
+    background-color: #ffd960;
+    color: #6d550f;
+}
+
+.alert-info-darker {
+    background-color: #37bbd3;
+    color: #f5f2f2;
+}
+
+.alert-success-darker {
+    background-color: #53de53bd;
+    color: #181918bd;
+}
+
+.alert-danger-darker {
+    background-color: #f05151db;
+    color: #f5f2f2;
+}
+
+.alert-default-darker {
+    background-color: #afb0b1cc;
+    color: #2e2f30;
+}
diff --git a/test/functional/test_site_templates/test_default/expected/contents/topic1.html b/test/functional/test_site_templates/test_default/expected/contents/topic1.html
index baceca63b5..3f34d6da2e 100644
--- a/test/functional/test_site_templates/test_default/expected/contents/topic1.html
+++ b/test/functional/test_site_templates/test_default/expected/contents/topic1.html
@@ -14,6 +14,7 @@
   <link rel="stylesheet" href="../markbind/glyphicons/css/bootstrap-glyphicons.min.css">
   <link rel="stylesheet" href="../markbind/css/github.min.css">
   <link rel="stylesheet" href="../markbind/css/markbind.css">
+  <link rel="stylesheet" href="../markbind/css/bootstrap-markbind.css">
   <link rel="stylesheet" href="../markbind/layouts/default/styles.css">
   <link rel="stylesheet" href="../markbind/css/site-nav.css">
 
diff --git a/test/functional/test_site_templates/test_default/expected/contents/topic2.html b/test/functional/test_site_templates/test_default/expected/contents/topic2.html
index ddb5725e5b..d9190d2e95 100644
--- a/test/functional/test_site_templates/test_default/expected/contents/topic2.html
+++ b/test/functional/test_site_templates/test_default/expected/contents/topic2.html
@@ -14,6 +14,7 @@
   <link rel="stylesheet" href="../markbind/glyphicons/css/bootstrap-glyphicons.min.css">
   <link rel="stylesheet" href="../markbind/css/github.min.css">
   <link rel="stylesheet" href="../markbind/css/markbind.css">
+  <link rel="stylesheet" href="../markbind/css/bootstrap-markbind.css">
   <link rel="stylesheet" href="../markbind/layouts/default/styles.css">
   <link rel="stylesheet" href="../markbind/css/site-nav.css">
 
diff --git a/test/functional/test_site_templates/test_default/expected/contents/topic3a.html b/test/functional/test_site_templates/test_default/expected/contents/topic3a.html
index b6b24de7e6..e9a1ce30fc 100644
--- a/test/functional/test_site_templates/test_default/expected/contents/topic3a.html
+++ b/test/functional/test_site_templates/test_default/expected/contents/topic3a.html
@@ -14,6 +14,7 @@
   <link rel="stylesheet" href="../markbind/glyphicons/css/bootstrap-glyphicons.min.css">
   <link rel="stylesheet" href="../markbind/css/github.min.css">
   <link rel="stylesheet" href="../markbind/css/markbind.css">
+  <link rel="stylesheet" href="../markbind/css/bootstrap-markbind.css">
   <link rel="stylesheet" href="../markbind/layouts/default/styles.css">
   <link rel="stylesheet" href="../markbind/css/site-nav.css">
 
diff --git a/test/functional/test_site_templates/test_default/expected/contents/topic3b.html b/test/functional/test_site_templates/test_default/expected/contents/topic3b.html
index 90ac8110de..dc7dd7b785 100644
--- a/test/functional/test_site_templates/test_default/expected/contents/topic3b.html
+++ b/test/functional/test_site_templates/test_default/expected/contents/topic3b.html
@@ -14,6 +14,7 @@
   <link rel="stylesheet" href="../markbind/glyphicons/css/bootstrap-glyphicons.min.css">
   <link rel="stylesheet" href="../markbind/css/github.min.css">
   <link rel="stylesheet" href="../markbind/css/markbind.css">
+  <link rel="stylesheet" href="../markbind/css/bootstrap-markbind.css">
   <link rel="stylesheet" href="../markbind/layouts/default/styles.css">
   <link rel="stylesheet" href="../markbind/css/site-nav.css">
 
diff --git a/test/functional/test_site_templates/test_default/expected/index.html b/test/functional/test_site_templates/test_default/expected/index.html
index 03d4f64094..08584eb432 100644
--- a/test/functional/test_site_templates/test_default/expected/index.html
+++ b/test/functional/test_site_templates/test_default/expected/index.html
@@ -14,8 +14,9 @@
   <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
   <link rel="stylesheet" href="markbind/css/github.min.css">
   <link rel="stylesheet" href="markbind/css/markbind.css">
+  <link rel="stylesheet" href="markbind/css/bootstrap-markbind.css">
   <link rel="stylesheet" href="markbind/layouts/default/styles.css">
-  <link rel="stylesheet" href="markbind/css/site-nav.css">
+
   <link rel="stylesheet" href="markbind/css/page-nav.css">
 
 
@@ -41,25 +42,6 @@
       </navbar>
     </header>
     <div id="flex-body">
-      <nav id="site-nav" class="navbar navbar-light bg-transparent">
-        <div class="border-right-grey nav-inner position-sticky slim-scroll">
-          <ul class="px-0 site-nav-list">
-            <li class="mt-2"><a href="/index.html" class="site-nav__a current">Home 🏠</a></li>
-            <li class="mt-2"><a href="/contents/topic1.html" class="site-nav__a">Topic 1</a></li>
-            <li class="mt-2"><a href="/contents/topic2.html" class="site-nav__a">Topic 2</a></li>
-            <li class="mt-2"><button class="dropdown-btn dropdown-btn-open">Topic 3 
- <i class="dropdown-btn-icon rotate-icon">
-<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></i></button>
-              <div class="dropdown-container dropdown-container-open">
-                <ul class="pl-3 site-nav-list">
-                  <li class="mt-2"><a href="/contents/topic3a.html" class="site-nav__a">Topic 3a</a></li>
-                  <li class="mt-2"><a href="/contents/topic3b.html" class="site-nav__a">Topic 3b</a></li>
-                </ul>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
       <div id="content-wrapper">
         <br>
         <div class="jumbotron jumbotron-fluid bg-primary text-white">
@@ -151,27 +133,267 @@ <h2 id="sub-heading-1-2">Sub Heading 1.2<a class="fa fa-anchor" href="#sub-headi
         <br>
         <h1 id="heading-2">Heading 2<a class="fa fa-anchor" href="#heading-2"></a></h1>
         <p><strong>Some boxes:</strong></p>
-        <box>
-          default
-        </box>
-        <box type="info">
-          info
-        </box>
-        <box type="warning" dismissible="">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
-          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-        </box>
-        <box type="tip" heading="Tip box heading">
-          tip
-        </box>
-        <box type="success" heading="Tip box heading">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
-          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-        </box>
-        <box type="important" dismissible="" heading="Tip box heading">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
-          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-        </box>
+        <p>
+          <styleswitcher></styleswitcher>
+        </p>
+        <table>
+          <tr>
+            <th style="border: 1px solid black; padding: 3px">
+              <h2 id="normal-boxes">Normal boxes<a class="fa fa-anchor" href="#normal-boxes"></a></h2>
+            </th>
+            <th style="border: 1px solid black; padding: 3px">
+              <h2 id="normal-boxes-with-dismissible">Normal boxes with dismissible<a class="fa fa-anchor" href="#normal-boxes-with-dismissible"></a></h2>
+            </th>
+          </tr>
+          <tr>
+            <td style="border: 1px solid black; padding: 3px">
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+                <box>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+                  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </box>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+                <box type="warning">
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+                  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </box>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+                <box type="tip">
+                  tip
+                </box>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+                <box type="important">
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+                  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </box>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+                <box type="info">
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+                  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </box>
+              </p>
+            </td>
+            <td style="border: 1px solid black; padding: 3px">
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+                <box dismissible="">
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+                  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </box>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+                <box type="warning" dismissible="">
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+                  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </box>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+                <box type="tip" dismissible="">
+                  tip
+                </box>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+                <box type="important" dismissible="">
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+                  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </box>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+                <box type="info" dismissible="">
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+                  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </box>
+              </p>
+            </td>
+          </tr>
+          <tr>
+            <th style="border: 1px solid black; padding: 3px">
+              <h2 id="normal-boxes-with-heading">Normal boxes with heading<a class="fa fa-anchor" href="#normal-boxes-with-heading"></a></h2>
+            </th>
+            <th style="border: 1px solid black; padding: 3px">
+              <h2 id="normal-boxes-with-dismissible-with-heading">Normal boxes with dismissible with heading<a class="fa fa-anchor" href="#normal-boxes-with-dismissible-with-heading"></a></h2>
+            </th>
+          </tr>
+          <tr>
+            <td style="border: 1px solid black; padding: 3px">
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+                <box heading="Tip box heading">
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+                  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </box>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+                <box type="warning" heading="Tip box heading">
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+                  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </box>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+                <box type="tip" heading="Tip box heading">
+                  tip
+                </box>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+                <box type="important" heading="Tip box heading">
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+                  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </box>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+                <box type="info" heading="Tip box heading">
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+                  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </box>
+              </p>
+            </td>
+            <td style="border: 1px solid black; padding: 3px">
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+                <box heading="Tip box heading" dismissible="">
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+                  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </box>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+                <box type="warning" heading="Tip box heading" dismissible="">
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+                  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </box>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+                <box type="tip" heading="Tip box heading" dismissible="">
+                  tip
+                </box>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+                <box type="important" heading="Tip box heading" dismissible="">
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+                  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </box>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+                <box type="info" heading="Tip box heading" dismissible="">
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+                  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </box>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p>
+            </td>
+          </tr>
+          <tr>
+            <th style="border: 1px solid black; padding: 3px">
+              <h2 id="light-boxes">light boxes<a class="fa fa-anchor" href="#light-boxes"></a></h2>
+            </th>
+            <th style="border: 1px solid black; padding: 3px">
+              <h2 id="light-boxes-with-dismissible">Light boxes with dismissible<a class="fa fa-anchor" href="#light-boxes-with-dismissible"></a></h2>
+            </th>
+          </tr>
+          <tr>
+            <td style="border: 1px solid black; padding: 3px">
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+                <box light="">
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+                  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </box>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+                <box light="" type="warning">
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+                  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </box>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+                <box light="" type="tip">
+                  tip
+                </box>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+                <box light="" type="important">
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+                  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </box>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+                <box light="" type="info">
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+                  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </box>
+              </p>
+            </td>
+            <td style="border: 1px solid black; padding: 3px">
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+                <box light="" dismissible="">
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+                  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </box>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+                <box light="" type="warning" dismissible="">
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+                  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </box>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+                <box light="" type="tip" dismissible="">
+                  tip
+                </box>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+                <box light="" type="important" dismissible="">
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+                  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </box>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+                <box light="" type="info" dismissible="">
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+                  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </box>
+              </p>
+            </td>
+          </tr>
+          <tr>
+            <th style="border: 1px solid black; padding: 3px">
+              <h2 id="light-boxes-with-heading">Light boxes with heading<a class="fa fa-anchor" href="#light-boxes-with-heading"></a></h2>
+            </th>
+            <th style="border: 1px solid black; padding: 3px">
+              <h2 id="light-boxes-with-dismissible-with-heading">Light boxes with dismissible with heading<a class="fa fa-anchor" href="#light-boxes-with-dismissible-with-heading"></a></h2>
+            </th>
+          </tr>
+          <tr>
+            <td style="border: 1px solid black; padding: 3px">
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+                <box light="" heading="Tip box heading">
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+                  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </box>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+                <box light="" type="warning" heading="Tip box heading">
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+                  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </box>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+                <box light="" type="tip" heading="Tip box heading">
+                  tip
+                </box>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+                <box light="" type="important" heading="Tip box heading">
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+                  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </box>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+                <box light="" type="info" heading="Tip box heading">
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+                  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </box>
+              </p>
+            </td>
+            <td style="border: 1px solid black; padding: 3px">
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+                <box light="" heading="Tip box heading" dismissible="">
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+                  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </box>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+                <box light="" type="warning" heading="Tip box heading" dismissible="">
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+                  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </box>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+                <box light="" type="tip" heading="Tip box heading" dismissible="">
+                  tip
+                </box>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+                <box light="" type="important" heading="Tip box heading" dismissible="">
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+                  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </box>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+                <box light="" type="info" heading="Tip box heading" dismissible="">
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+                  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </box>
+              </p>
+            </td>
+          </tr>
+        </table>
         <br>
         <h1 id="heading-3">Heading 3<a class="fa fa-anchor" href="#heading-3"></a></h1>
         <panel header="Expandable panel" type="info">
@@ -204,6 +426,16 @@ <h1 id="heading-3">Heading 3<a class="fa fa-anchor" href="#heading-3"></a></h1>
               <a class="nav-link py-1" href="#sub-heading-1-2">Sub Heading 1.2&#x200E;</a>
             </nav>
             <a class="nav-link py-1" href="#heading-2">Heading 2&#x200E;</a>
+            <nav class="nav nav-pills flex-column my-0 nested no-flex-wrap">
+              <a class="nav-link py-1" href="#normal-boxes">Normal boxes&#x200E;</a>
+              <a class="nav-link py-1" href="#normal-boxes-with-dismissible">Normal boxes with dismissible&#x200E;</a>
+              <a class="nav-link py-1" href="#normal-boxes-with-heading">Normal boxes with heading&#x200E;</a>
+              <a class="nav-link py-1" href="#normal-boxes-with-dismissible-with-heading">Normal boxes with dismissible with heading&#x200E;</a>
+              <a class="nav-link py-1" href="#light-boxes">light boxes&#x200E;</a>
+              <a class="nav-link py-1" href="#light-boxes-with-dismissible">Light boxes with dismissible&#x200E;</a>
+              <a class="nav-link py-1" href="#light-boxes-with-heading">Light boxes with heading&#x200E;</a>
+              <a class="nav-link py-1" href="#light-boxes-with-dismissible-with-heading">Light boxes with dismissible with heading&#x200E;</a>
+            </nav>
             <a class="nav-link py-1" href="#heading-3">Heading 3&#x200E;</a>
 
           </nav>
diff --git a/test/functional/test_site_templates/test_default/expected/markbind/css/bootstrap-markbind.css b/test/functional/test_site_templates/test_default/expected/markbind/css/bootstrap-markbind.css
new file mode 100644
index 0000000000..1cdb8347a4
--- /dev/null
+++ b/test/functional/test_site_templates/test_default/expected/markbind/css/bootstrap-markbind.css
@@ -0,0 +1,24 @@
+.alert-warning-darker {
+    background-color: #ffd960;
+    color: #6d550f;
+}
+
+.alert-info-darker {
+    background-color: #37bbd3;
+    color: #f5f2f2;
+}
+
+.alert-success-darker {
+    background-color: #53de53bd;
+    color: #181918bd;
+}
+
+.alert-danger-darker {
+    background-color: #f05151db;
+    color: #f5f2f2;
+}
+
+.alert-default-darker {
+    background-color: #afb0b1cc;
+    color: #2e2f30;
+}
diff --git a/test/functional/test_site_templates/test_default/expected/siteData.json b/test/functional/test_site_templates/test_default/expected/siteData.json
index c8dbf41472..b421368f90 100644
--- a/test/functional/test_site_templates/test_default/expected/siteData.json
+++ b/test/functional/test_site_templates/test_default/expected/siteData.json
@@ -8,12 +8,19 @@
         "sub-heading-1-1": "Sub Heading 1.1",
         "sub-heading-1-2": "Sub Heading 1.2",
         "heading-2": "Heading 2",
+        "normal-boxes": "Normal boxes",
+        "normal-boxes-with-dismissible": "Normal boxes with dismissible",
+        "normal-boxes-with-heading": "Normal boxes with heading",
+        "normal-boxes-with-dismissible-with-heading": "Normal boxes with dismissible with heading",
+        "light-boxes": "light boxes",
+        "light-boxes-with-dismissible": "Light boxes with dismissible",
+        "light-boxes-with-heading": "Light boxes with heading",
+        "light-boxes-with-dismissible-with-heading": "Light boxes with dismissible with heading",
         "heading-3": "Heading 3"
       },
       "header": "header.md",
       "pageNav": 2,
       "pageNavTitle": "Chapters of This Page",
-      "siteNav": "site-nav.md",
       "src": "index.md",
       "title": "Landing Page",
       "layout": "default"
diff --git a/test/functional/test_site_templates/test_minimal/expected/index.html b/test/functional/test_site_templates/test_minimal/expected/index.html
index 3c6afec1bf..081b5716cd 100644
--- a/test/functional/test_site_templates/test_minimal/expected/index.html
+++ b/test/functional/test_site_templates/test_minimal/expected/index.html
@@ -14,6 +14,7 @@
   <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
   <link rel="stylesheet" href="markbind/css/github.min.css">
   <link rel="stylesheet" href="markbind/css/markbind.css">
+  <link rel="stylesheet" href="markbind/css/bootstrap-markbind.css">
   <link rel="stylesheet" href="markbind/layouts/default/styles.css">
 
 
diff --git a/test/functional/test_site_templates/test_minimal/expected/markbind/css/bootstrap-markbind.css b/test/functional/test_site_templates/test_minimal/expected/markbind/css/bootstrap-markbind.css
new file mode 100644
index 0000000000..1cdb8347a4
--- /dev/null
+++ b/test/functional/test_site_templates/test_minimal/expected/markbind/css/bootstrap-markbind.css
@@ -0,0 +1,24 @@
+.alert-warning-darker {
+    background-color: #ffd960;
+    color: #6d550f;
+}
+
+.alert-info-darker {
+    background-color: #37bbd3;
+    color: #f5f2f2;
+}
+
+.alert-success-darker {
+    background-color: #53de53bd;
+    color: #181918bd;
+}
+
+.alert-danger-darker {
+    background-color: #f05151db;
+    color: #f5f2f2;
+}
+
+.alert-default-darker {
+    background-color: #afb0b1cc;
+    color: #2e2f30;
+}
diff --git a/test/unit/Site.test.js b/test/unit/Site.test.js
index 4dbf6f8c85..bcb8166329 100644
--- a/test/unit/Site.test.js
+++ b/test/unit/Site.test.js
@@ -38,6 +38,7 @@ test('Site Generate builds the correct amount of assets', async () => {
     'asset/css/markbind.css': '',
     'asset/css/page-nav.css': '',
     'asset/css/site-nav.css': '',
+    'asset/css/bootstrap-markbind.css': '',
 
     'asset/js/bootstrap-utility.min.js': '',
     'asset/js/setup.js': '',
@@ -60,7 +61,7 @@ test('Site Generate builds the correct amount of assets', async () => {
   await site.generate();
   const paths = Object.keys(fs.vol.toJSON());
   const originalNumFiles = Object.keys(json).length;
-  const expectedNumBuilt = 20;
+  const expectedNumBuilt = 21;
   expect(paths.length).toEqual(originalNumFiles + expectedNumBuilt);
 
   // site
@@ -79,6 +80,7 @@ test('Site Generate builds the correct amount of assets', async () => {
   expect(fs.existsSync(path.resolve('inner/_site/markbind/css/markbind.css'))).toEqual(true);
   expect(fs.existsSync(path.resolve('inner/_site/markbind/css/page-nav.css'))).toEqual(true);
   expect(fs.existsSync(path.resolve('inner/_site/markbind/css/site-nav.css'))).toEqual(true);
+  expect(fs.existsSync(path.resolve('inner/_site/markbind/css/bootstrap-markbind.css'))).toEqual(true);
 
   // js
   expect(fs.existsSync(path.resolve('inner/_site/markbind/js/setup.js'))).toEqual(true);