diff --git a/.browserslistrc b/.browserslistrc
index c57bcd94..ade5593d 100644
--- a/.browserslistrc
+++ b/.browserslistrc
@@ -1,17 +1,27 @@
 # Please see https://github.com/browserslist/browserslist for more info
 # These settings can be changed depending on what browsers your project is supporting
 
+
+#
+# BOOTSTRAP 4
+#
+
+[bs4]
+
 # General rules
 last 2 major version and not dead
 >= 0.01%
 
 # Explicit inclusions
 # See https://getbootstrap.com/docs/4.6/getting-started/browsers-devices/
+>= 1%
+last 1 major version
+not dead
 Chrome >= 45
-Firefox >= 38
 Firefox ESR
-Explorer >= 10
+Firefox >= 38
 Edge >= 12
+Explorer >= 10
 iOS >= 9
 Safari >= 9
 Android >= 4.4
@@ -28,3 +38,19 @@ not Safari < 8         # no support for flex-shrink
 not Opera < 12.1       # no flexbox support
 not OperaMobile < 12.1 # no flexbox support
 not Android < 4.4      # no flexbox support
+
+#
+# BOOTSTRAP 5
+# See https://getbootstrap.com/docs/5.1/getting-started/browsers-devices/
+#
+
+[bs5]
+>= 0.5%
+last 2 major versions
+not dead
+Chrome >= 60
+Firefox >= 60
+Firefox ESR
+iOS >= 12
+Safari >= 12
+not Explorer <= 11
diff --git a/inc/editor-color-palette.json b/inc/editor-color-palette.json
index 34917598..5d2030fe 100644
--- a/inc/editor-color-palette.json
+++ b/inc/editor-color-palette.json
@@ -1 +1 @@
-{"--blue":"#007bff","--indigo":"#6610f2","--purple":"#5533ff","--pink":"#e83e8c","--red":"#dc3545","--orange":"#fd7e14","--yellow":"#ffc107","--green":"#28a745","--teal":"#20c997","--cyan":"#17a2b8","--white":"#fff","--gray":"#6c757d","--gray-dark":"#343a40"}
\ No newline at end of file
+{"--bs-blue":"#0d6efd","--bs-indigo":"#6610f2","--bs-purple":"#5533ff","--bs-pink":"#d63384","--bs-red":"#dc3545","--bs-orange":"#fd7e14","--bs-yellow":"#ffc107","--bs-green":"#198754","--bs-teal":"#20c997","--bs-cyan":"#0dcaf0","--bs-white":"#fff","--bs-gray":"#6c757d","--bs-gray-dark":"#343a40"}
\ No newline at end of file
diff --git a/src/build-bootstrap4/postcss.config.js b/src/build-bootstrap4/postcss.config.js
index 0f30dda7..2c84bd03 100644
--- a/src/build-bootstrap4/postcss.config.js
+++ b/src/build-bootstrap4/postcss.config.js
@@ -1,33 +1,34 @@
-'use strict'
+'use strict';
 
-module.exports = ctx => {
-  return {
-    map: {
-        inline: false,
-        annotation: true,
-        sourcesContent: true
-    },
-    plugins: {
-      autoprefixer: {
-        cascade: false
-	  },
-	  "postcss-understrap-palette-generator" : {
-		colors: [
-			"--blue",
-			"--indigo",
-			"--purple",
-			"--pink",
-			"--red",
-			"--orange",
-			"--yellow",
-			"--green",
-			"--teal",
-			"--cyan",
-			"--white",
-			"--gray",
-			"--gray-dark"
-		]
-	  }
-    }
-  }
-}
+module.exports = ( ctx ) => {
+	return {
+		map: {
+			inline: false,
+			annotation: true,
+			sourcesContent: true,
+		},
+		plugins: {
+			autoprefixer: {
+				cascade: false,
+				env: 'bs4',
+			},
+			'postcss-understrap-palette-generator': {
+				colors: [
+					'--blue',
+					'--indigo',
+					'--purple',
+					'--pink',
+					'--red',
+					'--orange',
+					'--yellow',
+					'--green',
+					'--teal',
+					'--cyan',
+					'--white',
+					'--gray',
+					'--gray-dark',
+				],
+			},
+		},
+	};
+};
diff --git a/src/build-bootstrap4/rollup.config.js b/src/build-bootstrap4/rollup.config.js
index b40d55aa..adb528b7 100644
--- a/src/build-bootstrap4/rollup.config.js
+++ b/src/build-bootstrap4/rollup.config.js
@@ -1,38 +1,40 @@
-'use strict'
+'use strict';
 
