'
].join('')
// Wrap programmatically code blocks and add copy btn.
document.querySelectorAll('.highlight')
.forEach(element => {
- if (!element.closest('.bd-example-snippet')) { // Ignore examples made be shortcode
+ // Ignore examples made by shortcode
+ if (!element.closest('.bd-example-snippet')) {
element.insertAdjacentHTML('beforebegin', btnHtml)
element.previousElementSibling.append(element)
}
diff --git a/vendor/twbs/bootstrap/site/assets/scss/_component-examples.scss b/vendor/twbs/bootstrap/site/assets/scss/_component-examples.scss
index 0f1018b06..1d8caed66 100644
--- a/vendor/twbs/bootstrap/site/assets/scss/_component-examples.scss
+++ b/vendor/twbs/bootstrap/site/assets/scss/_component-examples.scss
@@ -220,15 +220,16 @@
// scss-docs-start custom-tooltip
.custom-tooltip {
- --bs-tooltip-bg: var(--bs-primary);
+ --bs-tooltip-bg: var(--bd-violet-bg);
+ --bs-tooltip-color: var(--bs-white);
}
// scss-docs-end custom-tooltip
// scss-docs-start custom-popovers
.custom-popover {
--bs-popover-max-width: 200px;
- --bs-popover-border-color: var(--bs-primary);
- --bs-popover-header-bg: var(--bs-primary);
+ --bs-popover-border-color: var(--bd-violet-bg);
+ --bs-popover-header-bg: var(--bd-violet-bg);
--bs-popover-header-color: var(--bs-white);
--bs-popover-body-padding-x: 1rem;
--bs-popover-body-padding-y: .5rem;
diff --git a/vendor/twbs/bootstrap/site/assets/scss/_navbar.scss b/vendor/twbs/bootstrap/site/assets/scss/_navbar.scss
index 110797b98..2b598bf67 100644
--- a/vendor/twbs/bootstrap/site/assets/scss/_navbar.scss
+++ b/vendor/twbs/bootstrap/site/assets/scss/_navbar.scss
@@ -73,7 +73,7 @@
border-left: 0;
@include media-breakpoint-down(lg) {
- box-shadow: $box-shadow-lg;
+ box-shadow: var(--bs-box-shadow-lg);
}
}
diff --git a/vendor/twbs/bootstrap/site/assets/scss/_scrolling.scss b/vendor/twbs/bootstrap/site/assets/scss/_scrolling.scss
index 201796003..0aaf7444e 100644
--- a/vendor/twbs/bootstrap/site/assets/scss/_scrolling.scss
+++ b/vendor/twbs/bootstrap/site/assets/scss/_scrolling.scss
@@ -3,6 +3,9 @@
main {
a,
button,
+ input,
+ select,
+ textarea,
h2,
h3,
h4,
diff --git a/vendor/twbs/bootstrap/site/assets/scss/_sidebar.scss b/vendor/twbs/bootstrap/site/assets/scss/_sidebar.scss
index 6f1ef292f..598da3d5b 100644
--- a/vendor/twbs/bootstrap/site/assets/scss/_sidebar.scss
+++ b/vendor/twbs/bootstrap/site/assets/scss/_sidebar.scss
@@ -15,7 +15,7 @@
@include media-breakpoint-down(lg) {
.offcanvas-lg {
border-right-color: var(--bs-border-color);
- box-shadow: $box-shadow-lg;
+ box-shadow: var(--bs-box-shadow-lg);
}
}
}
diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/components/alerts.md b/vendor/twbs/bootstrap/site/content/docs/5.3/components/alerts.md
index d634ce2d1..9eb64dfe3 100644
--- a/vendor/twbs/bootstrap/site/content/docs/5.3/components/alerts.md
+++ b/vendor/twbs/bootstrap/site/content/docs/5.3/components/alerts.md
@@ -84,7 +84,7 @@ Similarly, you can use [flexbox utilities]({{< docsref "/utilities/flex" >}}) an
Need more than one icon for your alerts? Consider using more Bootstrap Icons and making a local SVG sprite like so to easily reference the same icons repeatedly.
{{< example >}}
-
-
+
```
@@ -83,7 +83,7 @@ We apply additional styling to `.btn`s via `::before` to ensure the `height` is
-
+
{{< /example >}}
{{< callout info >}}
diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/components/popovers.md b/vendor/twbs/bootstrap/site/content/docs/5.3/components/popovers.md
index 0a2138db9..685d2c3c6 100644
--- a/vendor/twbs/bootstrap/site/content/docs/5.3/components/popovers.md
+++ b/vendor/twbs/bootstrap/site/content/docs/5.3/components/popovers.md
@@ -198,7 +198,7 @@ Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` opt
| `sanitize` | boolean | `true` | Enable or disable the sanitization. If activated `'template'`, `'content'` and `'title'` options will be sanitized. |
| `sanitizeFn` | null, function | `null` | Here you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization. |
| `selector` | string, false | `false` | If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to also apply popovers to dynamically added DOM elements (`jQuery.on` support). See [this issue]({{< param repo >}}/issues/4215) and [an informative example](https://codepen.io/Johann-S/pen/djJYPb). **Note**: `title` attribute must not be used as a selector. |
-| `template` | string | `'
'` | Base HTML to use when creating the popover. The popover's `title` will be injected into the `.popover-inner`. `.popover-arrow` will become the popover's arrow. The outermost wrapper element should have the `.popover` class and `role="popover"`. |
+| `template` | string | `'
'` | Base HTML to use when creating the popover. The popover's `title` will be injected into the `.popover-inner`. `.popover-arrow` will become the popover's arrow. The outermost wrapper element should have the `.popover` class and `role="tooltip"`. |
| `title` | string, element, function | `''` | The popover title. If a function is given, it will be called with its `this` reference set to the element that the popover is attached to. |
| `trigger` | string | `'hover focus'` | How popover is triggered: click, hover, focus, manual. You may pass multiple triggers; separate them with a space. `'manual'` indicates that the popover will be triggered programmatically via the `.popover('show')`, `.popover('hide')` and `.popover('toggle')` methods; this value cannot be combined with any other trigger. `'hover'` on its own will result in popovers that cannot be triggered via the keyboard, and should only be used if alternative methods for conveying the same information for keyboard users is present. |
{{< /bs-table >}}
diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/components/spinners.md b/vendor/twbs/bootstrap/site/content/docs/5.3/components/spinners.md
index f2635c63e..977257dd0 100644
--- a/vendor/twbs/bootstrap/site/content/docs/5.3/components/spinners.md
+++ b/vendor/twbs/bootstrap/site/content/docs/5.3/components/spinners.md
@@ -96,8 +96,8 @@ Use [flexbox utilities][flex], [float utilities][float], or [text alignment][tex
{{< example >}}
- Loading...
-
+ Loading...
+
{{< /example >}}
@@ -151,23 +151,23 @@ Use spinners within buttons to indicate an action is currently processing or tak
{{< example >}}
{{< /example >}}
{{< example >}}
{{< /example >}}
diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/components/tooltips.md b/vendor/twbs/bootstrap/site/content/docs/5.3/components/tooltips.md
index cf628e344..91adacc7f 100644
--- a/vendor/twbs/bootstrap/site/content/docs/5.3/components/tooltips.md
+++ b/vendor/twbs/bootstrap/site/content/docs/5.3/components/tooltips.md
@@ -157,7 +157,7 @@ const tooltip = new bootstrap.Tooltip('#example', {
The required markup for a tooltip is only a `data` attribute and `title` on the HTML element you wish to have a tooltip. The generated markup of a tooltip is rather simple, though it does require a position (by default, set to `top` by the plugin).
{{< callout warning >}}
-**Keep tooltips accessible to keyboard and assistive technology users** by only adding them to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). While other HTML elements can be made focusable by adding `tabindex="0"`, this can create annoying and confusing tab stops on non-interactive elements for keyboard users, and most assistive technologies currently do not announce tooltips in this situation. Additionally, do not rely solely on `hover` as the trigger for your tooltips as this will make theme impossible to trigger for keyboard users.
+**Keep tooltips accessible to keyboard and assistive technology users** by only adding them to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). While other HTML elements can be made focusable by adding `tabindex="0"`, this can create annoying and confusing tab stops on non-interactive elements for keyboard users, and most assistive technologies currently do not announce tooltips in this situation. Additionally, do not rely solely on `hover` as the trigger for your tooltips as this will make them impossible to trigger for keyboard users.
{{< /callout >}}
```html
@@ -165,7 +165,7 @@ The required markup for a tooltip is only a `data` attribute and `title` on the
Hover over me
-
+
Some tooltip text!
@@ -177,13 +177,11 @@ The required markup for a tooltip is only a `data` attribute and `title` on the
Elements with the `disabled` attribute aren't interactive, meaning users cannot focus, hover, or click them to trigger a tooltip (or popover). As a workaround, you'll want to trigger the tooltip from a wrapper `
` or ``, ideally made keyboard-focusable using `tabindex="0"`.
-
-{{< example >}}
+{{< example class="tooltip-demo" stackblitz_add_js="true" >}}
{{< /example >}}
-
### Options
diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/customize/sass.md b/vendor/twbs/bootstrap/site/content/docs/5.3/customize/sass.md
index 6da6bbe2b..ceadf3a98 100644
--- a/vendor/twbs/bootstrap/site/content/docs/5.3/customize/sass.md
+++ b/vendor/twbs/bootstrap/site/content/docs/5.3/customize/sass.md
@@ -14,23 +14,25 @@ Whenever possible, avoid modifying Bootstrap's core files. For Sass, that means
```text
your-project/
-├── scss
+├── scss/
│ └── custom.scss
└── node_modules/
- └── bootstrap
- ├── js
- └── scss
+│ └── bootstrap/
+│ ├── js/
+│ └── scss/
+└── index.html
```
If you've downloaded our source files and aren't using a package manager, you'll want to manually create something similar to that structure, keeping Bootstrap's source files separate from your own.
```text
your-project/
-├── scss
+├── scss/
│ └── custom.scss
-└── bootstrap/
- ├── js
- └── scss
+├── bootstrap/
+│ ├── js/
+│ └── scss/
+└── index.html
```
## Importing
@@ -85,6 +87,45 @@ In your `custom.scss`, you'll import Bootstrap's source Sass files. You have two
With that setup in place, you can begin to modify any of the Sass variables and maps in your `custom.scss`. You can also start to add parts of Bootstrap under the `// Optional` section as needed. We suggest using the full import stack from our `bootstrap.scss` file as your starting point.
+## Compiling
+
+In order to use your custom Sass code as CSS in the browser, you need a Sass compiler. Sass ships as a CLI package, but you can also compile it with other build tools like [Gulp](https://gulpjs.com/) or [Webpack](https://webpack.js.org/), or with a GUI applications. Some IDEs also have Sass compilers built in or as downloadable extensions.
+
+We like to use the CLI to compile our Sass, but you can use whichever method you prefer. From the command line, run the following:
+
+```shell
+# Install Sass globally
+npm install -g sass
+
+# Watch your custom Sass for changes and compile it to CSS
+sass --watch ./scss/custom.scss ./css/custom.css
+```
+
+Learn more about your options at [sass-lang.com/install](https://sass-lang.com/install) and [compiling with VS Code](https://code.visualstudio.com/docs/languages/css#_transpiling-sass-and-less-into-css).
+
+{{< callout info >}}
+**Using Bootstrap with another build tool?** Consider reading our guides for compiling with [Webpack]({{< docsref "/getting-started/webpack" >}}), [Parcel]({{< docsref "/getting-started/parcel" >}}), or [Vite]({{< docsref "/getting-started/vite" >}}). We also have production-ready demos in [our examples repository on GitHub](https://github.com/twbs/examples).
+{{< /callout >}}
+
+## Including
+
+Once your CSS is compiled, you can include it in your HTML files. Inside your `index.html` you'll want to include your compiled CSS file. Be sure to update the path to your compiled CSS file if you've changed it.
+
+```html
+
+
+
+
+
+ Custom Bootstrap
+
+
+
+
Hello, world!
+
+
+```
+
## Variable defaults
Every Sass variable in Bootstrap includes the `!default` flag allowing you to override the variable's default value in your own Sass without modifying Bootstrap's source code. Copy and paste variables as needed, modify their values, and remove the `!default` flag. If a variable has already been assigned, then it won't be re-assigned by the default values in Bootstrap.
diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/badges/index.html b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/badges/index.html
index a452d3666..ad9dfbce1 100644
--- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/badges/index.html
+++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/badges/index.html
@@ -6,7 +6,7 @@ extra_css:
body_class: ""
---
-
+
diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/blog-rtl/index.html b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/blog-rtl/index.html
index 274ea0eb8..97d991302 100644
--- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/blog-rtl/index.html
+++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/blog-rtl/index.html
@@ -7,7 +7,7 @@ extra_css:
- "../blog/blog.rtl.css"
---
-
+
@@ -172,7 +172,7 @@ extra_css: