update for Bootstrap5

demos/bootstrap/index.html

@@ -7,7 +7,7 @@
     <title>Responsive Bootstrap Toolkit</title>
     <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
     <!-- Include Bootstrap's stylesheet -->
-    <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
     <!-- Include stylesheet of this example -->
     <link rel="stylesheet" type="text/css" href="style.css" rel="stylesheet"/>
 </head>
@@ -21,8 +21,8 @@ <h5 class="text-uppercase">Responsive Bootstrap Toolkit</h5>
         </div>
 
         <div class="container-fluid">
-            <div class="row">
-                <div class="col-xs-12 col-sm-8 col-md-6 col-lg-6 col-sm-push-2 col-md-push-3 col-lg-push-3">
+            <div class="d-flex justify-content-evenly">
+                <div class="col-12 col-sm-8 col-md-6 col-lg-6">
                     <br/>
                     <br/>
                     <p>Boxes below get highlighted whenever current viewport matches their expression. Alias of current breakpoint is visible in the top right corner.</p>
@@ -45,7 +45,7 @@ <h5 class="text-uppercase">Responsive Bootstrap Toolkit</h5>
 
     </div>
 
-    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     <script src="../../dist/bootstrap-toolkit.min.js"></script>
     <script src="main.js"></script>
 

dist/bootstrap-toolkit.js

@@ -2,7 +2,7 @@
  * Responsive Bootstrap Toolkit
  * Author:    Maciej Gurban
  * License:   MIT
- * Version:   2.6.3 (2016-06-21)
+ * Version:   2.7.0 (2022-04-29)
  * Origin:    https://github.com/maciej-gurban/responsive-bootstrap-toolkit
  */
 var ResponsiveBootstrapToolkit = (function($){
@@ -16,10 +16,12 @@ var ResponsiveBootstrapToolkit = (function($){
         detectionDivs: {
             // Bootstrap 3
             bootstrap: {
-                'xs': $('<div class="device-xs visible-xs visible-xs-block"></div>'),
-                'sm': $('<div class="device-sm visible-sm visible-sm-block"></div>'),
-                'md': $('<div class="device-md visible-md visible-md-block"></div>'),
-                'lg': $('<div class="device-lg visible-lg visible-lg-block"></div>')
+                xs: $('<div class="d-block d-sm-none"></div>'),
+                sm: $('<div class="d-none d-sm-block d-md-none"></div>'),
+                md: $('<div class="d-none d-md-block d-lg-none"></div>'),
+                lg: $('<div class="d-none d-lg-block d-xl-none"></div>'),
+                xl: $('<div class="d-none d-xl-block d-xxl-none"></div>'),
+                xxl: $('<div class="d-none d-xxl-block"></div>')
             },
             // Foundation 5
             foundation: {

package.json

@@ -1,9 +1,10 @@
 {
   "name": "responsive-toolkit",
-  "version": "2.6.3",
+  "version": "2.7.0",
   "description": "Responsive Bootstrap Toolkit provides an easy way of breakpoint detection in JavaScript, detecting changes in currently active breakpoint, as well as executing any breakpoint-specific JavaScript code. Despite the name, you can use it also with Foundation, or any other framework.",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "gulp-build": "gulp build"
   },
   "main": "src/bootstrap-toolkit.js",
   "repository": {
@@ -17,12 +18,12 @@
   },
   "homepage": "https://github.com/maciej-gurban/responsive-bootstrap-toolkit",
   "devDependencies": {
-    "gulp": "3.9.1",
-    "gulp-eslint": "2.0.0",
-    "gulp-notify": "2.2.0",
-    "gulp-plumber": "1.1.0",
+    "gulp": "^4.0.2",
+    "gulp-eslint": "^6.0.0",
+    "gulp-notify": "^4.0.0",
+    "gulp-plumber": "^1.2.1",
     "gulp-rename": "1.2.2",
-    "gulp-uglify": "1.5.3",
+    "gulp-uglify": "^3.0.2",
     "gulp-util": "3.0.7"
   }
 }

src/bootstrap-toolkit.js

@@ -2,7 +2,7 @@
  * Responsive Bootstrap Toolkit
  * Author:    Maciej Gurban
  * License:   MIT
- * Version:   2.6.3 (2016-06-21)
+ * Version:   2.7.0 (2022-04-29)
  * Origin:    https://github.com/maciej-gurban/responsive-bootstrap-toolkit
  */
 var ResponsiveBootstrapToolkit = (function($){
@@ -16,10 +16,12 @@ var ResponsiveBootstrapToolkit = (function($){
         detectionDivs: {
             // Bootstrap 3
             bootstrap: {
-                'xs': $('<div class="device-xs visible-xs visible-xs-block"></div>'),
-                'sm': $('<div class="device-sm visible-sm visible-sm-block"></div>'),
-                'md': $('<div class="device-md visible-md visible-md-block"></div>'),
-                'lg': $('<div class="device-lg visible-lg visible-lg-block"></div>')
+                xs: $('<div class="d-block d-sm-none"></div>'),
+                sm: $('<div class="d-none d-sm-block d-md-none"></div>'),
+                md: $('<div class="d-none d-md-block d-lg-none"></div>'),
+                lg: $('<div class="d-none d-lg-block d-xl-none"></div>'),
+                xl: $('<div class="d-none d-xl-block d-xxl-none"></div>'),
+                xxl: $('<div class="d-none d-xxl-block"></div>')
             },
             // Foundation 5
             foundation: {