-const path = require('path')
-const { babel } = require('@rollup/plugin-babel')
-const { nodeResolve } = require('@rollup/plugin-node-resolve')
-import multi from '@rollup/plugin-multi-entry'
-const banner = require('./banner.js')
+const path = require( 'path' );
+const { babel } = require( '@rollup/plugin-babel' );
+const { nodeResolve } = require( '@rollup/plugin-node-resolve' );
+const multi = require( '@rollup/plugin-multi-entry' );
+const banner = require( './banner.js' );
 
-let fileDest = 'theme-bootstrap4.js'
-const external = ['jquery']
+const fileDest = 'theme-bootstrap4.js';
+const external = [ 'jquery' ];
 const plugins = [
-  babel({
-    // Only transpile our source code
-    exclude: 'node_modules/**',
-    // Include the helpers in the bundle, at most one copy of each
-    babelHelpers: 'bundled'
-  }),
-  nodeResolve(),
-  multi()
-]
+	babel( {
+		browserslistEnv: 'bs4',
+		// Include the helpers in the bundle, at most one copy of each
+		babelHelpers: 'bundled',
+	} ),
+	nodeResolve(),
+	multi(),
+];
 const globals = {
-  jquery: 'jQuery', // Ensure we use jQuery which is always available even in noConflict mode
-  'popper.js': 'Popper'
-}
-
+	jquery: 'jQuery', // Ensure we use jQuery which is always available even in noConflict mode
+	'popper.js': 'Popper',
+};
 
 module.exports = {
-  input: [path.resolve(__dirname, '../js/bootstrap4.js'), path.resolve(__dirname, '../js/skip-link-focus-fix.js'), path.resolve(__dirname, '../js/custom-javascript.js')],
-  output: {
-    banner,
-    file: path.resolve(__dirname, `../../js/${fileDest}`),
-    format: 'umd',
-    globals,
-    name: 'understrap'
-  },
-  external,
-  plugins
-}
+	input: [
+		path.resolve( __dirname, '../js/bootstrap4.js' ),
+		path.resolve( __dirname, '../js/skip-link-focus-fix.js' ),
+		path.resolve( __dirname, '../js/custom-javascript.js' ),
+	],
+	output: {
+		banner,
+		file: path.resolve( __dirname, `../../js/${ fileDest }` ),
+		format: 'umd',
+		globals,
+		name: 'understrap',
+	},
+	external,
+	plugins,
+};
diff --git a/src/build/postcss.config.js b/src/build/postcss.config.js
index 47faa774..ba86455e 100644
--- a/src/build/postcss.config.js
+++ b/src/build/postcss.config.js
@@ -1,33 +1,34 @@
-'use strict'
+'use strict';
 
