fixes

Author: mdo

js/src/nav-overflow.js

@@ -187,7 +187,7 @@ class NavOverflow extends BaseComponent {
     if (typeof value === 'string' && value !== '') {
       const cssValue = getComputedStyle(document.documentElement)
         .getPropertyValue(`--bs-breakpoint-${value}`)
-      return parseFloat(cssValue) || 0
+      return Number.parseFloat(cssValue) || 0
     }
 
     return 0

package.json

@@ -109,6 +109,7 @@
     "watch-css-test": "nodemon --watch scss/ --ext scss,js --exec \"npm run css-test\"",
     "watch-js-main": "nodemon --watch js/src/ --ext js --exec \"npm-run-all js-lint js-compile\"",
     "watch-js-docs": "nodemon --watch site/src/assets/ --ext js --exec \"npm run js-lint\"",
+    "astro-clean": "rm -rf site/.astro site/node_modules/.astro",
     "astro-dev": "astro dev --root site --port 9001",
     "astro-build": "astro build --root site && rm -rf _site && cp -r site/dist _site",
     "astro-preview": "astro preview --root site --port 9001",

scss/_utilities.scss

@@ -439,6 +439,7 @@ $utilities: map.merge(
       property: grid-template-columns,
       class: grid-cols,
       values: (
+        "1": 1fr,
         "2": repeat(2, 1fr),
         "3": repeat(3, 1fr),
         "4": repeat(4, 1fr),

site/astro.config.ts

@@ -58,6 +58,9 @@ export default defineConfig({
       ]
     }
   },
+  devToolbar: {
+    enabled: false
+  },
   site,
   vite: {
     plugins: [algoliaPlugin(), stackblitzPlugin()]

site/src/assets/application.js

@@ -12,7 +12,9 @@
 import sidebarScroll from './partials/sidebar.js'
 import snippets from './partials/snippets.js'
 import stickyNav from './partials/sticky.js'
+import tocDrawer from './partials/toc.js'
 
 sidebarScroll()
 snippets()
 stickyNav()
+tocDrawer()

site/src/assets/partials/toc.js

@@ -0,0 +1,26 @@
+// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
+// IT'S ALL JUST JUNK FOR OUR DOCS!
+// ++++++++++++++++++++++++++++++++++++++++++
+
+/*
+ * JavaScript for Bootstrap's docs (https://getbootstrap.com/)
+ * Copyright 2011-2026 The Bootstrap Authors
+ * Licensed under the Creative Commons Attribution 3.0 Unported License.
+ * For details, see https://creativecommons.org/licenses/by/3.0/.
+ */
+
+import { Drawer } from '../../../../dist/js/bootstrap.bundle.js'
+
+export default () => {
+  const tocSidebar = document.querySelector('#bdTocSidebar')
+
+  if (!tocSidebar) {
+    return
+  }
+
+  tocSidebar.addEventListener('click', event => {
+    if (event.target.closest('.nav-link')) {
+      Drawer.getInstance('#bdTocSidebar')?.hide()
+    }
+  })
+}

site/src/components/header/Navigation.astro

@@ -21,7 +21,7 @@ interface Props {
 
 const { addedIn, layout, title } = Astro.props
 
-const activeSection = title === 'Examples' ? 'Examples' : 'Docs'
+const activeSection = !layout ? 'Home' : title === 'Examples' ? 'Examples' : 'Docs'
 ---
 
 <header class="navbar lg:navbar-expand bd-navbar border-bottom">
@@ -45,6 +45,10 @@ const activeSection = title === 'Examples' ? 'Examples' : 'Docs'
           <svg class="bi bi-sm" aria-hidden="true"><use href="#chevron-expand"></use></svg>
         </button>
         <div class="menu">
+          <a class:list={['menu-item', { active: !layout }]} href="/">
+            Home
+            {!layout && <svg class="bi ms-auto" aria-hidden="true"><use href="#check2"></use></svg>}
+          </a>
           <a
             class:list={['menu-item', { active: layout === 'docs' }]}
             href={getVersionedDocsPath('getting-started/install/')}
@@ -61,24 +65,24 @@ const activeSection = title === 'Examples' ? 'Examples' : 'Docs'
           </a>
           <a class="menu-item" href={getConfig().icons} target="_blank" rel="noopener">
             Icons
-            <svg class="bi ms-auto" aria-hidden="true"><use href="#box-arrow-up-right"></use></svg>
+            <svg class="bi bi-sm ms-auto" aria-hidden="true"><use href="#box-arrow-up-right"></use></svg>
           </a>
           <a class="menu-item" href={getConfig().blog} target="_blank" rel="noopener">
             Blog
-            <svg class="bi ms-auto" aria-hidden="true"><use href="#box-arrow-up-right"></use></svg>
+            <svg class="bi bi-sm ms-auto" aria-hidden="true"><use href="#box-arrow-up-right"></use></svg>
           </a>
           <hr class="menu-divider" />
           <a class="menu-item" href={getConfig().github_org} target="_blank" rel="noopener">
             GitHub
-            <svg class="bi ms-auto" aria-hidden="true"><use href="#box-arrow-up-right"></use></svg>
+            <svg class="bi bi-sm ms-auto" aria-hidden="true"><use href="#box-arrow-up-right"></use></svg>
           </a>
           <a class="menu-item" href={getConfig().opencollective} target="_blank" rel="noopener">
             OpenCollective
-            <svg class="bi ms-auto" aria-hidden="true"><use href="#box-arrow-up-right"></use></svg>
+            <svg class="bi bi-sm ms-auto" aria-hidden="true"><use href="#box-arrow-up-right"></use></svg>
           </a>
           <a class="menu-item" href={`https://x.com/${getConfig().x}`} target="_blank" rel="noopener">
             Twitter/X
-            <svg class="bi ms-auto" aria-hidden="true"><use href="#box-arrow-up-right"></use></svg>
+            <svg class="bi bi-sm ms-auto" aria-hidden="true"><use href="#box-arrow-up-right"></use></svg>
           </a>
         </div>
       </div>

site/src/components/shortcodes/ButtonPlayground.astro

@@ -128,7 +128,7 @@ const rounded = ['default', 'pill', 'square']
 </div>
 
 <Example
-  class="d-flex align-items-start gap-2"
+  class="d-flex flex-wrap align-items-start gap-2"
   code={`<button type="button" class="btn-solid theme-primary btn-sm" data-button-type="text">Button</button>
 <button type="button" class="btn-solid theme-primary" data-button-type="left-icon">
   <svg class="bi me-1" width="16" height="16" aria-hidden="true">

site/src/content/docs/components/button-group.mdx

@@ -54,15 +54,15 @@ Checkbox toggle buttons can be grouped together. Any or all of the buttons can b
 <Example code={`<div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
     <label class="btn-check btn-outline theme-primary">
       <input type="checkbox" autocomplete="off">
-      Checkbox 1
+      Check 1
     </label>
     <label class="btn-check btn-outline theme-primary">
       <input type="checkbox" autocomplete="off">
-      Checkbox 2
+      Check 2
     </label>
     <label class="btn-check btn-outline theme-primary">
       <input type="checkbox" autocomplete="off">
-      Checkbox 3
+      Check 3
     </label>
   </div>`} />
 

site/src/content/docs/components/buttons.mdx

@@ -25,7 +25,7 @@ Bootstrap includes several button variants, each serving its own semantic purpos
 
 Compare all button variants and styles at once:
 
-<Example class="bd-example-buttons justify-items-start" code={[...getData('theme-colors').map((themeColor) => `<button type="button" class="btn-solid theme-${themeColor.name}">${themeColor.title}</button>
+<Example class="bd-example-buttons md:justify-items-start" code={[...getData('theme-colors').map((themeColor) => `<button type="button" class="btn-solid theme-${themeColor.name}">${themeColor.title}</button>
 <button type="button" class="btn-outline theme-${themeColor.name}">${themeColor.title}</button>
 <button type="button" class="btn-subtle theme-${themeColor.name}">${themeColor.title}</button>
 <button type="button" class="btn-text theme-${themeColor.name}">${themeColor.title}</button>`)]} />
@@ -46,7 +46,7 @@ Link buttons can also be styled with the theme colors.
 
 Add visual depth to solid buttons with gradients and shadows using the `.btn-styled` modifier class. This provides a more three-dimensional appearance that can be customized further with CSS variables.
 
-<Example code={[...getData('theme-colors').map((themeColor) => `<button class="btn-solid btn-styled theme-${themeColor.name}">${themeColor.title}</button>`)]} />
+<Example class="d-flex flex-wrap gap-2" code={[...getData('theme-colors').map((themeColor) => `<button class="btn-solid btn-styled theme-${themeColor.name}">${themeColor.title}</button>`)]} />
 
 The gradient and shadow can be customized via CSS variables:
 
@@ -69,7 +69,7 @@ The `.btn` classes are designed to be used with the `<button>` element. However,
 
 When using button classes on `<a>` elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given a `role="button"` to appropriately convey their purpose to assistive technologies such as screen readers.
 
-<Example code={`<a class="btn-solid theme-primary" href="#" role="button">Link</a>
+<Example class="d-flex flex-wrap gap-2" code={`<a class="btn-solid theme-primary" href="#" role="button">Link</a>
 <button class="btn-solid theme-primary" type="submit">Button</button>
 <input class="btn-solid theme-primary" type="button" value="Input">
 <input class="btn-solid theme-primary" type="submit" value="Submit">
@@ -131,7 +131,7 @@ Combine with size classes for different icon button sizes:
 
 Make buttons look inactive by adding the `disabled` boolean attribute to any `<button>` element. Disabled buttons have `pointer-events: none`, preventing hover and active states from triggering, and some additional styling to indicate the disabled state.
 
-<Example code={`<button type="button" class="btn-solid theme-primary" disabled>Primary button</button>
+<Example class="d-flex flex-wrap gap-2" code={`<button type="button" class="btn-solid theme-primary" disabled>Primary button</button>
 <button type="button" class="btn-solid theme-secondary" disabled>Button</button>
 <button type="button" class="btn-outline theme-primary" disabled>Primary button</button>
 <button type="button" class="btn-outline theme-secondary" disabled>Button</button>`} />
@@ -190,7 +190,7 @@ Visually, these toggle buttons are identical to our [JavaScript toggle buttons](
 
 Checkboxes can be checked, unchecked, or disabled. Checkbox-based toggle buttons only toggle a single button’s state.
 
-<Example code={`<label class="btn-check btn-solid theme-primary">
+<Example class="d-flex flex-wrap gap-2" code={`<label class="btn-check btn-solid theme-primary">
     <input type="checkbox" checked autocomplete="off">
     Checked
   </label>
@@ -209,7 +209,7 @@ Checkboxes can be checked, unchecked, or disabled. Checkbox-based toggle buttons
 
 Radios can be checked, unchecked, or disabled. Use radio-based toggle buttons to toggle states between a set of buttons that include input elements with the same `name` attribute value.
 
-<Example code={`<label class="btn-check btn-solid theme-primary">
+<Example class="d-flex flex-wrap gap-2" code={`<label class="btn-check btn-solid theme-primary">
     <input type="radio" name="options" autocomplete="off" checked>
     Checked
   </label>
@@ -241,11 +241,11 @@ Visually, these toggle buttons are identical to our [input toggle buttons](#togg
 
 Add `data-bs-toggle="button"` to toggle a button’s `active` state. If you’re pre-toggling a button, you must manually add the `.active` class **and** `aria-pressed="true"` to ensure that it is conveyed appropriately to assistive technologies.
 
-<Example class="d-inline-flex gap-1" code={`<button type="button" class="btn-solid theme-primary" data-bs-toggle="button">Toggle button</button>
+<Example class="d-flex flex-wrap gap-2"  code={`<button type="button" class="btn-solid theme-primary" data-bs-toggle="button">Toggle button</button>
   <button type="button" class="btn-solid theme-primary active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>
   <button type="button" class="btn-solid theme-primary" disabled data-bs-toggle="button">Disabled toggle button</button>`} />
 
-<Example class="d-inline-flex gap-1" code={`<a href="#" class="btn-solid theme-primary" role="button" data-bs-toggle="button">Toggle link</a>
+<Example class="d-flex flex-wrap gap-2" code={`<a href="#" class="btn-solid theme-primary" role="button" data-bs-toggle="button">Toggle link</a>
   <a href="#" class="btn-solid theme-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
   <a class="btn-solid theme-primary disabled" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>`} />