├── .gitattributes
├── .gitignore
├── LICENSE
├── README.md
├── favicon.ico
├── index.html
├── package-lock.json
├── package.json
└── src
    └── bootstrap-detect-breakpoint.js


/.gitattributes:
--------------------------------------------------------------------------------
1 | src/bootstrap-detect-breakpoint.js linguist-vendored=false
2 | index.html linguist-documentation


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules
2 | /.idea


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 Stefan Haack (shaack.com)
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # bootstrap-detect-breakpoint
 2 | 
 3 | Detect the current Bootstrap breakpoint in JavaScript.
 4 | 
 5 | ## References
 6 | 
 7 | - [Demo page](https://shaack.com/projekte/bootstrap-detect-breakpoint/)
 8 | - [GitHub repository](https://github.com/shaack/bootstrap-detect-breakpoint)
 9 | - [npm package](https://www.npmjs.com/package/bootstrap-detect-breakpoint)
10 | 
11 | ## Usage
12 | 
13 | Include the `bootstrap-detect-breakpoint.js`.
14 | 
15 | ```html
16 | <script src="/src/bootstrap-detect-breakpoint.js"></script>
17 | ```
18 | 
19 | Get the current breakpoint with
20 | 
21 | ```js
22 | var currentBreakpoint = bootstrapDetectBreakpoint() 
23 | ```
24 | which will return an object with the current breakpoint name and index,
25 | like this
26 | 
27 | ```json
28 | {
29 |     "name": "lg",
30 |     "index": 3
31 | }
32 | ```
33 | 
34 | The index goes from 0 to 5, where 0 is "xs" and 5 is for "xxl".
35 | 
36 | ## Works in Bootstrap 4 and 5
37 | 
38 | In Bootstrap 5 prior 5.3 there is an [issue that the css variables for breakpoints are missing](https://github.com/twbs/bootstrap/issues/36094), which was fixed (by me) with version 5.3.
39 | 
40 | Up to version 5.3, you can use the bootstrap-detect-breakpoint script with Bootstrap 5 by simply adding the following to your scss
41 | ```scss
42 | :root {
43 |   @each $name, $value in $grid-breakpoints {
44 |     --bs-breakpoint-#{$name}: #{$value};
45 |   }
46 | }
47 | ```
48 | 
49 | ---
50 | 
51 | Find more high quality modules from [shaack.com](https://shaack.com)
52 | on [our projects page](https://shaack.com/works).
53 | 
54 | 


--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shaack/bootstrap-detect-breakpoint/03f5f05bf8746d35d29dbeacd74ad345a4d882e0/favicon.ico


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>bootstrap-detect-breakpoint</title>
 6 |     <meta name="description" content="Get the current Bootstrap breakpoint in JavaScript" />
 7 |     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
 8 |     <style>
 9 |         pre {
10 |             background-color: #eee;
11 |             padding: 0 1.5rem;
12 |         }
13 |     </style>
14 | </head>
15 | <body class="p-lg-5 p-md-4 p-sm-2 mt-2">
16 | <div class="container-fluid">
17 |     <h1 class="mb-4">bootstrap-detect-breakpoint</h1>
18 |     <div class="card mb-4">
19 |         <div class="card-body">
20 |             Current Breakpoint: <span id="breakpoint-output"></span>
21 |         </div>
22 |     </div>
23 |     <pre><code>
24 | const output = document.getElementById("breakpoint-output")
25 | 
26 | function updateView() {
27 |     const currentBreakpoint = bootstrapDetectBreakpoint()
28 |     output.innerHTML = "<code>" + JSON.stringify(currentBreakpoint) + "</code>"
29 | }
30 | 
31 | updateView()
32 | window.onresize = updateView
33 |     </code></pre>
34 |     <ul>
35 |         <li><a href="https://github.com/shaack/bootstrap-detect-breakpoint">Documentation and Repository on GitHub</a></li>
36 |     </ul>
37 | </div>
38 | <script src="src/bootstrap-detect-breakpoint.js"></script>
39 | <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
40 | <script>
41 |     const output = document.getElementById("breakpoint-output")
42 | 
43 |     function updateView() {
44 |         const currentBreakpoint = bootstrapDetectBreakpoint()
45 |         output.innerHTML = "<code>" + JSON.stringify(currentBreakpoint) + "</code>"
46 |     }
47 | 
48 |     updateView()
49 |     window.onresize = updateView
50 | </script>
51 | </body>
52 | </html>
53 | 


--------------------------------------------------------------------------------
/package-lock.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "bootstrap-detect-breakpoint",
 3 |   "version": "1.1.9",
 4 |   "lockfileVersion": 2,
 5 |   "requires": true,
 6 |   "packages": {
 7 |     "": {
 8 |       "version": "1.1.9",
 9 |       "license": "MIT"
10 |     }
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "bootstrap-detect-breakpoint",
 3 |   "version": "1.1.9",
 4 |   "description": "Detect the current Bootstrap breakpoint in JavaScript",
 5 |   "browser": "./src/bootstrap-detect-breakpoint.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/shaack/bootstrap-detect-breakpoint.git"
12 |   },
13 |   "keywords": [
14 |     "bootstrap",
15 |     "JavaScript",
16 |     "UI"
17 |   ],
18 |   "author": "shaack.com",
19 |   "license": "MIT",
20 |   "bugs": {
21 |     "url": "https://github.com/shaack/bootstrap-detect-breakpoint/issues"
22 |   },
23 |   "homepage": "https://github.com/shaack/bootstrap-detect-breakpoint#readme"
24 | }
25 | 


--------------------------------------------------------------------------------
/src/bootstrap-detect-breakpoint.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Author and copyright: Stefan Haack (https://shaack.com)
 3 |  * Repository: https://github.com/shaack/bootstrap-detect-breakpoint
 4 |  * License: MIT, see file 'LICENSE'
 5 |  */
 6 | const bootstrapDetectBreakpoint = function () {
 7 |     // cache some values on first call
 8 |     if (!this.breakpointValues) {
 9 |         this.breakpointNames = ["xxl", "xl", "lg", "md", "sm", "xs"]
10 |         this.breakpointValues = []
11 |         const isPriorBS5 = !!window.getComputedStyle(document.documentElement).getPropertyValue('--breakpoint-sm')
12 |         const prefix = isPriorBS5 ? "--breakpoint-" : "--bs-breakpoint-"
13 |         for (const breakpointName of this.breakpointNames) {
14 |             const value = window.getComputedStyle(document.documentElement).getPropertyValue(prefix + breakpointName)
15 |             if(value) {
16 |                 this.breakpointValues[breakpointName] = value
17 |             }
18 |         }
19 |     }
20 |     let i = this.breakpointNames.length
21 |     for (const breakpointName of this.breakpointNames) {
22 |         i--
23 |         if (window.matchMedia("(min-width: " + this.breakpointValues[breakpointName] + ")").matches) {
24 |             return {name: breakpointName, index: i}
25 |         }
26 |     }
27 |     return null
28 | }
29 | 


--------------------------------------------------------------------------------