bastienmoulia
diff --git a/‎CHANGELOG.md‎
Lines changed: 18 additions & 0 deletions b/‎CHANGELOG.md‎
Lines changed: 18 additions & 0 deletions
diff --git a/‎README.md‎
Lines changed: 14 additions & 0 deletions b/‎README.md‎
Lines changed: 14 additions & 0 deletions
diff --git a/‎docs/index.html‎
Lines changed: 19 additions & 2 deletions b/‎docs/index.html‎
Lines changed: 19 additions & 2 deletions
@@ -1,5 +1,23 @@
+<!-- https://keepachangelog.com/en/1.1.0/ -->
+
 # Changelog
 
+## [2.0.0] - 2024-04-08
+
+### Added
+
+- Add custom breakpoints for container queries:
+```scss
+$container-queries-breakpoints: (
+  sm: 30em,
+  md: 48em,
+  lg: 62em,
+  xl: 75em,
+  xxl: 90em
+) !default;
+```
+- Add buttons to change the size of the container in the demo page.
+
 ## [1.4.0] - 2024-03-25
 
 ### Added
 
@@ -45,3 +45,17 @@ You can make the element float at `start`, `end` or `none` with `.bcq-float-{val
 ### Margin and padding
 
 You can add the bootstrap margin or padding with `.bcq-m{sides}-{breakpoint}-{value}` or `.bcq-p{sides}-{breakpoint}-{value}`.
+
+## Custom breakpoints
+
+You can add custom breakpoints for container queries:
+
+```scss
+$container-queries-breakpoints: (
+  sm: 30em,
+  md: 48em,
+  lg: 62em,
+  xl: 75em,
+  xxl: 90em
+);
+```
@@ -13,15 +13,25 @@
     <link href="./style.css" rel="stylesheet" />
     <style>
       .resizable {
-        width: 500px;
+        width: 30em;
         resize: horizontal;
         margin: 0 auto;
         overflow: hidden;
       }
     </style>
   </head>
   <body>
-    <h1>Bootstrap Container Queries</h1>
+    <h1 class="display-1 text-center">Bootstrap Container Queries</h1>
+    <div class="text-center">
+      <div class="btn-group mb-3" role="group">
+        <button type="button" class="btn btn-outline-primary" data-size="28">xs</button>
+        <button type="button" class="btn btn-outline-primary" data-size="30">sm</button>
+        <button type="button" class="btn btn-outline-primary" data-size="48">md</button>
+        <button type="button" class="btn btn-outline-primary" data-size="62">lg</button>
+        <button type="button" class="btn btn-outline-primary" data-size="75">xl</button>
+        <button type="button" class="btn btn-outline-primary" data-size="90">xxl</button>
+      </div>
+    </div>
     <div class="resizable border border-primary">
       <div class="bcq row">
         <div class="bcq-sm-6 bcq-md-4 bcq-lg-3">bcq-sm-6 bcq-md-4 bcq-lg-3</div>
@@ -62,4 +72,11 @@ <h1>Bootstrap Container Queries</h1>
       </div>
     </div>
   </body>
+  <script>
+    document.querySelectorAll("button").forEach((button) => {
+      button.addEventListener("click", () => {
+        document.querySelector(".resizable").style.width = `${button.dataset.size}em`;
+      });
+    });
+  </script>
 </html>