v6: More docs updates (#42450)

* Add "new" badge to Stepper

It's new.

* Remove commented out

* Rearrange docs sidebar again to remove components groups, tweak a few things

* New default components page

* Fix swatch, update some content

* Revamp how we're doing themes in docs to be more instant

---------

Co-authored-by: nextgenthemes <nextgenthemes@users.noreply.github.com>

Author: mdo

site/data/sidebar.yml

@@ -7,12 +7,10 @@
   icon_color: indigo
   pages:
     - title: Install
-    # - title: Introduction
     - title: Approach
     - title: CSS variables
     - title: JavaScript
     - title: Accessibility
-    # - title: Community
 
 - title: Guides
   section: Guides
@@ -111,64 +109,54 @@
   icon: menu-button-wide-fill
   icon_color: cyan
   pages:
-    - group: Buttons
-      pages:
-        - title: Buttons
-        - title: Button group
-        - title: Close button
-    - group: Feedback
-      pages:
-        - title: Alert
-        - title: Badge
-        - title: Placeholder
-        - title: Progress
-        - title: Spinner
-    - group: Overlays
-      pages:
-        - title: Menu
-          meta:
-            - added: 6.0.0
-        - title: Dialog
-          meta:
-            - added: 6.0.0
-        - title: Drawer
-          meta:
-            - added: 6.0.0
-        - title: Popover
-        - title: Toasts
-        - title: Tooltip
-    - group: Navigation
-      pages:
-        - title: Breadcrumb
-        - title: Nav
-        - title: Tab
-        - title: Nav overflow
-          meta:
-            - added: 6.0.0
-        - title: Navbar
-          meta:
-            - added: 6.0.0
-        - title: Pagination
-        - title: Stepper
-    - group: Layout
-      pages:
-        - title: Card
-        - title: List group
-    - group: Interactions
-      pages:
-        - title: Accordion
-        - title: Carousel
-        - title: Collapse
-        - title: Scrollspy
-        - title: Toggler
-          meta:
-            - added: 6.0.0
+    - title: Accordion
+      meta:
+        - added: 6.0.0
+    - title: Alert
+    - title: Avatar
+      meta:
+        - added: 6.0.0
+    - title: Badge
+    - title: Breadcrumb
+    - title: Button
+    - title: Button group
+    - title: Card
+    - title: Carousel
+    - title: Close button
+    - title: Collapse
+    - title: Dialog
+      meta:
+        - added: 6.0.0
+    - title: Drawer
+      meta:
+        - added: 6.0.0
+    - title: List group
+    - title: Menu
+      meta:
+        - added: 6.0.0
+    - title: Nav
+    - title: Nav overflow
+      meta:
+        - added: 6.0.0
+    - title: Navbar
+      meta:
+        - added: 6.0.0
 
-    - group: Miscellaneous
-      pages:
-        - title: Avatar
-          meta:
-            - added: 6.0.0
+    - title: Pagination
+    - title: Placeholder
+    - title: Popover
+    - title: Progress
+    - title: Scrollspy
+    - title: Spinner
+    - title: Stepper
+      meta:
+        - added: 6.0.0
+    - title: Tab
+    - title: Toasts
+    - title: Toggler
+      meta:
+        - added: 6.0.0
+    - title: Tooltip
 
 - title: Helpers
   section: Helpers

site/src/assets/application.js

@@ -10,11 +10,13 @@
 import sidebarScroll from './partials/sidebar.js'
 import snippets from './partials/snippets.js'
 import stickyNav from './partials/sticky.js'
+import theme from './partials/theme.js'
 import tocDrawer from './partials/toc.js'
 
 export default () => {
   sidebarScroll()
   snippets()
   stickyNav()
+  theme()
   tocDrawer()
 }

site/src/assets/partials/theme.js

@@ -0,0 +1,28 @@
+// NOTICE: Internal docs helpers — not shipped in Bootstrap; not for reuse.
+
+/*
+ * 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 { Menu } from '@bootstrap'
+
+export default () => {
+  const themeSwitcher = document.getElementById('bd-theme')
+
+  if (!themeSwitcher) {
+    return
+  }
+
+  document.addEventListener('click', event => {
+    const toggle = event.target.closest('[data-bs-theme-value]')
+
+    if (!toggle) {
+      return
+    }
+
+    Menu.getOrCreateInstance(themeSwitcher).hide()
+  }, true)
+}

site/src/components/DocsSidebar.astro

@@ -19,7 +19,7 @@ const sidebar = getData('sidebar')
             <strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
               {group.icon && (
                 <svg
-                  class="bi me-2"
+                  class="bi me-1"
                   style={
                     group.icon_color &&
                     `color: light-dark(var(--bs-${group.icon_color}-500), var(--bs-${group.icon_color}-400));`

site/src/components/shortcodes/Swatch.astro

@@ -23,18 +23,18 @@ const sizeStyles = {
     verticalAlign: 'text-bottom',
     width: '1rem',
     height: '1rem',
-    borderRadius: 'var(--bs-border-radius-sm)'
+    borderRadius: 'var(--bs-radius-3)'
   },
   medium: {
     width: '100%',
     paddingBlock: '1.5rem',
-    borderRadius: 'var(--bs-border-radius)'
+    borderRadius: 'var(--bs-radius-5)'
   },
   large: {
     width: '100%',
     paddingBlock: '.5rem',
     paddingInline: '1rem',
-    borderRadius: 'var(--bs-border-radius-lg)'
+    borderRadius: 'var(--bs-radius-7)'
   }
 }
 

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

@@ -2,6 +2,10 @@
 title: Accordion
 description: Build vertically collapsing accordions with native HTML `<details>` and `<summary>` elements.
 toc: true
+aliases:
+ - "/docs/[[config:docs_version]]/components/"
+ - "/docs/components/"
+ - "/components/"
 css_layer: components
 ---
 

…/src/content/docs/components/buttons.mdx …e/src/content/docs/components/button.mdxsite/src/content/docs/components/buttons.mdx renamed to site/src/content/docs/components/button.mdx site/src/content/docs/components/buttons.mdx renamed to site/src/content/docs/components/button.mdx

@@ -1,10 +1,8 @@
 ---
-title: Buttons
+title: Button
 description: Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
 aliases:
- - "/docs/[[config:docs_version]]/components/"
- - "/docs/components/"
- - "/components/"
+ - "/docs/[[config:docs_version]]/components/buttons/"
 toc: true
 css_layer: components
 ---

site/src/content/docs/customize/color-modes.mdx

@@ -1,6 +1,6 @@
 ---
 title: Color modes
-description: Bootstrap now supports color modes, or themes, as of v5.3.0. Explore our default light color mode and the new dark mode, or create your own using our styles as your template.
+description: Bootstrap supports light and dark color modes. Dark mode is available globally by default, but can also be applied to specific components and elements via `data-bs-theme` attribute.
 toc: true
 ---
 

site/src/content/docs/customize/theme.mdx

@@ -1,6 +1,6 @@
 ---
 title: Theme
-description: The Bootstrap theme is a set of semantically named colors that are used to style our components, utilities, and more. The theme is configurable, responds to color modes, and can be consumed via Sass or CSS.
+description: The Bootstrap theme is a set of semantically named tokens that are used to style our components, utilities, and more. The theme is configurable, responds to color modes, and can be consumed via Sass or CSS.
 toc: true
 ---
 

site/src/content/docs/guides/quickstart.mdx

@@ -1,6 +1,7 @@
 ---
 title: CDN Quickstart
 description: The official guide for how to include Bootstrap’s CSS and JavaScript in your project using a CDN.
+toc: true
 aliases:
  - "/docs/[[config:docs_version]]/guides/"
  - "/docs/guides/"
@@ -9,9 +10,11 @@ aliases:
 
 Get started using Bootstrap in seconds by including our production-ready CSS and JavaScript by [using a CDN]([[docsref:/getting-started/install#cdn]]) without the need for any build steps. CDNs provide copies of Bootstrap’s codebase that’s ready to be used in any environment with minimal code changes required on your part.
 
-<Callout type="info">
-**Got the gist already?** See the end result in this [Bootstrap CodePen demo](https://codepen.io/team/bootstrap/pen/qBamdLj).
-</Callout>
+## Live demo
+
+**Already familiar with setting up HTML pages?** See the end result in this [Bootstrap CodePen demo](https://codepen.io/team/bootstrap/pen/qBamdLj).
+
+## Steps
 
 1. **Create a new `index.html` file in your project root.** Include the `<meta name="viewport">` tag as well for [proper responsive behavior](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta/name/viewport) in mobile devices.
 
@@ -62,3 +65,43 @@ Get started using Bootstrap in seconds by including our production-ready CSS and
    ```
 
 3. **Hello, world!** Open the page in your browser of choice to see your Bootstrapped page. Now you can start building with Bootstrap by creating your own [layout]([[docsref:/layout/grid]]), adding dozens of [components]([[docsref:/components/buttons]]), and utilizing [our official examples]([[docsref:/examples]]).
+
+## Optional font
+
+Bootstrap's source code defaults to a [native font stack]([[docsref:/content/reboot#native-font-stack]]), but we use a custom font for our hosted documentation to for more consistent styling across platforms. We use [Geist](https://fonts.google.com/specimen/Geist) and Geist Mono, and recommend using the same or similar in your project.
+
+1. **Add the Geist web font from Google Fonts.** Add the following to your `<head>`, before Bootstrap’s CSS:
+
+   ```html
+   <!doctype html>
+   <html lang="en">
+     <head>
+       <meta charset="utf-8">
+       <meta name="viewport" content="width=device-width, initial-scale=1">
+       <title>Bootstrap demo</title>
+       <link rel="preconnect" href="https://fonts.googleapis.com"><!--[!code highlight]-->
+       <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><!--[!code highlight]-->
+       <link href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&family=Geist:wght@100..900&display=swap" rel="stylesheet"><!--[!code highlight]-->
+       <link href="[[config:cdn.css]]" rel="stylesheet" integrity="[[config:cdn.css_hash]]" crossorigin="anonymous">
+     </head>
+     <body>
+       <h1>Hello, world!</h1>
+       <script type="module" src="[[config:cdn.js_bundle]]" integrity="[[config:cdn.js_bundle_hash]]" crossorigin="anonymous"></script>
+     </body>
+   </html>
+   ```
+
+2. **Apply the fonts by overriding Bootstrap’s CSS variables.** You can do this in a `<style>` tag in your `<head>` or in a custom CSS file.
+
+   ```html
+   <style>
+     :root {
+       --bs-body-font-family: "Geist", system-ui, sans-serif;
+       --bs-font-mono: "Geist Mono", ui-monospace, monospace;
+     }
+   </style>
+   ```
+
+   You can also do the same in your custom Sass file should you graduate from a CDN setup to one that includes Bootstrap via a package manager.
+
+Learn more about Bootstrap’s typography defaults in [Typography]([[docsref:/content/typography]]) and [Reboot]([[docsref:/content/reboot#native-font-stack]]).