+++ /dev/null
----
-/*
- * Outputs badge to identify the first version something was added
- */
-
-interface Props {
- version: string
-}
-
-const { version } = Astro.props
----
-
-<small
- class="d-inline-flex mb-3 px-2 py-1 fw-semibold text-success-emphasis bg-success-subtle border border-success-subtle rounded-2"
- >Added in v{version}</small
->
--- /dev/null
+---
+interface Props {
+ component: string
+ className?: string
+}
+
+const { component, className } = Astro.props
+---
+
+<p>
+ {component} use local CSS variables on <code>.{className}</code> for real-time customization.
+ Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+</p>
### Variables
-<AddedIn version="5.2.0" />
-
-As part of Bootstrap’s evolving CSS variables approach, accordions now use local CSS variables on `.accordion` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+<CSSVariables component="Accordions" className="accordion" />
<ScssDocs name="accordion-css-vars" file="scss/_accordion.scss" />
### Variables
-<AddedIn version="5.2.0" />
-
-As part of Bootstrap’s evolving CSS variables approach, alerts now use local CSS variables on `.alert` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+<CSSVariables component="Alerts" className="alert" />
<ScssDocs name="alert-css-vars" file="scss/_alert.scss" />
## Background colors
-<AddedIn version="5.2.0" />
-
Set a `background-color` with contrasting foreground `color` with [our `.text-bg-{color}` helpers]([[docsref:helpers/color-background]]). Previously it was required to manually pair your choice of [`.text-{color}`]([[docsref:/utilities/colors]]) and [`.bg-{color}`]([[docsref:/utilities/background]]) utilities for styling, which you still may use if you prefer.
<Example code={getData('theme-colors').map((themeColor) => `<span class="badge text-bg-${themeColor.name}">${themeColor.title}</span>`)} />
### Variables
-<AddedIn version="5.2.0" />
-
-As part of Bootstrap’s evolving CSS variables approach, badges now use local CSS variables on `.badge` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+<CSSVariables component="Badges" className="badge" />
<ScssDocs name="badge-css-vars" file="scss/_badge.scss" />
### Variables
-<AddedIn version="5.2.0" />
-
-As part of Bootstrap’s evolving CSS variables approach, breadcrumbs now use local CSS variables on `.breadcrumb` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+<CSSVariables component="Breadcrumbs" className="breadcrumb" />
<ScssDocs name="breadcrumb-css-vars" file="scss/_breadcrumb.scss" />
### Variables
-<AddedIn version="5.2.0" />
-
-As part of Bootstrap’s evolving CSS variables approach, buttons now use local CSS variables on `.btn` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+<CSSVariables component="Buttons" className="btn" />
<ScssDocs name="btn-css-vars" file="scss/_buttons.scss" />
### Background and color
-<AddedIn version="5.2.0" />
-
Set a `background-color` with contrasting foreground `color` with [our `.text-bg-{color}` helpers]([[docsref:helpers/color-background]]). Previously it was required to manually pair your choice of [`.text-{color}`]([[docsref:/utilities/colors]]) and [`.bg-{color}`]([[docsref:/utilities/background]]) utilities for styling, which you still may use if you prefer.
<Example code={getData('theme-colors').map((themeColor) => `<div class="card text-bg-${themeColor.name} mb-3" style="max-width: 18rem;">
### Variables
-<AddedIn version="5.2.0" />
-
-As part of Bootstrap’s evolving CSS variables approach, cards now use local CSS variables on `.card` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+<CSSVariables component="Cards" className="card" />
<ScssDocs name="card-css-vars" file="scss/_card.scss" />
### Variables
-<AddedIn version="5.3.0" />
-
-As part of Bootstrap’s evolving CSS variables approach, close button now uses local CSS variables on `.btn-close` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+<CSSVariables component="Close button" className="btn-close" />
<ScssDocs name="close-css-vars" file="scss/_close.scss" />
### Variables
-<AddedIn version="5.2.0" />
-
-As part of Bootstrap’s evolving CSS variables approach, dropdowns now use local CSS variables on `.dropdown-menu` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+<CSSVariables component="Dropdowns" className="dropdown-menu" />
<ScssDocs name="dropdown-css-vars" file="scss/_dropdown.scss" />
### Variables
-<AddedIn version="5.2.0" />
-
-As part of Bootstrap’s evolving CSS variables approach, list groups now use local CSS variables on `.list-group` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+<CSSVariables component="List groups" className="list-group" />
<ScssDocs name="list-group-css-vars" file="scss/_list-group.scss" />
### Variables
-<AddedIn version="5.2.0" />
-
-As part of Bootstrap’s evolving CSS variables approach, modals now use local CSS variables on `.modal` and `.modal-backdrop` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+<CSSVariables component="Modals" className="modal" />
<ScssDocs name="modal-css-vars" file="scss/_modal.scss" />
### Variables
-<AddedIn version="5.2.0" />
-
-As part of Bootstrap’s evolving CSS variables approach, navbars now use local CSS variables on `.navbar` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+<CSSVariables component="Navbars" className="navbar" />
<ScssDocs name="navbar-css-vars" file="scss/_navbar.scss" />
### Variables
-<AddedIn version="5.2.0" />
-
-As part of Bootstrap’s evolving CSS variables approach, navs now use local CSS variables on `.nav`, `.nav-tabs`, and `.nav-pills` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+<CSSVariables component="Navs" className="nav" />
On the `.nav` base class:
<ScssDocs name="nav-pills-css-vars" file="scss/_nav.scss" />
-<AddedIn version="5.3.0" />
-
On the `.nav-underline` modifier class:
<ScssDocs name="nav-underline-css-vars" file="scss/_nav.scss" />
## Responsive
-<AddedIn version="5.2.0" />
-
Responsive offcanvas classes hide content outside the viewport from a specified breakpoint and down. Above that breakpoint, the contents within will behave as usual. For example, `.offcanvas-lg` hides content in an offcanvas below the `lg` breakpoint, but shows the content above the `lg` breakpoint. Responsive offcanvas classes are available for each breakpoint.
- `.offcanvas`
### Variables
-<AddedIn version="5.2.0" />
-
-As part of Bootstrap’s evolving CSS variables approach, offcanvas now uses local CSS variables on `.offcanvas` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+<CSSVariables component="Offcanvas" className="offcanvas" />
<ScssDocs name="offcanvas-css-vars" file="scss/_offcanvas.scss" />
### Variables
-<AddedIn version="5.2.0" />
-
-As part of Bootstrap’s evolving CSS variables approach, pagination now uses local CSS variables on `.pagination` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+<CSSVariables component="Pagination" className="pagination" />
<ScssDocs name="pagination-css-vars" file="scss/_pagination.scss" />
title: Placeholders
description: Use loading placeholders (skeleton loaders) for your components or pages to indicate something may still be loading.
toc: true
-added:
- version: "5.1"
---
import { getData } from '@libs/data'
### Custom popovers
-<AddedIn version="5.2.0" />
-
You can customize the appearance of popovers using [CSS variables](#variables). We set a custom class with `data-bs-custom-class="custom-popover"` to scope our custom appearance and use it to override some of the local CSS variables.
<ScssDocs name="custom-popovers" file="site/src/scss/_component-examples.scss" />
### Variables
-<AddedIn version="5.2.0" />
-
-As part of Bootstrap’s evolving CSS variables approach, popovers now use local CSS variables on `.popover` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+<CSSVariables component="Popovers" className="popover" />
<ScssDocs name="popover-css-vars" file="scss/_popover.scss" />
### Variables
-<AddedIn version="5.2.0" />
-
-As part of Bootstrap’s evolving CSS variables approach, progress bars now use local CSS variables on `.progress` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+<CSSVariables component="Progress" className="progress" />
<ScssDocs name="progress-css-vars" file="scss/_progress.scss" />
### Variables
-<AddedIn version="5.2.0" />
-
-As part of Bootstrap’s evolving CSS variables approach, spinners now use local CSS variables on `.spinner-border` and `.spinner-grow` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+<CSSVariables component="Spinners" className="spinner-{border|grow}" />
Border spinner variables:
### Variables
-<AddedIn version="5.2.0" />
-
-As part of Bootstrap’s evolving CSS variables approach, toasts now use local CSS variables on `.toast` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+<CSSVariables component="Toasts" className="toast" />
<ScssDocs name="toast-css-vars" file="scss/_toasts.scss" />
### Custom tooltips
-<AddedIn version="5.2.0" />
-
You can customize the appearance of tooltips using [CSS variables](#variables). We set a custom class with `data-bs-custom-class="custom-tooltip"` to scope our custom appearance and use it to override a local CSS variable.
<ScssDocs name="custom-tooltip" file="site/src/scss/_component-examples.scss" />
### Variables
-<AddedIn version="5.2.0" />
-
-As part of Bootstrap’s evolving CSS variables approach, tooltips now use local CSS variables on `.tooltip` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+<CSSVariables component="Tooltips" className="tooltip" />
<ScssDocs name="tooltip-css-vars" file="scss/_tooltip.scss" />
## CSS variables
-<AddedIn version="5.2.0"/>
-
With v5.1.1, we standardized our required `@import`s across all our CSS bundles (including `bootstrap.css`, `bootstrap-reboot.css`, and `bootstrap-grid.css`) to include `_root.scss`. This adds `:root` level CSS variables to all bundles, regardless of how many of them are used in that bundle. Ultimately Bootstrap 5 will continue to see more [CSS variables]([[docsref:/customize/css-variables]]) added over time, in order to provide more real-time customization without the need to always recompile Sass. Our approach is to take our source Sass variables and transform them into CSS variables. That way, even if you don’t use CSS variables, you still have all the power of Sass. **This is still in-progress and will take time to fully implement.**
For example, consider these `:root` CSS variables for common `<body>` styles:
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.
toc: true
-added:
- version: "5.3"
---
import { getDocsRelativePath } from '@libs/path'
## Colors
-<AddedIn version="5.3.0" />
-
Bootstrap’s color palette has continued to expand and become more nuanced in v5.3.0. We’ve added new variables for `secondary` and `tertiary` text and background colors, plus `{color}-bg-subtle`, `{color}-border-subtle`, and `{color}-text-emphasis` for our theme colors. These new colors are available through Sass and CSS variables (but not our color maps or utility classes) with the express goal of making it easier to customize across multiple colors modes like light and dark. These new variables are globally set on `:root` and are adapted for our new dark color mode while our original theme colors remain unchanged.
Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` and `rgba()` color modes. For example, `rgba(var(--bs-secondary-bg-rgb), .5)`.
## Generating utilities
-<AddedIn version="5.1.0"/>
-
Bootstrap doesn’t include `color` and `background-color` utilities for every color variable, but you can generate these yourself with our [utility API]([[docsref:/utilities/api]]) and our extended Sass maps added in v5.1.0.
1. To start, make sure you’ve imported our functions, variables, mixins, and utilities.
## Focus variables
-<AddedIn version="5.3.0"/>
-
Bootstrap provides custom `:focus` styles using a combination of Sass and CSS variables that can be optionally added to specific components and elements. We do not yet globally override all `:focus` styles.
In our Sass, we set default values that can be customized before compiling.
### Variables
-<AddedIn version="5.3.0"/>
-
As part of Bootstrap’s evolving CSS variables approach, forms now use local CSS variables for validation for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
<ScssDocs name="root-form-validation-variables" file="scss/_root.scss" />
description: Help develop Bootstrap with our documentation build scripts and tests.
toc: true
aliases: "/docs/[[config:docs_version]]/getting-started/build-tools/"
-added:
- show_badge: false
- version: "5.1"
---
## Tooling setup
description: The official guide for how to include and bundle Bootstrap’s CSS and JavaScript in your project using Vite.
toc: true
thumbnail: guides/bootstrap-vite@2x.png
-added:
- show_badge: false
- version: "5.2"
---
<img class="d-block mx-auto mb-4 img-fluid rounded-3" srcset="/docs/[[config:docs_version]]/assets/img/guides/bootstrap-vite.png, /docs/[[config:docs_version]]/assets/img/guides/bootstrap-vite@2x.png 2x" src="/docs/[[config:docs_version]]/assets/img/guides/bootstrap-vite.png" width="800" height="400" alt="" />
title: Color and background
description: Set a background color with contrasting foreground color.
toc: true
-added:
- version: "5.2"
---
import { getData } from '@libs/data'
## Link utilities
-<AddedIn version="5.3.0"/>
-
Colored links can also be modified by our [link utilities]([[docsref:/utilities/link/]]).
<Example code={[
title: Focus ring
description: Utility classes that allows you to add and modify custom focus ring styles to elements and components.
toc: true
-added:
- version: "5.3"
---
import { getData } from '@libs/data'
title: Icon link
description: Quickly create stylized hyperlinks with Bootstrap Icons or other icons.
toc: true
-added:
- version: "5.3"
---
The icon link helper component modifies our default link styles to enhance their appearance and quickly align any pairing of icon and text. Alignment is set via inline flexbox styling and a default `gap` value. We stylize the underline with a custom offset and color. Icons are automatically sized to `1em` to best match their associated text’s `font-size`.
title: Stacks
description: Shorthand helpers that build on top of our flexbox utilities to make component layout faster and easier than ever.
toc: true
-added:
- version: "5.1"
---
Stacks offer a shortcut for applying a number of flexbox properties to quickly and easily create layouts in Bootstrap. All credit for the concept and implementation goes to the open source [Pylon project](https://almonk.github.io/pylon/).
title: Vertical rule
description: Use the custom vertical rule helper to create vertical dividers like the `<hr>` element.
toc: true
-added:
- version: "5.1"
---
## How it works
title: CSS Grid
description: Learn how to enable, use, and customize our alternate layout system built on CSS Grid with examples and code snippets.
toc: true
-added:
- version: "5.1"
---
Bootstrap’s default grid system represents the culmination of over a decade of CSS layout techniques, tried and tested by millions of people. But, it was also created without many of the modern CSS features and techniques we’re seeing in browsers like the new CSS Grid.
## Opacity
-<AddedIn version="5.1.0" />
-
As of v5.1.0, `background-color` utilities are generated with Sass using CSS variables. This allows for real-time color changes without compilation and dynamic alpha transparency changes.
### How it works
## Opacity
-<AddedIn version="5.2.0" />
-
Bootstrap `border-{color}` utilities are generated with Sass using CSS variables. This allows for real-time color changes without compilation and dynamic alpha transparency changes.
### How it works
### Variables
-<AddedIn version="5.2.0" />
-
<ScssDocs name="root-border-var" file="scss/_root.scss" />
### Sass variables
## Opacity
-<AddedIn version="5.1.0" />
-
As of v5.1.0, text color utilities are generated with Sass using CSS variables. This allows for real-time color changes without compilation and dynamic alpha transparency changes.
### How it works
title: Link
description: Link utilities are used to stylize your anchors to adjust their color, opacity, underline offset, underline color, and more.
toc: true
-added:
- version: "5.3"
---
import { getData } from '@libs/data'
title: Object fit
description: Use the object fit utilities to modify how the content of a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element" target="_blank" rel="noopener noreferrer">replaced element</a>, such as an `<img>` or `<video>`, should be resized to fit its container.
toc: true
-added:
- version: "5.3"
---
## How it works
---
title: Opacity
description: Control the opacity of elements.
-added:
- version: "5.1"
---
The `opacity` property sets the opacity level for an element. The opacity level describes the transparency level, where `1` is not transparent at all, `.5` is 50% visible, and `0` is completely transparent.
title: Z-index
description: Use our low-level `z-index` utilities to quickly change the stack level of an element or component.
toc: true
-added:
- version: "5.3"
---
## Example
export declare global {
export const AddedIn: typeof import('@shortcodes/AddedIn.astro').default
export const BsTable: typeof import('@shortcodes/BsTable.astro').default
+ export const CSSVariables: typeof import('@shortcodes/CSSVariables.astro').default
export const Callout: typeof import('@shortcodes/Callout.astro').default
export const CalloutDeprecatedDarkVariants: typeof import('@shortcodes/CalloutDeprecatedDarkVariants.astro').default
export const Code: typeof import('@shortcodes/Code.astro').default
projects / thirdparty / bootstrap.git / commitdiff
