icon_color: indigo
pages:
- title: Install
- # - title: Introduction
- title: Approach
- title: CSS variables
- title: JavaScript
- title: Accessibility
- # - title: Community
- title: Guides
section: Guides
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
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()
}
--- /dev/null
+// 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)
+}
<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));`
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)'
}
}
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
---
---
-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
---
---
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
---
---
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
---
---
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/"
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.
```
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]]).
light: { ...(bootstrapLight as any), name: '' },
dark: { ...(bootstrapDark as any), name: '' }
},
+ defaultColor: 'light-dark()',
transformers
})
// stylelint-disable selector-max-id, declaration-no-important
-//
-// Carbon ads
-//
-
@layer custom {
#carbon-responsive .carbon-responsive-wrap {
padding: 1rem !important;
background-color: var(--bs-bg-1) !important;
border: 0 !important;
- @include border-radius(var(--radius-7) !important);
+ @include border-radius(var(--radius-8) !important);
}
- // #carbon-responsive a,
- // .carbon-description {
- // color: var(--bs-fg-1) !important;
- // }
.carbon-img {
position: relative;
overflow: hidden;
@layer custom {
:root {
- --bd-navbar-offset: 6rem;
+ --bd-navbar-offset: 5.75rem;
}
body {
}
.nav-link {
- margin-inline-start: 1rem;
+ margin-inline-start: .75rem;
}
@include media-breakpoint-between(xs, lg) {
}
.bd-links-subgroup {
- margin-inline-start: 1.75rem;
+ margin-inline-start: 1.5rem;
color: var(--bs-fg-body);
}
background-color: color-mix(in oklch, var(--primary-bg) 10%, transparent);
}
-// Dark mode theming for Shiki
-// When using dual themes, Shiki generates inline styles with CSS variables
-// We need to switch from the light theme vars to dark theme vars
[data-bs-theme="dark"] {
--shell-prompt-color: #868e96;
-
- .astro-code span,
- .astro-code-themes span {
- // Override Shiki's inline color with the dark theme color
- color: var(--shiki-dark) !important; // stylelint-disable-line declaration-no-important
- }
}
// Shell prompts - these work with Shiki's transformer that adds .line class
return 'auto'
}
- const setTheme = theme => {
+ const resolveTheme = theme => {
if (theme === 'auto') {
- document.documentElement.setAttribute('data-bs-theme', (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'))
- } else {
- document.documentElement.setAttribute('data-bs-theme', theme)
+ return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+ }
+
+ return theme
+ }
+
+ const setTheme = theme => {
+ const resolved = resolveTheme(theme)
+
+ if (document.documentElement.getAttribute('data-bs-theme') !== resolved) {
+ document.documentElement.setAttribute('data-bs-theme', resolved)
}
}
toggle.addEventListener('click', () => {
const theme = toggle.getAttribute('data-bs-theme-value')
setStoredTheme(theme)
- setTheme(theme)
- showActiveTheme(theme, true)
+
+ requestAnimationFrame(() => {
+ setTheme(theme)
+ showActiveTheme(theme)
+ })
})
})
})
projects / thirdparty / bootstrap.git / commitdiff