-module.exports = ctx => {
-  return {
-    map: {
-        inline: false,
-        annotation: true,
-        sourcesContent: true
-    },
-    plugins: {
-      autoprefixer: {
-        cascade: false
-      },
-	  "postcss-understrap-palette-generator" : {
-		colors: [
-			"--bs-blue",
-			"--bs-indigo",
-			"--bs-purple",
-			"--bs-pink",
-			"--bs-red",
-			"--bs-orange",
-			"--bs-yellow",
-			"--bs-green",
-			"--bs-teal",
-			"--bs-cyan",
-			"--bs-white",
-			"--bs-gray",
-			"--bs-gray-dark"
-		]
-	  }
-    }
-  }
-}
+module.exports = ( ctx ) => {
+	return {
+		map: {
+			inline: false,
+			annotation: true,
+			sourcesContent: true,
+		},
+		plugins: {
+			autoprefixer: {
+				cascade: false,
+				env: 'bs5',
+			},
+			'postcss-understrap-palette-generator': {
+				colors: [
+					'--bs-blue',
+					'--bs-indigo',
+					'--bs-purple',
+					'--bs-pink',
+					'--bs-red',
+					'--bs-orange',
+					'--bs-yellow',
+					'--bs-green',
+					'--bs-teal',
+					'--bs-cyan',
+					'--bs-white',
+					'--bs-gray',
+					'--bs-gray-dark',
+				],
+			},
+		},
+	};
+};
diff --git a/src/build/rollup.config.js b/src/build/rollup.config.js
index 2abf6fd4..6fc93d70 100644
--- a/src/build/rollup.config.js
+++ b/src/build/rollup.config.js
@@ -1,44 +1,47 @@
-'use strict'
+'use strict';
 
-const path = require('path')
-const { babel } = require('@rollup/plugin-babel')
-const { nodeResolve } = require('@rollup/plugin-node-resolve')
-import commonjs from '@rollup/plugin-commonjs'
-import multi from '@rollup/plugin-multi-entry'
-const replace = require('@rollup/plugin-replace')
-const banner = require('./banner.js')
+const path = require( 'path' );
+const { babel } = require( '@rollup/plugin-babel' );
+const { nodeResolve } = require( '@rollup/plugin-node-resolve' );
+const commonjs = require( '@rollup/plugin-commonjs' );
+const multi = require( '@rollup/plugin-multi-entry' );
+const replace = require( '@rollup/plugin-replace' );
+const banner = require( './banner.js' );
 
-let fileDest = 'theme.js'
-const external = ['jquery']
+const fileDest = 'theme.js';
+const external = [ 'jquery' ];
 const plugins = [
-  babel({
-    // Only transpile our source code
-    exclude: 'node_modules/**',
-    // Include the helpers in the bundle, at most one copy of each
-    babelHelpers: 'bundled'
-  }),
-  replace({
-      'process.env.NODE_ENV': '"production"',
-      preventAssignment: true
-  }),
-  nodeResolve(),
-  commonjs(),
-  multi()
-]
+	babel( {
+		browserslistEnv: 'bs5',
+		// Include the helpers in the bundle, at most one copy of each
+		babelHelpers: 'bundled',
+	} ),
+	replace( {
+		'process.env.NODE_ENV': '"production"',
+		preventAssignment: true,
+	} ),
+	nodeResolve(),
+	commonjs(),
+	multi(),
+];
 const globals = {
-  jquery: 'jQuery', // Ensure we use jQuery which is always available even in noConflict mode
-}
-
+	jquery: 'jQuery', // Ensure we use jQuery which is always available even in noConflict mode
+	'@popperjs/core': 'Popper',
+};
 
 module.exports = {
-  input: [path.resolve(__dirname, '../js/bootstrap.js'), path.resolve(__dirname, '../js/skip-link-focus-fix.js'), path.resolve(__dirname, '../js/custom-javascript.js')],
-  output: {
-    banner,
-    file: path.resolve(__dirname, `../../js/${fileDest}`),
-    format: 'umd',
-    globals,
-    name: 'understrap'
-  },
-  external,
-  plugins
-}
+	input: [
+		path.resolve( __dirname, '../js/bootstrap.js' ),
+		path.resolve( __dirname, '../js/skip-link-focus-fix.js' ),
+		path.resolve( __dirname, '../js/custom-javascript.js' ),
+	],
+	output: {
+		banner,
+		file: path.resolve( __dirname, `../../js/${ fileDest }` ),
+		format: 'umd',
+		globals,
+		name: 'understrap',
+	},
+	external,
+	plugins,
+};