root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 12 Packages Projects Releases Wiki Activity

Merge branch 'main' into main-his-example-shortcode-without-preview

This commit is contained in:
Hannah Issermann 2025-03-14 09:01:26 +01:00 committed by GitHub
parent d7f3b165b3 53171ad564
commit 124eee7e3e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
93 changed files with 3054 additions and 2721 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.github/dependabot.yml vendored
View File

@ -21,3 +21,8 @@ updates:
timezone: Europe/Athens timezone: Europe/Athens
versioning-strategy: increase versioning-strategy: increase
rebase-strategy: disabled rebase-strategy: disabled
groups:
production-dependencies:
dependency-type: "production"
development-dependencies:
dependency-type: "development"

2
LICENSE
View File

@ -1,6 +1,6 @@
The MIT License (MIT) The MIT License (MIT)
Copyright (c) 2011-2024 The Bootstrap Authors Copyright (c) 2011-2025 The Bootstrap Authors
Permission is hereby granted, free of charge, to any person obtaining a copy Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal of this software and associated documentation files (the "Software"), to deal

2
README.md
View File

@ -243,4 +243,4 @@ Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com
## Copyright and license ## Copyright and license
Code and documentation copyright 2011–2024 the [Bootstrap Authors](https://github.com/twbs/bootstrap/graphs/contributors). Code released under the [MIT License](https://github.com/twbs/bootstrap/blob/main/LICENSE). Docs released under [Creative Commons](https://creativecommons.org/licenses/by/3.0/). Code and documentation copyright 2011-2025 the [Bootstrap Authors](https://github.com/twbs/bootstrap/graphs/contributors). Code released under the [MIT License](https://github.com/twbs/bootstrap/blob/main/LICENSE). Docs released under [Creative Commons](https://creativecommons.org/licenses/by/3.0/).

2
build/build-plugins.mjs
View File

@ -2,7 +2,7 @@
/*! /*!
* Script to build our plugins to use them separately. * Script to build our plugins to use them separately.
* Copyright 2020-2024 The Bootstrap Authors * Copyright 2020-2025 The Bootstrap Authors
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/ */

2
build/change-version.mjs
View File

@ -2,7 +2,7 @@
/*! /*!
* Script to update version number references in the project. * Script to update version number references in the project.
* Copyright 2017-2024 The Bootstrap Authors * Copyright 2017-2025 The Bootstrap Authors
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/ */

2
build/generate-sri.mjs
View File

@ -5,7 +5,7 @@
* Remember to use the same vendor files as the CDN ones, * Remember to use the same vendor files as the CDN ones,
* otherwise the hashes won't match! * otherwise the hashes won't match!
* *
* Copyright 2017-2024 The Bootstrap Authors * Copyright 2017-2025 The Bootstrap Authors
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/ */

2
build/vnu-jar.mjs
View File

@ -2,7 +2,7 @@
/*! /*!
* Script to run vnu-jar if Java is available. * Script to run vnu-jar if Java is available.
* Copyright 2017-2024 The Bootstrap Authors * Copyright 2017-2025 The Bootstrap Authors
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/ */

2
build/zip-examples.mjs
View File

@ -3,7 +3,7 @@
/*! /*!
* Script to create the built examples zip archive; * Script to create the built examples zip archive;
* requires the `zip` command to be present! * requires the `zip` command to be present!
* Copyright 2020-2024 The Bootstrap Authors * Copyright 2020-2025 The Bootstrap Authors
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/ */

6
js/tests/helpers/fixture.js
View File

@ -1,11 +1,11 @@
const fixtureId = 'fixture' const FIXTURE_ID = 'fixture'
export const getFixture = () => { export const getFixture = () => {
let fixtureElement = document.getElementById(fixtureId) let fixtureElement = document.getElementById(FIXTURE_ID)
if (!fixtureElement) { if (!fixtureElement) {
fixtureElement = document.createElement('div') fixtureElement = document.createElement('div')
fixtureElement.setAttribute('id', fixtureId) fixtureElement.setAttribute('id', FIXTURE_ID)
fixtureElement.style.position = 'absolute' fixtureElement.style.position = 'absolute'
fixtureElement.style.top = '-10000px' fixtureElement.style.top = '-10000px'
fixtureElement.style.left = '-10000px' fixtureElement.style.left = '-10000px'

56
js/tests/visual/floating-label.html
View File

@ -167,6 +167,34 @@
<input type="email" readonly class="form-control-plaintext" id="floatingPlaintextInput1" placeholder="name@example.com" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend."> <input type="email" readonly class="form-control-plaintext" id="floatingPlaintextInput1" placeholder="name@example.com" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.">
<label for="floatingPlaintextInput1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label> <label for="floatingPlaintextInput1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label>
</div> </div>
<!--Compare form-select rendering depending on the size-->
<div class="form-floating">
<select class="form-select" id="floatingSelectRegular" aria-label="Floating label select example">
<option selected="">Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label for="floatingSelectRegular">Works with selects</label>
</div>
<div class="form-floating">
<select class="form-select form-select-sm" id="floatingSelectSmall" aria-label="Floating label select example">
<option selected="">Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label for="floatingSelectSmall">Works with selects</label>
</div>
<div class="form-floating">
<select class="form-select form-select-lg" id="floatingSelectLarge" aria-label="Floating label select example">
<option selected="">Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label for="floatingSelectLarge">Works with selects</label>
</div>
</div> </div>
<div class="container-fluid bg-body" data-bs-theme="dark"> <div class="container-fluid bg-body" data-bs-theme="dark">
@ -329,6 +357,34 @@
<input type="email" readonly class="form-control-plaintext" id="floatingPlaintextInput3" placeholder="name@example.com" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend."> <input type="email" readonly class="form-control-plaintext" id="floatingPlaintextInput3" placeholder="name@example.com" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.">
<label for="floatingPlaintextInput3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label> <label for="floatingPlaintextInput3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label>
</div> </div>
<!--Compare form-select rendering depending on the size-->
<div class="form-floating">
<select class="form-select" id="floatingSelectRegularDark" aria-label="Floating label select example">
<option selected="">Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label for="floatingSelectRegularDark">Works with selects</label>
</div>
<div class="form-floating">
<select class="form-select form-select-sm" id="floatingSelectSmallDark" aria-label="Floating label select example">
<option selected="">Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label for="floatingSelectSmallDark">Works with selects</label>
</div>
<div class="form-floating">
<select class="form-select form-select-lg" id="floatingSelectLargeDark" aria-label="Floating label select example">
<option selected="">Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label for="floatingSelectLargeDark">Works with selects</label>
</div>
</div> </div>
</div> </div>

2
nuget/bootstrap.nuspec
View File

@ -15,7 +15,7 @@
<repository type="git" url="https://github.com/twbs/bootstrap.git" branch="main" /> <repository type="git" url="https://github.com/twbs/bootstrap.git" branch="main" />
<icon>bootstrap.png</icon> <icon>bootstrap.png</icon>
<license type="expression">MIT</license> <license type="expression">MIT</license>
<copyright>Copyright 2011-2024</copyright> <copyright>Copyright 2011-2025</copyright>
<requireLicenseAcceptance>false</requireLicenseAcceptance> <requireLicenseAcceptance>false</requireLicenseAcceptance>
<tags>css mobile-first responsive front-end framework web</tags> <tags>css mobile-first responsive front-end framework web</tags>
<contentFiles> <contentFiles>

2
nuget/bootstrap.sass.nuspec
View File

@ -15,7 +15,7 @@
<repository type="git" url="https://github.com/twbs/bootstrap.git" branch="main" /> <repository type="git" url="https://github.com/twbs/bootstrap.git" branch="main" />
<icon>bootstrap.png</icon> <icon>bootstrap.png</icon>
<license type="expression">MIT</license> <license type="expression">MIT</license>
<copyright>Copyright 2011-2024</copyright> <copyright>Copyright 2011-2025</copyright>
<requireLicenseAcceptance>false</requireLicenseAcceptance> <requireLicenseAcceptance>false</requireLicenseAcceptance>
<tags>css sass mobile-first responsive front-end framework web</tags> <tags>css sass mobile-first responsive front-end framework web</tags>
<contentFiles> <contentFiles>

4904
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

48
package.json
View File

@ -82,7 +82,7 @@
"docs-serve": "hugo server --port 9001 --disableFastRender --noHTTPCache --renderToMemory --printPathWarnings --printUnusedTemplates", "docs-serve": "hugo server --port 9001 --disableFastRender --noHTTPCache --renderToMemory --printPathWarnings --printUnusedTemplates",
"docs-serve-only": "npx sirv-cli _site --port 9001", "docs-serve-only": "npx sirv-cli _site --port 9001",
"lockfile-lint": "lockfile-lint --allowed-hosts npm --allowed-schemes https: --empty-hostname false --type npm --path package-lock.json", "lockfile-lint": "lockfile-lint --allowed-hosts npm --allowed-schemes https: --empty-hostname false --type npm --path package-lock.json",
"update-deps": "ncu -u -x eslint,karma-browserstack-launcher,karma-rollup-preprocessor", "update-deps": "ncu -u -x eslint,eslint-config-xo,karma-browserstack-launcher,karma-rollup-preprocessor,sass",
"release": "npm-run-all dist release-sri docs-build release-zip*", "release": "npm-run-all dist release-sri docs-build release-zip*",
"release-sri": "node build/generate-sri.mjs", "release-sri": "node build/generate-sri.mjs",
"release-version": "node build/change-version.mjs", "release-version": "node build/change-version.mjs",
@ -103,33 +103,33 @@
"@popperjs/core": "^2.11.8" "@popperjs/core": "^2.11.8"
}, },
"devDependencies": { "devDependencies": {
"@babel/cli": "^7.25.6", "@babel/cli": "^7.26.4",
"@babel/core": "^7.25.2", "@babel/core": "^7.26.9",
"@babel/preset-env": "^7.25.4", "@babel/preset-env": "^7.26.9",
"@docsearch/js": "^3.6.1", "@docsearch/js": "^3.9.0",
"@popperjs/core": "^2.11.8", "@popperjs/core": "^2.11.8",
"@rollup/plugin-babel": "^6.0.4", "@rollup/plugin-babel": "^6.0.4",
"@rollup/plugin-commonjs": "^26.0.1", "@rollup/plugin-commonjs": "^28.0.2",
"@rollup/plugin-node-resolve": "^15.2.3", "@rollup/plugin-node-resolve": "^16.0.0",
"@rollup/plugin-replace": "^5.0.7", "@rollup/plugin-replace": "^6.0.2",
"@stackblitz/sdk": "^1.11.0", "@stackblitz/sdk": "^1.11.0",
"autoprefixer": "^10.4.20", "autoprefixer": "^10.4.20",
"bundlewatch": "^0.4.0", "bundlewatch": "^0.4.0",
"clean-css-cli": "^5.6.3", "clean-css-cli": "^5.6.3",
"clipboard": "^2.0.11", "clipboard": "^2.0.11",
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"eslint": "^8.57.0", "eslint": "^8.57.1",
"eslint-config-xo": "^0.45.0", "eslint-config-xo": "^0.45.0",
"eslint-plugin-html": "^8.1.1", "eslint-plugin-html": "^8.1.2",
"eslint-plugin-import": "^2.30.0", "eslint-plugin-import": "^2.31.0",
"eslint-plugin-markdown": "^5.1.0", "eslint-plugin-markdown": "^5.1.0",
"eslint-plugin-unicorn": "^55.0.0", "eslint-plugin-unicorn": "^55.0.0",
"find-unused-sass-variables": "^6.0.0", "find-unused-sass-variables": "^6.0.0",
"globby": "^14.0.2", "globby": "^14.1.0",
"hammer-simulator": "0.0.1", "hammer-simulator": "0.0.1",
"hugo-bin": "^0.130.1", "hugo-bin": "^0.142.0",
"ip": "^2.0.1", "ip": "^2.0.1",
"jasmine": "^5.2.0", "jasmine": "^5.6.0",
"jquery": "^3.7.1", "jquery": "^3.7.1",
"karma": "^6.4.4", "karma": "^6.4.4",
"karma-browserstack-launcher": "1.4.0", "karma-browserstack-launcher": "1.4.0",
@ -141,20 +141,20 @@
"karma-jasmine-html-reporter": "^2.1.0", "karma-jasmine-html-reporter": "^2.1.0",
"karma-rollup-preprocessor": "7.0.7", "karma-rollup-preprocessor": "7.0.7",
"lockfile-lint": "^4.14.0", "lockfile-lint": "^4.14.0",
"nodemon": "^3.1.4", "nodemon": "^3.1.9",
"npm-run-all2": "^6.2.2", "npm-run-all2": "^7.0.2",
"postcss": "^8.4.45", "postcss": "^8.5.3",
"postcss-cli": "^11.0.0", "postcss-cli": "^11.0.0",
"rollup": "^4.21.2", "rollup": "^4.34.9",
"rollup-plugin-istanbul": "^5.0.0", "rollup-plugin-istanbul": "^5.0.0",
"rtlcss": "^4.3.0", "rtlcss": "^4.3.0",
"sass": "^1.77.8", "sass": "1.78.0",
"sass-true": "^8.0.0", "sass-true": "^8.1.0",
"shelljs": "^0.8.5", "shelljs": "^0.8.5",
"stylelint": "^16.8.1", "stylelint": "^16.15.0",
"stylelint-config-twbs-bootstrap": "^15.0.0", "stylelint-config-twbs-bootstrap": "^15.1.0",
"terser": "^5.31.6", "terser": "^5.39.0",
"vnu-jar": "23.4.11" "vnu-jar": "24.10.17"
}, },
"files": [ "files": [
"dist/{css,js}/*.{css,js,map}", "dist/{css,js}/*.{css,js,map}",

4
scss/_button-group.scss
View File

@ -39,7 +39,7 @@
// Prevent double borders when buttons are next to each other // Prevent double borders when buttons are next to each other
> :not(.btn-check:first-child) + .btn, > :not(.btn-check:first-child) + .btn,
> .btn-group:not(:first-child) { > .btn-group:not(:first-child) {
margin-left: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list margin-left: calc(-1 * #{$btn-border-width}); // stylelint-disable-line function-disallowed-list
} }
// Reset rounded corners // Reset rounded corners
@ -126,7 +126,7 @@
> .btn:not(:first-child), > .btn:not(:first-child),
> .btn-group:not(:first-child) { > .btn-group:not(:first-child) {
margin-top: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list margin-top: calc(-1 * #{$btn-border-width}); // stylelint-disable-line function-disallowed-list
} }
// Reset rounded corners // Reset rounded corners

3
scss/_card.scss
View File

@ -193,8 +193,7 @@
// The child selector allows nested `.card` within `.card-group` // The child selector allows nested `.card` within `.card-group`
// to display properly. // to display properly.
> .card { > .card {
// Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4 flex: 1 0 0;
flex: 1 0 0%;
margin-bottom: 0; margin-bottom: 0;
+ .card { + .card {

38
scss/_carousel.scss
View File

@ -99,6 +99,7 @@
color: $carousel-control-color; color: $carousel-control-color;
text-align: center; text-align: center;
background: none; background: none;
filter: var(--#{$prefix}carousel-control-icon-filter);
border: 0; border: 0;
opacity: $carousel-control-opacity; opacity: $carousel-control-opacity;
@include transition($carousel-control-transition); @include transition($carousel-control-transition);
@ -168,7 +169,7 @@
margin-left: $carousel-indicator-spacer; margin-left: $carousel-indicator-spacer;
text-indent: -999px; text-indent: -999px;
cursor: pointer; cursor: pointer;
background-color: $carousel-indicator-active-bg; background-color: var(--#{$prefix}carousel-indicator-active-bg);
background-clip: padding-box; background-clip: padding-box;
border: 0; border: 0;
// Use transparent borders to increase the hit area by 10px on top and bottom. // Use transparent borders to increase the hit area by 10px on top and bottom.
@ -195,42 +196,31 @@
left: (100% - $carousel-caption-width) * .5; left: (100% - $carousel-caption-width) * .5;
padding-top: $carousel-caption-padding-y; padding-top: $carousel-caption-padding-y;
padding-bottom: $carousel-caption-padding-y; padding-bottom: $carousel-caption-padding-y;
color: $carousel-caption-color; color: var(--#{$prefix}carousel-caption-color);
text-align: center; text-align: center;
} }
// Dark mode carousel // Dark mode carousel
@mixin carousel-dark() { @mixin carousel-dark() {
.carousel-control-prev-icon, --#{$prefix}carousel-indicator-active-bg: #{$carousel-indicator-active-bg-dark};
.carousel-control-next-icon { --#{$prefix}carousel-caption-color: #{$carousel-caption-color-dark};
filter: $carousel-dark-control-icon-filter; --#{$prefix}carousel-control-icon-filter: #{$carousel-control-icon-filter-dark};
}
.carousel-indicators [data-bs-target] {
background-color: $carousel-dark-indicator-active-bg;
}
.carousel-caption {
color: $carousel-dark-caption-color;
}
} }
.carousel-dark { .carousel-dark {
@include carousel-dark(); @include carousel-dark();
} }
:root,
[data-bs-theme="light"] {
--#{$prefix}carousel-indicator-active-bg: #{$carousel-indicator-active-bg};
--#{$prefix}carousel-caption-color: #{$carousel-caption-color};
--#{$prefix}carousel-control-icon-filter: #{$carousel-control-icon-filter};
}
@if $enable-dark-mode { @if $enable-dark-mode {
@include color-mode(dark) { @include color-mode(dark, true) {
@if $color-mode-type == "media-query" {
.carousel {
@include carousel-dark();
}
} @else {
.carousel,
&.carousel {
@include carousel-dark(); @include carousel-dark();
} }
} }
}
}

13
scss/_close.scss
View File

@ -12,7 +12,6 @@
--#{$prefix}btn-close-focus-shadow: #{$btn-close-focus-shadow}; --#{$prefix}btn-close-focus-shadow: #{$btn-close-focus-shadow};
--#{$prefix}btn-close-focus-opacity: #{$btn-close-focus-opacity}; --#{$prefix}btn-close-focus-opacity: #{$btn-close-focus-opacity};
--#{$prefix}btn-close-disabled-opacity: #{$btn-close-disabled-opacity}; --#{$prefix}btn-close-disabled-opacity: #{$btn-close-disabled-opacity};
--#{$prefix}btn-close-white-filter: #{$btn-close-white-filter};
// scss-docs-end close-css-vars // scss-docs-end close-css-vars
box-sizing: content-box; box-sizing: content-box;
@ -21,6 +20,7 @@
padding: $btn-close-padding-y $btn-close-padding-x; padding: $btn-close-padding-y $btn-close-padding-x;
color: var(--#{$prefix}btn-close-color); color: var(--#{$prefix}btn-close-color);
background: transparent var(--#{$prefix}btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements background: transparent var(--#{$prefix}btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements
filter: var(--#{$prefix}btn-close-filter);
border: 0; // for button elements border: 0; // for button elements
@include border-radius(); @include border-radius();
opacity: var(--#{$prefix}btn-close-opacity); opacity: var(--#{$prefix}btn-close-opacity);
@ -47,17 +47,20 @@
} }
@mixin btn-close-white() { @mixin btn-close-white() {
filter: var(--#{$prefix}btn-close-white-filter); --#{$prefix}btn-close-filter: #{$btn-close-filter-dark};
} }
.btn-close-white { .btn-close-white {
@include btn-close-white(); @include btn-close-white();
} }
:root,
[data-bs-theme="light"] {
--#{$prefix}btn-close-filter: #{$btn-close-filter};
}
@if $enable-dark-mode { @if $enable-dark-mode {
@include color-mode(dark) { @include color-mode(dark, true) {
.btn-close {
@include btn-close-white(); @include btn-close-white();
} }
} }
}

2
scss/_nav.scss
View File

@ -169,8 +169,8 @@
.nav-justified { .nav-justified {
> .nav-link, > .nav-link,
.nav-item { .nav-item {
flex-basis: 0;
flex-grow: 1; flex-grow: 1;
flex-basis: 0;
text-align: center; text-align: center;
} }
} }

2
scss/_navbar.scss
View File

@ -139,8 +139,8 @@
// the default flexbox row orientation. Requires the use of `flex-wrap: wrap` // the default flexbox row orientation. Requires the use of `flex-wrap: wrap`
// on the `.navbar` parent. // on the `.navbar` parent.
.navbar-collapse { .navbar-collapse {
flex-basis: 100%;
flex-grow: 1; flex-grow: 1;
flex-basis: 100%;
// For always expanded or extra full navbars, ensure content aligns itself // For always expanded or extra full navbars, ensure content aligns itself
// properly vertically. Can be easily overridden with flex utilities. // properly vertically. Can be easily overridden with flex utilities.
align-items: center; align-items: center;

2
scss/_pagination.scss
View File

@ -75,7 +75,7 @@
margin-left: $pagination-margin-start; margin-left: $pagination-margin-start;
} }
@if $pagination-margin-start == calc(#{$pagination-border-width} * -1) { @if $pagination-margin-start == calc(-1 * #{$pagination-border-width}) {
&:first-child { &:first-child {
.page-link { .page-link {
@include border-start-radius(var(--#{$prefix}pagination-border-radius)); @include border-start-radius(var(--#{$prefix}pagination-border-radius));

15
scss/_variables-dark.scss
View File

@ -85,3 +85,18 @@ $accordion-icon-active-color-dark: $primary-text-emphasis-dark !default;
$accordion-button-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>") !default; $accordion-button-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>") !default;
$accordion-button-active-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>") !default; $accordion-button-active-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>") !default;
// scss-docs-end sass-dark-mode-vars // scss-docs-end sass-dark-mode-vars
//
// Carousel
//
$carousel-indicator-active-bg-dark: $carousel-dark-indicator-active-bg !default;
$carousel-caption-color-dark: $carousel-dark-caption-color !default;
$carousel-control-icon-filter-dark: $carousel-dark-control-icon-filter !default;
//
// Close button
//
$btn-close-filter-dark: $btn-close-white-filter !default;

12
scss/_variables.scss
View File

@ -1302,7 +1302,7 @@ $pagination-color: var(--#{$prefix}link-color) !default;
$pagination-bg: var(--#{$prefix}body-bg) !default; $pagination-bg: var(--#{$prefix}body-bg) !default;
$pagination-border-radius: var(--#{$prefix}border-radius) !default; $pagination-border-radius: var(--#{$prefix}border-radius) !default;
$pagination-border-width: var(--#{$prefix}border-width) !default; $pagination-border-width: var(--#{$prefix}border-width) !default;
$pagination-margin-start: calc(#{$pagination-border-width} * -1) !default; // stylelint-disable-line function-disallowed-list $pagination-margin-start: calc(-1 * #{$pagination-border-width}) !default; // stylelint-disable-line function-disallowed-list
$pagination-border-color: var(--#{$prefix}border-color) !default; $pagination-border-color: var(--#{$prefix}border-color) !default;
$pagination-focus-color: var(--#{$prefix}link-hover-color) !default; $pagination-focus-color: var(--#{$prefix}link-hover-color) !default;
@ -1652,6 +1652,7 @@ $carousel-control-width: 15% !default;
$carousel-control-opacity: .5 !default; $carousel-control-opacity: .5 !default;
$carousel-control-hover-opacity: .9 !default; $carousel-control-hover-opacity: .9 !default;
$carousel-control-transition: opacity .15s ease !default; $carousel-control-transition: opacity .15s ease !default;
$carousel-control-icon-filter: null !default;
$carousel-indicator-width: 30px !default; $carousel-indicator-width: 30px !default;
$carousel-indicator-height: 3px !default; $carousel-indicator-height: 3px !default;
@ -1677,9 +1678,9 @@ $carousel-transition: transform $carousel-transition-duration eas
// scss-docs-end carousel-variables // scss-docs-end carousel-variables
// scss-docs-start carousel-dark-variables // scss-docs-start carousel-dark-variables
$carousel-dark-indicator-active-bg: $black !default; $carousel-dark-indicator-active-bg: $black !default; // Deprecated in v5.3.4
$carousel-dark-caption-color: $black !default; $carousel-dark-caption-color: $black !default; // Deprecated in v5.3.4
$carousel-dark-control-icon-filter: invert(1) grayscale(100) !default; $carousel-dark-control-icon-filter: invert(1) grayscale(100) !default; // Deprecated in v5.3.4
// scss-docs-end carousel-dark-variables // scss-docs-end carousel-dark-variables
@ -1712,7 +1713,8 @@ $btn-close-opacity: .5 !default;
$btn-close-hover-opacity: .75 !default; $btn-close-hover-opacity: .75 !default;
$btn-close-focus-opacity: 1 !default; $btn-close-focus-opacity: 1 !default;
$btn-close-disabled-opacity: .25 !default; $btn-close-disabled-opacity: .25 !default;
$btn-close-white-filter: invert(1) grayscale(100%) brightness(200%) !default; $btn-close-filter: null !default;
$btn-close-white-filter: invert(1) grayscale(100%) brightness(200%) !default; // Deprecated in v5.3.4
// scss-docs-end close-variables // scss-docs-end close-variables

1
scss/forms/_floating-labels.scss
View File

@ -51,6 +51,7 @@
> .form-select { > .form-select {
padding-top: $form-floating-input-padding-t; padding-top: $form-floating-input-padding-t;
padding-bottom: $form-floating-input-padding-b; padding-bottom: $form-floating-input-padding-b;
padding-left: $form-floating-padding-x;
} }
> .form-control:focus, > .form-control:focus,

2
scss/forms/_input-group.scss
View File

@ -121,7 +121,7 @@
} }
> :not(:first-child):not(.dropdown-menu)#{$validation-messages} { > :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
margin-left: calc(#{$input-border-width} * -1); // stylelint-disable-line function-disallowed-list margin-left: calc(-1 * #{$input-border-width}); // stylelint-disable-line function-disallowed-list
@include border-start-radius(0); @include border-start-radius(0);
} }

2
scss/mixins/_banner.scss
View File

@ -1,7 +1,7 @@
@mixin bsBanner($file) { @mixin bsBanner($file) {
/*! /*!
* Bootstrap #{$file} v5.3.3 (https://getbootstrap.com/) * Bootstrap #{$file} v5.3.3 (https://getbootstrap.com/)
* Copyright 2011-2024 The Bootstrap Authors * Copyright 2011-2025 The Bootstrap Authors
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/ */
} }

2
scss/mixins/_grid.scss
View File

@ -72,7 +72,7 @@
@include media-breakpoint-up($breakpoint, $breakpoints) { @include media-breakpoint-up($breakpoint, $breakpoints) {
// Provide basic `.col-{bp}` classes for equal-width flexbox columns // Provide basic `.col-{bp}` classes for equal-width flexbox columns
.col#{$infix} { .col#{$infix} {
flex: 1 0 0%; // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4 flex: 1 0 0;
} }
.row-cols#{$infix}-auto > * { .row-cols#{$infix}-auto > * {

2
site/assets/js/application.js
View File

@ -4,7 +4,7 @@
/*! /*!
* JavaScript for Bootstrap's docs (https://getbootstrap.com/) * JavaScript for Bootstrap's docs (https://getbootstrap.com/)
* Copyright 2011-2024 The Bootstrap Authors * Copyright 2011-2025 The Bootstrap Authors
* Licensed under the Creative Commons Attribution 3.0 Unported License. * Licensed under the Creative Commons Attribution 3.0 Unported License.
* For details, see https://creativecommons.org/licenses/by/3.0/. * For details, see https://creativecommons.org/licenses/by/3.0/.
*/ */

7
site/assets/js/partials/code-examples.js
View File

@ -4,7 +4,7 @@
/* /*
* JavaScript for Bootstrap's docs (https://getbootstrap.com/) * JavaScript for Bootstrap's docs (https://getbootstrap.com/)
* Copyright 2011-2024 The Bootstrap Authors * Copyright 2011-2025 The Bootstrap Authors
* Licensed under the Creative Commons Attribution 3.0 Unported License. * Licensed under the Creative Commons Attribution 3.0 Unported License.
* For details, see https://creativecommons.org/licenses/by/3.0/. * For details, see https://creativecommons.org/licenses/by/3.0/.
*/ */
@ -63,6 +63,11 @@ export default () => {
const namespace = 'http://www.w3.org/1999/xlink' const namespace = 'http://www.w3.org/1999/xlink'
const originalXhref = iconFirstChild.getAttributeNS(namespace, 'href') const originalXhref = iconFirstChild.getAttributeNS(namespace, 'href')
const originalTitle = event.trigger.title const originalTitle = event.trigger.title
const isCheckIconVisible = originalXhref === '#check2'
if (isCheckIconVisible) {
return
}
tooltipBtn.setContent({ '.tooltip-inner': 'Copied!' }) tooltipBtn.setContent({ '.tooltip-inner': 'Copied!' })
event.trigger.addEventListener('hidden.bs.tooltip', () => { event.trigger.addEventListener('hidden.bs.tooltip', () => {

2
site/assets/js/partials/sidebar.js
View File

@ -4,7 +4,7 @@
/* /*
* JavaScript for Bootstrap's docs (https://getbootstrap.com/) * JavaScript for Bootstrap's docs (https://getbootstrap.com/)
* Copyright 2011-2024 The Bootstrap Authors * Copyright 2011-2025 The Bootstrap Authors
* Licensed under the Creative Commons Attribution 3.0 Unported License. * Licensed under the Creative Commons Attribution 3.0 Unported License.
* For details, see https://creativecommons.org/licenses/by/3.0/. * For details, see https://creativecommons.org/licenses/by/3.0/.
*/ */

2
site/assets/js/partials/snippets.js
View File

@ -6,7 +6,7 @@
/* /*
* JavaScript for Bootstrap's docs (https://getbootstrap.com/) * JavaScript for Bootstrap's docs (https://getbootstrap.com/)
* Copyright 2011-2024 The Bootstrap Authors * Copyright 2011-2025 The Bootstrap Authors
* Licensed under the Creative Commons Attribution 3.0 Unported License. * Licensed under the Creative Commons Attribution 3.0 Unported License.
* For details, see https://creativecommons.org/licenses/by/3.0/. * For details, see https://creativecommons.org/licenses/by/3.0/.
*/ */

2
site/assets/js/search.js
View File

@ -4,7 +4,7 @@
/*! /*!
* JavaScript for Bootstrap's docs (https://getbootstrap.com/) * JavaScript for Bootstrap's docs (https://getbootstrap.com/)
* Copyright 2024 The Bootstrap Authors * Copyright 2024-2025 The Bootstrap Authors
* Licensed under the Creative Commons Attribution 3.0 Unported License. * Licensed under the Creative Commons Attribution 3.0 Unported License.
* For details, see https://creativecommons.org/licenses/by/3.0/. * For details, see https://creativecommons.org/licenses/by/3.0/.
*/ */

2
site/assets/js/snippets.js
View File

@ -1,6 +1,6 @@
/* /*
* JavaScript for Bootstrap's docs (https://getbootstrap.com/) * JavaScript for Bootstrap's docs (https://getbootstrap.com/)
* Copyright 2011-2024 The Bootstrap Authors * Copyright 2011-2025 The Bootstrap Authors
* Licensed under the Creative Commons Attribution 3.0 Unported License. * Licensed under the Creative Commons Attribution 3.0 Unported License.
* For details, see https://creativecommons.org/licenses/by/3.0/. * For details, see https://creativecommons.org/licenses/by/3.0/.
*/ */

2
site/assets/js/stackblitz.js
View File

@ -6,7 +6,7 @@
/*! /*!
* JavaScript for Bootstrap's docs (https://getbootstrap.com/) * JavaScript for Bootstrap's docs (https://getbootstrap.com/)
* Copyright 2024 The Bootstrap Authors * Copyright 2024-2025 The Bootstrap Authors
* Licensed under the Creative Commons Attribution 3.0 Unported License. * Licensed under the Creative Commons Attribution 3.0 Unported License.
* For details, see https://creativecommons.org/licenses/by/3.0/. * For details, see https://creativecommons.org/licenses/by/3.0/.
*/ */

4
site/assets/scss/_component-examples.scss
View File

@ -93,13 +93,13 @@
.fixed-top, .fixed-top,
.sticky-top { .sticky-top {
position: static; position: static;
margin: calc(var(--bd-example-padding) * -1) calc(var(--bd-example-padding) * -1) var(--bd-example-padding); // stylelint-disable-line function-disallowed-list margin: calc(-1 * var(--bd-example-padding)) calc(-1 * var(--bd-example-padding)) var(--bd-example-padding); // stylelint-disable-line function-disallowed-list
} }
.fixed-bottom, .fixed-bottom,
.sticky-bottom { .sticky-bottom {
position: static; position: static;
margin: var(--bd-example-padding) calc(var(--bd-example-padding) * -1) calc(var(--bd-example-padding) * -1); // stylelint-disable-line function-disallowed-list margin: var(--bd-example-padding) calc(-1 * var(--bd-example-padding)) calc(-1 * var(--bd-example-padding)); // stylelint-disable-line function-disallowed-list
} }

2
site/assets/scss/_masthead.scss
View File

@ -86,7 +86,7 @@
padding: 1rem; padding: 1rem;
color: rgba(var(--bg-rgb), 1); color: rgba(var(--bg-rgb), 1);
background-color: rgba(var(--bg-rgb), .1); background-color: rgba(var(--bg-rgb), .1);
background-blend-mode: multiple; background-blend-mode: multiply;
@include border-radius(1rem); @include border-radius(1rem);
mix-blend-mode: darken; mix-blend-mode: darken;

4
site/assets/scss/_navbar.scss
View File

@ -3,6 +3,10 @@
background-color: transparent; background-color: transparent;
box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15); box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15);
@media (forced-colors) {
background-color: Canvas;
}
&::after { &::after {
position: absolute; position: absolute;
inset: 0; inset: 0;

2
site/assets/scss/docs.scss
View File

@ -1,6 +1,6 @@
/*! /*!
* Bootstrap Docs (https://getbootstrap.com/) * Bootstrap Docs (https://getbootstrap.com/)
* Copyright 2011-2024 The Bootstrap Authors * Copyright 2011-2025 The Bootstrap Authors
* Licensed under the Creative Commons Attribution 3.0 Unported License. * Licensed under the Creative Commons Attribution 3.0 Unported License.
* For details, see https://creativecommons.org/licenses/by/3.0/. * For details, see https://creativecommons.org/licenses/by/3.0/.
*/ */

2
site/assets/scss/search.scss
View File

@ -1,6 +1,6 @@
/*! /*!
* Bootstrap Docs (https://getbootstrap.com/) * Bootstrap Docs (https://getbootstrap.com/)
* Copyright 2024 The Bootstrap Authors * Copyright 2024-2025 The Bootstrap Authors
* Licensed under the Creative Commons Attribution 3.0 Unported License. * Licensed under the Creative Commons Attribution 3.0 Unported License.
* For details, see https://creativecommons.org/licenses/by/3.0/. * For details, see https://creativecommons.org/licenses/by/3.0/.
*/ */

2
site/content/docs/5.3/about/translations.md
View File

@ -10,7 +10,7 @@ Community members have translated Bootstrap's documentation into various languag
{{< translations.inline >}} {{< translations.inline >}}
<ul> <ul>
{{ range .Site.Data.translations -}} {{ range .Site.Data.translations -}}
<li><a href="{{ .url }}" hreflang="{{ .code }}">{{ .description }} ({{ .name }})</a></li> <li><a href="{{ .url }}" hreflang="{{ .code }}" lang="{{ .code }}">{{ .description }} ({{ .name }})</a></li>
{{ end -}} {{ end -}}
</ul> </ul>
{{< /translations.inline >}} {{< /translations.inline >}}

2
site/content/docs/5.3/components/dropdowns.md
View File

@ -8,7 +8,7 @@ toc: true
## Overview ## Overview
Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They're made interactive with the included Bootstrap dropdown JavaScript plugin. They're toggled by clicking, not by hovering; this is [an intentional design decision](https://markdotto.com/2012/02/27/bootstrap-explained-dropdowns/). Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They're made interactive with the included Bootstrap dropdown JavaScript plugin. They're toggled by clicking, not by hovering; this is [an intentional design decision](https://markdotto.com/blog/bootstrap-explained-dropdowns/).
Dropdowns are built on a third party library, [Popper](https://popper.js.org/docs/v2/), which provides dynamic positioning and viewport detection. Be sure to include [popper.min.js]({{< param "cdn.popper" >}}) before Bootstrap's JavaScript or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains Popper. Popper isn't used to position dropdowns in navbars though as dynamic positioning isn't required. Dropdowns are built on a third party library, [Popper](https://popper.js.org/docs/v2/), which provides dynamic positioning and viewport detection. Be sure to include [popper.min.js]({{< param "cdn.popper" >}}) before Bootstrap's JavaScript or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains Popper. Popper isn't used to position dropdowns in navbars though as dynamic positioning isn't required.

4
site/content/docs/5.3/components/modal.md
View File

@ -201,7 +201,7 @@ When modals become too long for the user's viewport or device, they scroll indep
<h1 class="modal-title fs-5" id="exampleModalLongTitle">Modal title</h1> <h1 class="modal-title fs-5" id="exampleModalLongTitle">Modal title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div> </div>
<div class="modal-body" style="min-height: 1500px"> <div class="modal-body" style="min-height: 100vh">
<p>This is some placeholder content to show the scrolling behavior for modals. Instead of repeating the text in the modal, we use an inline style to set a minimum height, thereby extending the length of the overall modal and demonstrating the overflow scrolling. When content becomes longer than the height of the viewport, scrolling will move the modal as needed.</p> <p>This is some placeholder content to show the scrolling behavior for modals. Instead of repeating the text in the modal, we use an inline style to set a minimum height, thereby extending the length of the overall modal and demonstrating the overflow scrolling. When content becomes longer than the height of the viewport, scrolling will move the modal as needed.</p>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
@ -856,7 +856,7 @@ Bootstrap's modal class exposes a few events for hooking into modal functionalit
{{< bs-table >}} {{< bs-table >}}
| Event | Description | | Event | Description |
| --- | --- | | --- | --- |
| `hide.bs.modal` | This event is fired immediately when the `hide` instance method has been called. | | `hide.bs.modal` | This event is fired immediately when the `hide` instance method has been called. Can be prevented by calling `event.preventDefault()`. See [JavaScript events documentation]({{< docsref "/getting-started/javascript#events" >}}) for more details on event prevention. |
| `hidden.bs.modal` | This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete). | | `hidden.bs.modal` | This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete). |
| `hidePrevented.bs.modal` | This event is fired when the modal is shown, its backdrop is `static` and a click outside of the modal is performed. The event is also fired when the escape key is pressed and the `keyboard` option is set to `false`. | | `hidePrevented.bs.modal` | This event is fired when the modal is shown, its backdrop is `static` and a click outside of the modal is performed. The event is also fired when the escape key is pressed and the `keyboard` option is set to `false`. |
| `show.bs.modal` | This event fires immediately when the `show` instance method is called. If caused by a click, the clicked element is available as the `relatedTarget` property of the event. | | `show.bs.modal` | This event fires immediately when the `show` instance method is called. If caused by a click, the clicked element is available as the `relatedTarget` property of the event. |

4
site/content/docs/5.3/components/tooltips.md
View File

@ -111,8 +111,8 @@ And with custom HTML added:
With an SVG: With an SVG:
<div class="bd-example tooltip-demo"> <div class="bd-example tooltip-demo">
<a href="#" class="d-inline-block" data-bs-toggle="tooltip" data-bs-title="Default tooltip"> <a href="#" class="d-inline-block" data-bs-toggle="tooltip" data-bs-title="Default tooltip" aria-label="Hover or focus to see default tooltip">
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 100 100"> <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 100 100" aria-hidden="true">
<rect width="100%" height="100%" fill="#563d7c"/> <rect width="100%" height="100%" fill="#563d7c"/>
<circle cx="50" cy="50" r="30" fill="#007bff"/> <circle cx="50" cy="50" r="30" fill="#007bff"/>
</svg> </svg>

2
site/content/docs/5.3/customize/options.md
View File

@ -20,7 +20,7 @@ You can find and customize these variables for key global options in Bootstrap's
| `$enable-transitions` | `true` (default) or `false` | Enables predefined `transition`s on various components. | | `$enable-transitions` | `true` (default) or `false` | Enables predefined `transition`s on various components. |
| `$enable-reduced-motion` | `true` (default) or `false` | Enables the [`prefers-reduced-motion` media query]({{< docsref "/getting-started/accessibility#reduced-motion" >}}), which suppresses certain animations/transitions based on the users' browser/operating system preferences. | | `$enable-reduced-motion` | `true` (default) or `false` | Enables the [`prefers-reduced-motion` media query]({{< docsref "/getting-started/accessibility#reduced-motion" >}}), which suppresses certain animations/transitions based on the users' browser/operating system preferences. |
| `$enable-grid-classes` | `true` (default) or `false` | Enables the generation of CSS classes for the grid system (e.g. `.row`, `.col-md-1`, etc.). | | `$enable-grid-classes` | `true` (default) or `false` | Enables the generation of CSS classes for the grid system (e.g. `.row`, `.col-md-1`, etc.). |
| `$enable-css-grid` | `true` or `false` (default) | Enables the experimental CSS Grid system (e.g. `.grid`, `.g-col-md-1`, etc.). | | `$enable-cssgrid` | `true` or `false` (default) | Enables the experimental CSS Grid system (e.g. `.grid`, `.g-col-md-1`, etc.). |
| `$enable-container-classes` | `true` (default) or `false` | Enables the generation of CSS classes for layout containers. (New in v5.2.0) | | `$enable-container-classes` | `true` (default) or `false` | Enables the generation of CSS classes for layout containers. (New in v5.2.0) |
| `$enable-caret` | `true` (default) or `false` | Enables pseudo element caret on `.dropdown-toggle`. | | `$enable-caret` | `true` (default) or `false` | Enables pseudo element caret on `.dropdown-toggle`. |
| `$enable-button-pointers` | `true` (default) or `false` | Add "hand" cursor to non-disabled button elements. | | `$enable-button-pointers` | `true` (default) or `false` | Add "hand" cursor to non-disabled button elements. |

2
site/content/docs/5.3/customize/sass.md
View File

@ -89,7 +89,7 @@ With that setup in place, you can begin to modify any of the Sass variables and
## Compiling ## 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. 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 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: 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:

28
site/content/docs/5.3/examples/badges/index.html
View File

@ -82,16 +82,16 @@ body_class: ""
<div class="d-flex gap-2 justify-content-center py-5"> <div class="d-flex gap-2 justify-content-center py-5">
<span class="badge d-flex p-2 align-items-center text-bg-primary rounded-pill"> <span class="badge d-flex p-2 align-items-center text-bg-primary rounded-pill">
<span class="px-1">Primary</span> <span class="px-1">Primary 1</span>
<a href="#"><svg class="bi ms-1" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a> <a href="#" aria-label="Delete primary 1"><svg class="bi ms-1" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
</span> </span>
<span class="badge d-flex p-2 align-items-center text-primary-emphasis bg-primary-subtle rounded-pill"> <span class="badge d-flex p-2 align-items-center text-primary-emphasis bg-primary-subtle rounded-pill">
<span class="px-1">Primary</span> <span class="px-1">Primary 2</span>
<a href="#"><svg class="bi ms-1" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a> <a href="#" aria-label="Delete primary 2"><svg class="bi ms-1" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
</span> </span>
<span class="badge d-flex p-2 align-items-center text-primary-emphasis bg-primary-subtle border border-primary-subtle rounded-pill"> <span class="badge d-flex p-2 align-items-center text-primary-emphasis bg-primary-subtle border border-primary-subtle rounded-pill">
<span class="px-1">Primary</span> <span class="px-1">Primary 3</span>
<a href="#"><svg class="bi ms-1" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a> <a href="#" aria-label="Delete primary 3"><svg class="bi ms-1" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
</span> </span>
</div> </div>
@ -102,48 +102,48 @@ body_class: ""
<img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt=""> <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
Primary Primary
<span class="vr mx-2"></span> <span class="vr mx-2"></span>
<a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a> <a href="#" aria-label="Delete primary"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
</span> </span>
<span class="badge d-flex align-items-center p-1 pe-2 text-secondary-emphasis bg-secondary-subtle border border-secondary-subtle rounded-pill"> <span class="badge d-flex align-items-center p-1 pe-2 text-secondary-emphasis bg-secondary-subtle border border-secondary-subtle rounded-pill">
<img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt=""> <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
Secondary Secondary
<span class="vr mx-2"></span> <span class="vr mx-2"></span>
<a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a> <a href="#" aria-label="Delete secondary"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
</span> </span>
<span class="badge d-flex align-items-center p-1 pe-2 text-success-emphasis bg-success-subtle border border-success-subtle rounded-pill"> <span class="badge d-flex align-items-center p-1 pe-2 text-success-emphasis bg-success-subtle border border-success-subtle rounded-pill">
<img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt=""> <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
Success Success
<span class="vr mx-2"></span> <span class="vr mx-2"></span>
<a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a> <a href="#" aria-label="Delete success"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
</span> </span>
<span class="badge d-flex align-items-center p-1 pe-2 text-danger-emphasis bg-danger-subtle border border-danger-subtle rounded-pill"> <span class="badge d-flex align-items-center p-1 pe-2 text-danger-emphasis bg-danger-subtle border border-danger-subtle rounded-pill">
<img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt=""> <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
Danger Danger
<span class="vr mx-2"></span> <span class="vr mx-2"></span>
<a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a> <a href="#" aria-label="Delete danger"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
</span> </span>
<span class="badge d-flex align-items-center p-1 pe-2 text-warning-emphasis bg-warning-subtle border border-warning-subtle rounded-pill"> <span class="badge d-flex align-items-center p-1 pe-2 text-warning-emphasis bg-warning-subtle border border-warning-subtle rounded-pill">
<img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt=""> <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
Warning Warning
<span class="vr mx-2"></span> <span class="vr mx-2"></span>
<a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a> <a href="#" aria-label="Delete warning"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
</span> </span>
<span class="badge d-flex align-items-center p-1 pe-2 text-info-emphasis bg-info-subtle border border-info-subtle rounded-pill"> <span class="badge d-flex align-items-center p-1 pe-2 text-info-emphasis bg-info-subtle border border-info-subtle rounded-pill">
<img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt=""> <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
Info Info
<span class="vr mx-2"></span> <span class="vr mx-2"></span>
<a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a> <a href="#" aria-label="Delete info"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
</span> </span>
<span class="badge d-flex align-items-center p-1 pe-2 text-light-emphasis bg-light-subtle border border-dark-subtle rounded-pill"> <span class="badge d-flex align-items-center p-1 pe-2 text-light-emphasis bg-light-subtle border border-dark-subtle rounded-pill">
<img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt=""> <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
Light Light
<span class="vr mx-2"></span> <span class="vr mx-2"></span>
<a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a> <a href="#" aria-label="Delete light"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
</span> </span>
<span class="badge d-flex align-items-center p-1 pe-2 text-dark-emphasis bg-dark-subtle border border-dark-subtle rounded-pill"> <span class="badge d-flex align-items-center p-1 pe-2 text-dark-emphasis bg-dark-subtle border border-dark-subtle rounded-pill">
<img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt=""> <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
Dark Dark
<span class="vr mx-2"></span> <span class="vr mx-2"></span>
<a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a> <a href="#" aria-label="Delete dark"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
</span> </span>
</div> </div>

4
site/content/docs/5.3/examples/blog-rtl/index.html
View File

@ -75,7 +75,7 @@ extra_css:
<p class="card-text mb-auto">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.</p> <p class="card-text mb-auto">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.</p>
<a href="#" class="icon-link gap-1 icon-link-hover stretched-link"> <a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
أكمل القراءة أكمل القراءة
<svg class="bi"><use xlink:href="#chevron-right"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
</a> </a>
</div> </div>
<div class="col-auto d-none d-lg-block"> <div class="col-auto d-none d-lg-block">
@ -92,7 +92,7 @@ extra_css:
<p class="mb-auto">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.</p> <p class="mb-auto">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.</p>
<a href="#" class="icon-link gap-1 icon-link-hover stretched-link"> <a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
أكمل القراءة أكمل القراءة
<svg class="bi"><use xlink:href="#chevron-right"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
</a> </a>
</div> </div>
<div class="col-auto d-none d-lg-block"> <div class="col-auto d-none d-lg-block">

4
site/content/docs/5.3/examples/blog/index.html
View File

@ -74,7 +74,7 @@ extra_css:
<p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p> <p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="icon-link gap-1 icon-link-hover stretched-link"> <a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
Continue reading Continue reading
<svg class="bi"><use xlink:href="#chevron-right"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
</a> </a>
</div> </div>
<div class="col-auto d-none d-lg-block"> <div class="col-auto d-none d-lg-block">
@ -91,7 +91,7 @@ extra_css:
<p class="mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p> <p class="mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="icon-link gap-1 icon-link-hover stretched-link"> <a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
Continue reading Continue reading
<svg class="bi"><use xlink:href="#chevron-right"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
</a> </a>
</div> </div>
<div class="col-auto d-none d-lg-block"> <div class="col-auto d-none d-lg-block">

6
site/content/docs/5.3/examples/breadcrumbs/index.html
View File

@ -29,7 +29,7 @@ body_class: ""
<ol class="breadcrumb p-3 bg-body-tertiary rounded-3"> <ol class="breadcrumb p-3 bg-body-tertiary rounded-3">
<li class="breadcrumb-item"> <li class="breadcrumb-item">
<a class="link-body-emphasis" href="#"> <a class="link-body-emphasis" href="#">
<svg class="bi" width="16" height="16"><use xlink:href="#house-door-fill"></use></svg> <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#house-door-fill"></use></svg>
<span class="visually-hidden">Home</span> <span class="visually-hidden">Home</span>
</a> </a>
</li> </li>
@ -50,7 +50,7 @@ body_class: ""
<ol class="breadcrumb breadcrumb-chevron p-3 bg-body-tertiary rounded-3"> <ol class="breadcrumb breadcrumb-chevron p-3 bg-body-tertiary rounded-3">
<li class="breadcrumb-item"> <li class="breadcrumb-item">
<a class="link-body-emphasis" href="#"> <a class="link-body-emphasis" href="#">
<svg class="bi" width="16" height="16"><use xlink:href="#house-door-fill"></use></svg> <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#house-door-fill"></use></svg>
<span class="visually-hidden">Home</span> <span class="visually-hidden">Home</span>
</a> </a>
</li> </li>
@ -71,7 +71,7 @@ body_class: ""
<ol class="breadcrumb breadcrumb-custom overflow-hidden text-center bg-body-tertiary border rounded-3"> <ol class="breadcrumb breadcrumb-custom overflow-hidden text-center bg-body-tertiary border rounded-3">
<li class="breadcrumb-item"> <li class="breadcrumb-item">
<a class="link-body-emphasis fw-semibold text-decoration-none" href="#"> <a class="link-body-emphasis fw-semibold text-decoration-none" href="#">
<svg class="bi" width="16" height="16"><use xlink:href="#house-door-fill"></use></svg> <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#house-door-fill"></use></svg>
Home Home
</a> </a>
</li> </li>

8
site/content/docs/5.3/examples/buttons/index.html
View File

@ -65,22 +65,22 @@ body_class: ""
<div class="d-flex gap-2 justify-content-center pt-5 pb-4"> <div class="d-flex gap-2 justify-content-center pt-5 pb-4">
<button class="btn btn-primary rounded-circle p-2 lh-1" type="button"> <button class="btn btn-primary rounded-circle p-2 lh-1" type="button">
<svg class="bi" width="16" height="16"><use xlink:href="#x-lg"/></svg> <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-lg"/></svg>
<span class="visually-hidden">Dismiss</span> <span class="visually-hidden">Dismiss</span>
</button> </button>
<button class="btn btn-outline-primary rounded-circle p-2 lh-1" type="button"> <button class="btn btn-outline-primary rounded-circle p-2 lh-1" type="button">
<svg class="bi" width="16" height="16"><use xlink:href="#x-lg"/></svg> <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-lg"/></svg>
<span class="visually-hidden">Dismiss</span> <span class="visually-hidden">Dismiss</span>
</button> </button>
</div> </div>
<div class="d-flex gap-2 justify-content-center pb-5"> <div class="d-flex gap-2 justify-content-center pb-5">
<button class="btn btn-primary rounded-circle p-3 lh-1" type="button"> <button class="btn btn-primary rounded-circle p-3 lh-1" type="button">
<svg class="bi" width="24" height="24"><use xlink:href="#x-lg"/></svg> <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#x-lg"/></svg>
<span class="visually-hidden">Dismiss</span> <span class="visually-hidden">Dismiss</span>
</button> </button>
<button class="btn btn-outline-primary rounded-circle p-3 lh-1" type="button"> <button class="btn btn-outline-primary rounded-circle p-3 lh-1" type="button">
<svg class="bi" width="24" height="24"><use xlink:href="#x-lg"/></svg> <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#x-lg"/></svg>
<span class="visually-hidden">Dismiss</span> <span class="visually-hidden">Dismiss</span>
</button> </button>
</div> </div>

8
site/content/docs/5.3/examples/cheatsheet-rtl/index.html
View File

@ -369,8 +369,8 @@ direction: rtl
<input type="file" class="form-control" id="customFile"> <input type="file" class="form-control" id="customFile">
</div> </div>
<div class="mb-3 form-check form-switch"> <div class="mb-3 form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked> <input class="form-check-input" type="checkbox" role="switch" id="switchCheckChecked" checked>
<label class="form-check-label" for="flexSwitchCheckChecked">زر على شكل مفتاح اختيار.</label> <label class="form-check-label" for="switchCheckChecked">زر على شكل مفتاح اختيار.</label>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label for="customRange3" class="form-label">مثال على حقل اختيار نطاقي</label> <label for="customRange3" class="form-label">مثال على حقل اختيار نطاقي</label>
@ -921,7 +921,7 @@ direction: rtl
<div> <div>
{{< example show_markup="false" >}} {{< example show_markup="false" >}}
<div class="btn-group w-100 align-items-center justify-content-between flex-wrap"> <div class="btn-group w-100 align-items-center justify-content-between flex-wrap me-0">
<div class="dropdown"> <div class="dropdown">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
زر القائمة المنسدلة زر القائمة المنسدلة
@ -1034,7 +1034,7 @@ direction: rtl
{{< /example >}} {{< /example >}}
{{< example show_markup="false" >}} {{< example show_markup="false" >}}
<div class="btn-group w-100 align-items-center justify-content-between flex-wrap"> <div class="btn-group w-100 align-items-center justify-content-between flex-wrap me-0">
<div class="dropend"> <div class="dropend">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
زر القائمة المنسدلة لليسار زر القائمة المنسدلة لليسار

8
site/content/docs/5.3/examples/cheatsheet/index.html
View File

@ -368,8 +368,8 @@ body_class: "bg-body-tertiary"
<input type="file" class="form-control" id="customFile"> <input type="file" class="form-control" id="customFile">
</div> </div>
<div class="mb-3 form-check form-switch"> <div class="mb-3 form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked> <input class="form-check-input" type="checkbox" role="switch" id="switchCheckChecked" checked>
<label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label> <label class="form-check-label" for="switchCheckChecked">Checked switch checkbox input</label>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label for="customRange3" class="form-label">Example range</label> <label for="customRange3" class="form-label">Example range</label>
@ -920,7 +920,7 @@ body_class: "bg-body-tertiary"
<div> <div>
{{< example show_markup="false" >}} {{< example show_markup="false" >}}
<div class="btn-group w-100 align-items-center justify-content-between flex-wrap"> <div class="btn-group w-100 align-items-center justify-content-between flex-wrap me-0">
<div class="dropdown"> <div class="dropdown">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button Dropdown button
@ -1033,7 +1033,7 @@ body_class: "bg-body-tertiary"
{{< /example >}} {{< /example >}}
{{< example show_markup="false" >}} {{< example show_markup="false" >}}
<div class="btn-group w-100 align-items-center justify-content-between flex-wrap"> <div class="btn-group w-100 align-items-center justify-content-between flex-wrap me-0">
<div class="dropend"> <div class="dropend">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropend button Dropend button

32
site/content/docs/5.3/examples/dashboard-rtl/index.html
View File

@ -68,12 +68,12 @@ extra_js:
<ul class="navbar-nav flex-row d-md-none"> <ul class="navbar-nav flex-row d-md-none">
<li class="nav-item text-nowrap"> <li class="nav-item text-nowrap">
<button class="nav-link px-3 text-white" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSearch" aria-controls="navbarSearch" aria-expanded="false" aria-label="تبديل البحث"> <button class="nav-link px-3 text-white" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSearch" aria-controls="navbarSearch" aria-expanded="false" aria-label="تبديل البحث">
<svg class="bi"><use xlink:href="#search"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#search"/></svg>
</button> </button>
</li> </li>
<li class="nav-item text-nowrap"> <li class="nav-item text-nowrap">
<button class="nav-link px-3 text-white" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="تبديل التنقل"> <button class="nav-link px-3 text-white" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="تبديل التنقل">
<svg class="bi"><use xlink:href="#list"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#list"/></svg>
</button> </button>
</li> </li>
</ul> </ul>
@ -95,37 +95,37 @@ extra_js:
<ul class="nav flex-column"> <ul class="nav flex-column">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2 active" aria-current="page" href="#"> <a class="nav-link d-flex align-items-center gap-2 active" aria-current="page" href="#">
<svg class="bi"><use xlink:href="#house-fill"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#house-fill"/></svg>
لوحة القيادة لوحة القيادة
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#file-earmark"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark"/></svg>
الطلبات الطلبات
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#cart"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#cart"/></svg>
المنتجات المنتجات
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#people"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#people"/></svg>
الزبائن الزبائن
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#graph-up"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#graph-up"/></svg>
التقارير التقارير
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#puzzle"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#puzzle"/></svg>
التكاملات التكاملات
</a> </a>
</li> </li>
@ -134,31 +134,31 @@ extra_js:
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-body-secondary text-uppercase"> <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-body-secondary text-uppercase">
<span>التقارير المحفوظة</span> <span>التقارير المحفوظة</span>
<a class="link-secondary" href="#" aria-label="إضافة تقرير جديد"> <a class="link-secondary" href="#" aria-label="إضافة تقرير جديد">
<svg class="bi"><use xlink:href="#plus-circle"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#plus-circle"/></svg>
</a> </a>
</h6> </h6>
<ul class="nav flex-column mb-auto"> <ul class="nav flex-column mb-auto">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#file-earmark-text"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
الشهر الحالي الشهر الحالي
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#file-earmark-text"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
الربع الأخير الربع الأخير
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#file-earmark-text"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
التفاعل الإجتماعي التفاعل الإجتماعي
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#file-earmark-text"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
مبيعات نهاية العام مبيعات نهاية العام
</a> </a>
</li> </li>
@ -169,13 +169,13 @@ extra_js:
<ul class="nav flex-column mb-auto"> <ul class="nav flex-column mb-auto">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#gear-wide-connected"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#gear-wide-connected"/></svg>
إعدادات إعدادات
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#door-closed"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#door-closed"/></svg>
خروج خروج
</a> </a>
</li> </li>
@ -193,7 +193,7 @@ extra_js:
<button type="button" class="btn btn-sm btn-outline-secondary">تصدير</button> <button type="button" class="btn btn-sm btn-outline-secondary">تصدير</button>
</div> </div>
<button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1"> <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1">
<svg class="bi"><use xlink:href="#calendar3"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#calendar3"/></svg>
هذا الأسبوع هذا الأسبوع
</button> </button>
</div> </div>

32
site/content/docs/5.3/examples/dashboard/index.html
View File

@ -67,12 +67,12 @@ extra_js:
<ul class="navbar-nav flex-row d-md-none"> <ul class="navbar-nav flex-row d-md-none">
<li class="nav-item text-nowrap"> <li class="nav-item text-nowrap">
<button class="nav-link px-3 text-white" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSearch" aria-controls="navbarSearch" aria-expanded="false" aria-label="Toggle search"> <button class="nav-link px-3 text-white" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSearch" aria-controls="navbarSearch" aria-expanded="false" aria-label="Toggle search">
<svg class="bi"><use xlink:href="#search"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#search"/></svg>
</button> </button>
</li> </li>
<li class="nav-item text-nowrap"> <li class="nav-item text-nowrap">
<button class="nav-link px-3 text-white" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation"> <button class="nav-link px-3 text-white" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
<svg class="bi"><use xlink:href="#list"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#list"/></svg>
</button> </button>
</li> </li>
</ul> </ul>
@ -94,37 +94,37 @@ extra_js:
<ul class="nav flex-column"> <ul class="nav flex-column">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2 active" aria-current="page" href="#"> <a class="nav-link d-flex align-items-center gap-2 active" aria-current="page" href="#">
<svg class="bi"><use xlink:href="#house-fill"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#house-fill"/></svg>
Dashboard Dashboard
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#file-earmark"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark"/></svg>
Orders Orders
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#cart"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#cart"/></svg>
Products Products
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#people"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#people"/></svg>
Customers Customers
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#graph-up"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#graph-up"/></svg>
Reports Reports
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#puzzle"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#puzzle"/></svg>
Integrations Integrations
</a> </a>
</li> </li>
@ -133,31 +133,31 @@ extra_js:
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-body-secondary text-uppercase"> <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-body-secondary text-uppercase">
<span>Saved reports</span> <span>Saved reports</span>
<a class="link-secondary" href="#" aria-label="Add a new report"> <a class="link-secondary" href="#" aria-label="Add a new report">
<svg class="bi"><use xlink:href="#plus-circle"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#plus-circle"/></svg>
</a> </a>
</h6> </h6>
<ul class="nav flex-column mb-auto"> <ul class="nav flex-column mb-auto">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#file-earmark-text"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
Current month Current month
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#file-earmark-text"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
Last quarter Last quarter
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#file-earmark-text"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
Social engagement Social engagement
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#file-earmark-text"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
Year-end sale Year-end sale
</a> </a>
</li> </li>
@ -168,13 +168,13 @@ extra_js:
<ul class="nav flex-column mb-auto"> <ul class="nav flex-column mb-auto">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#gear-wide-connected"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#gear-wide-connected"/></svg>
Settings Settings
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#door-closed"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#door-closed"/></svg>
Sign out Sign out
</a> </a>
</li> </li>
@ -192,7 +192,7 @@ extra_js:
<button type="button" class="btn btn-sm btn-outline-secondary">Export</button> <button type="button" class="btn btn-sm btn-outline-secondary">Export</button>
</div> </div>
<button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1"> <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1">
<svg class="bi"><use xlink:href="#calendar3"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#calendar3"/></svg>
This week This week
</button> </button>
</div> </div>

40
site/content/docs/5.3/examples/dropdowns/index.html
View File

@ -124,38 +124,38 @@ body_class: ""
<ul class="dropdown-menu d-block position-static mx-0 shadow w-220px" data-bs-theme="light"> <ul class="dropdown-menu d-block position-static mx-0 shadow w-220px" data-bs-theme="light">
<li> <li>
<a class="dropdown-item d-flex gap-2 align-items-center" href="#"> <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
<svg class="bi" width="16" height="16"><use xlink:href="#files"/></svg> <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#files"/></svg>
Documents Documents
</a> </a>
</li> </li>
<li> <li>
<a class="dropdown-item d-flex gap-2 align-items-center" href="#"> <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
<svg class="bi" width="16" height="16"><use xlink:href="#image-fill"/></svg> <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#image-fill"/></svg>
Photos Photos
</a> </a>
</li> </li>
<li> <li>
<a class="dropdown-item d-flex gap-2 align-items-center" href="#"> <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
<svg class="bi" width="16" height="16"><use xlink:href="#film"/></svg> <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#film"/></svg>
Movies Movies
</a> </a>
</li> </li>
<li> <li>
<a class="dropdown-item d-flex gap-2 align-items-center" href="#"> <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
<svg class="bi" width="16" height="16"><use xlink:href="#music-note-beamed"/></svg> <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#music-note-beamed"/></svg>
Music Music
</a> </a>
</li> </li>
<li> <li>
<a class="dropdown-item d-flex gap-2 align-items-center" href="#"> <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
<svg class="bi" width="16" height="16"><use xlink:href="#joystick"/></svg> <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#joystick"/></svg>
Games Games
</a> </a>
</li> </li>
<li><hr class="dropdown-divider"></li> <li><hr class="dropdown-divider"></li>
<li> <li>
<a class="dropdown-item dropdown-item-danger d-flex gap-2 align-items-center" href="#"> <a class="dropdown-item dropdown-item-danger d-flex gap-2 align-items-center" href="#">
<svg class="bi" width="16" height="16"><use xlink:href="#trash"/></svg> <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#trash"/></svg>
Trash Trash
</a> </a>
</li> </li>
@ -163,38 +163,38 @@ body_class: ""
<ul class="dropdown-menu d-block position-static mx-0 border-0 shadow w-220px" data-bs-theme="dark"> <ul class="dropdown-menu d-block position-static mx-0 border-0 shadow w-220px" data-bs-theme="dark">
<li> <li>
<a class="dropdown-item d-flex gap-2 align-items-center" href="#"> <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
<svg class="bi" width="16" height="16"><use xlink:href="#files"/></svg> <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#files"/></svg>
Documents Documents
</a> </a>
</li> </li>
<li> <li>
<a class="dropdown-item d-flex gap-2 align-items-center" href="#"> <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
<svg class="bi" width="16" height="16"><use xlink:href="#image-fill"/></svg> <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#image-fill"/></svg>
Photos Photos
</a> </a>
</li> </li>
<li> <li>
<a class="dropdown-item d-flex gap-2 align-items-center" href="#"> <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
<svg class="bi" width="16" height="16"><use xlink:href="#film"/></svg> <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#film"/></svg>
Movies Movies
</a> </a>
</li> </li>
<li> <li>
<a class="dropdown-item d-flex gap-2 align-items-center" href="#"> <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
<svg class="bi" width="16" height="16"><use xlink:href="#music-note-beamed"/></svg> <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#music-note-beamed"/></svg>
Music Music
</a> </a>
</li> </li>
<li> <li>
<a class="dropdown-item d-flex gap-2 align-items-center" href="#"> <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
<svg class="bi" width="16" height="16"><use xlink:href="#joystick"/></svg> <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#joystick"/></svg>
Games Games
</a> </a>
</li> </li>
<li><hr class="dropdown-divider"></li> <li><hr class="dropdown-divider"></li>
<li> <li>
<a class="dropdown-item d-flex gap-2 align-items-center" href="#"> <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
<svg class="bi" width="16" height="16"><use xlink:href="#trash"/></svg> <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#trash"/></svg>
Trash Trash
</a> </a>
</li> </li>
@ -209,7 +209,7 @@ body_class: ""
<div class="cal"> <div class="cal">
<div class="cal-month"> <div class="cal-month">
<button class="btn cal-btn" type="button" aria-label="previous month"> <button class="btn cal-btn" type="button" aria-label="previous month">
<svg class="bi" width="16" height="16"><use xlink:href="#arrow-left-short"/></svg> <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-left-short"/></svg>
</button> </button>
<strong class="cal-month-name">June</strong> <strong class="cal-month-name">June</strong>
<select class="form-select cal-month-name d-none"> <select class="form-select cal-month-name d-none">
@ -288,7 +288,7 @@ body_class: ""
<div class="cal"> <div class="cal">
<div class="cal-month"> <div class="cal-month">
<button class="btn cal-btn" type="button" aria-label="previous month"> <button class="btn cal-btn" type="button" aria-label="previous month">
<svg class="bi" width="16" height="16"><use xlink:href="#arrow-left-short"/></svg> <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-left-short"/></svg>
</button> </button>
<strong class="cal-month-name">June</strong> <strong class="cal-month-name">June</strong>
<select class="form-select cal-month-name d-none"> <select class="form-select cal-month-name d-none">
@ -371,7 +371,7 @@ body_class: ""
<ul class="list-unstyled d-flex flex-column gap-2"> <ul class="list-unstyled d-flex flex-column gap-2">
<li> <li>
<a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start"> <a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start">
<svg class="bi" width="24" height="24"><use xlink:href="#image-fill"/></svg> <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#image-fill"/></svg>
<div> <div>
<strong class="d-block">Main product</strong> <strong class="d-block">Main product</strong>
<small>Take a tour through the product</small> <small>Take a tour through the product</small>
@ -380,7 +380,7 @@ body_class: ""
</li> </li>
<li> <li>
<a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start"> <a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start">
<svg class="bi" width="24" height="24"><use xlink:href="#music-note-beamed"/></svg> <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#music-note-beamed"/></svg>
<div> <div>
<strong class="d-block">Another product</strong> <strong class="d-block">Another product</strong>
<small>Explore this other product we offer</small> <small>Explore this other product we offer</small>
@ -389,7 +389,7 @@ body_class: ""
</li> </li>
<li> <li>
<a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start"> <a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start">
<svg class="bi" width="24" height="24"><use xlink:href="#question-circle"/></svg> <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#question-circle"/></svg>
<div> <div>
<strong class="d-block">Support</strong> <strong class="d-block">Support</strong>
<small>Get help from our support crew</small> <small>Get help from our support crew</small>
@ -418,7 +418,7 @@ body_class: ""
<ul class="list-unstyled d-flex flex-column gap-2"> <ul class="list-unstyled d-flex flex-column gap-2">
<li> <li>
<a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start"> <a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start">
<svg class="bi" width="24" height="24"><use xlink:href="#image-fill"/></svg> <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#image-fill"/></svg>
<div> <div>
<strong class="d-block">Main product</strong> <strong class="d-block">Main product</strong>
<small>Take a tour through the product</small> <small>Take a tour through the product</small>
@ -427,7 +427,7 @@ body_class: ""
</li> </li>
<li> <li>
<a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start"> <a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start">
<svg class="bi" width="24" height="24"><use xlink:href="#music-note-beamed"/></svg> <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#music-note-beamed"/></svg>
<div> <div>
<strong class="d-block">Another product</strong> <strong class="d-block">Another product</strong>
<small>Explore this other product we offer</small> <small>Explore this other product we offer</small>
@ -436,7 +436,7 @@ body_class: ""
</li> </li>
<li> <li>
<a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start"> <a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start">
<svg class="bi" width="24" height="24"><use xlink:href="#question-circle"/></svg> <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#question-circle"/></svg>
<div> <div>
<strong class="d-block">Support</strong> <strong class="d-block">Support</strong>
<small>Get help from our support crew</small> <small>Get help from our support crew</small>

54
site/content/docs/5.3/examples/features/index.html
View File

@ -66,35 +66,35 @@ body_class: ""
<div class="row g-4 py-5 row-cols-1 row-cols-lg-3"> <div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
<div class="feature col"> <div class="feature col">
<div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3"> <div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
<svg class="bi" width="1em" height="1em"><use xlink:href="#collection"/></svg> <svg class="bi" width="1em" height="1em" aria-hidden="true"><use xlink:href="#collection"/></svg>
</div> </div>
<h3 class="fs-2 text-body-emphasis">Featured title</h3> <h3 class="fs-2 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p> <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
<a href="#" class="icon-link"> <a href="#" class="icon-link">
Call to action Call to action
<svg class="bi"><use xlink:href="#chevron-right"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
</a> </a>
</div> </div>
<div class="feature col"> <div class="feature col">
<div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3"> <div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
<svg class="bi" width="1em" height="1em"><use xlink:href="#people-circle"/></svg> <svg class="bi" width="1em" height="1em" aria-hidden="true"><use xlink:href="#people-circle"/></svg>
</div> </div>
<h3 class="fs-2 text-body-emphasis">Featured title</h3> <h3 class="fs-2 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p> <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
<a href="#" class="icon-link"> <a href="#" class="icon-link">
Call to action Call to action
<svg class="bi"><use xlink:href="#chevron-right"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
</a> </a>
</div> </div>
<div class="feature col"> <div class="feature col">
<div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3"> <div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
<svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg> <svg class="bi" width="1em" height="1em" aria-hidden="true"><use xlink:href="#toggles2"/></svg>
</div> </div>
<h3 class="fs-2 text-body-emphasis">Featured title</h3> <h3 class="fs-2 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p> <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
<a href="#" class="icon-link"> <a href="#" class="icon-link">
Call to action Call to action
<svg class="bi"><use xlink:href="#chevron-right"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
</a> </a>
</div> </div>
</div> </div>
@ -107,7 +107,7 @@ body_class: ""
<div class="row g-4 py-5 row-cols-1 row-cols-lg-3"> <div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3"> <div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
<svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg> <svg class="bi" width="1em" height="1em" aria-hidden="true"><use xlink:href="#toggles2"/></svg>
</div> </div>
<div> <div>
<h3 class="fs-2 text-body-emphasis">Featured title</h3> <h3 class="fs-2 text-body-emphasis">Featured title</h3>
@ -119,7 +119,7 @@ body_class: ""
</div> </div>
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3"> <div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
<svg class="bi" width="1em" height="1em"><use xlink:href="#cpu-fill"/></svg> <svg class="bi" width="1em" height="1em" aria-hidden="true"><use xlink:href="#cpu-fill"/></svg>
</div> </div>
<div> <div>
<h3 class="fs-2 text-body-emphasis">Featured title</h3> <h3 class="fs-2 text-body-emphasis">Featured title</h3>
@ -131,7 +131,7 @@ body_class: ""
</div> </div>
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3"> <div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
<svg class="bi" width="1em" height="1em"><use xlink:href="#tools"/></svg> <svg class="bi" width="1em" height="1em" aria-hidden="true"><use xlink:href="#tools"/></svg>
</div> </div>
<div> <div>
<h3 class="fs-2 text-body-emphasis">Featured title</h3> <h3 class="fs-2 text-body-emphasis">Featured title</h3>
@ -159,11 +159,11 @@ body_class: ""
<img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white"> <img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white">
</li> </li>
<li class="d-flex align-items-center me-3"> <li class="d-flex align-items-center me-3">
<svg class="bi me-2" width="1em" height="1em"><use xlink:href="#geo-fill"/></svg> <svg class="bi me-2" width="1em" height="1em" role="img" aria-label="Location"><use xlink:href="#geo-fill"/></svg>
<small>Earth</small> <small>Earth</small>
</li> </li>
<li class="d-flex align-items-center"> <li class="d-flex align-items-center">
<svg class="bi me-2" width="1em" height="1em"><use xlink:href="#calendar3"/></svg> <svg class="bi me-2" width="1em" height="1em" role="img" aria-label="Duration"><use xlink:href="#calendar3"/></svg>
<small>3d</small> <small>3d</small>
</li> </li>
</ul> </ul>
@ -180,11 +180,11 @@ body_class: ""
<img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white"> <img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white">
</li> </li>
<li class="d-flex align-items-center me-3"> <li class="d-flex align-items-center me-3">
<svg class="bi me-2" width="1em" height="1em"><use xlink:href="#geo-fill"/></svg> <svg class="bi me-2" width="1em" height="1em" role="img" aria-label="Location"><use xlink:href="#geo-fill"/></svg>
<small>Pakistan</small> <small>Pakistan</small>
</li> </li>
<li class="d-flex align-items-center"> <li class="d-flex align-items-center">
<svg class="bi me-2" width="1em" height="1em"><use xlink:href="#calendar3"/></svg> <svg class="bi me-2" width="1em" height="1em" role="img" aria-label="Duration"><use xlink:href="#calendar3"/></svg>
<small>4d</small> <small>4d</small>
</li> </li>
</ul> </ul>
@ -201,11 +201,11 @@ body_class: ""
<img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white"> <img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white">
</li> </li>
<li class="d-flex align-items-center me-3"> <li class="d-flex align-items-center me-3">
<svg class="bi me-2" width="1em" height="1em"><use xlink:href="#geo-fill"/></svg> <svg class="bi me-2" width="1em" height="1em" role="img" aria-label="Location"><use xlink:href="#geo-fill"/></svg>
<small>California</small> <small>California</small>
</li> </li>
<li class="d-flex align-items-center"> <li class="d-flex align-items-center">
<svg class="bi me-2" width="1em" height="1em"><use xlink:href="#calendar3"/></svg> <svg class="bi me-2" width="1em" height="1em" role="img" aria-label="Duration"><use xlink:href="#calendar3"/></svg>
<small>5d</small> <small>5d</small>
</li> </li>
</ul> </ul>
@ -222,56 +222,56 @@ body_class: ""
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4 py-5"> <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4 py-5">
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#bootstrap"/></svg> <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
<div> <div>
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3> <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p> <p>Paragraph of text beneath the heading to explain the heading.</p>
</div> </div>
</div> </div>
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#cpu-fill"/></svg> <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use xlink:href="#cpu-fill"/></svg>
<div> <div>
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3> <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p> <p>Paragraph of text beneath the heading to explain the heading.</p>
</div> </div>
</div> </div>
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#calendar3"/></svg> <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use xlink:href="#calendar3"/></svg>
<div> <div>
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3> <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p> <p>Paragraph of text beneath the heading to explain the heading.</p>
</div> </div>
</div> </div>
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#home"/></svg> <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use xlink:href="#home"/></svg>
<div> <div>
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3> <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p> <p>Paragraph of text beneath the heading to explain the heading.</p>
</div> </div>
</div> </div>
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#speedometer2"/></svg> <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use xlink:href="#speedometer2"/></svg>
<div> <div>
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3> <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p> <p>Paragraph of text beneath the heading to explain the heading.</p>
</div> </div>
</div> </div>
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#toggles2"/></svg> <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use xlink:href="#toggles2"/></svg>
<div> <div>
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3> <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p> <p>Paragraph of text beneath the heading to explain the heading.</p>
</div> </div>
</div> </div>
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#geo-fill"/></svg> <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use xlink:href="#geo-fill"/></svg>
<div> <div>
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3> <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p> <p>Paragraph of text beneath the heading to explain the heading.</p>
</div> </div>
</div> </div>
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#tools"/></svg> <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use xlink:href="#tools"/></svg>
<div> <div>
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3> <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p> <p>Paragraph of text beneath the heading to explain the heading.</p>
@ -296,7 +296,7 @@ body_class: ""
<div class="row row-cols-1 row-cols-sm-2 g-4"> <div class="row row-cols-1 row-cols-sm-2 g-4">
<div class="col d-flex flex-column gap-2"> <div class="col d-flex flex-column gap-2">
<div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3"> <div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
<svg class="bi" width="1em" height="1em"> <svg class="bi" width="1em" height="1em" aria-hidden="true">
<use xlink:href="#collection" /> <use xlink:href="#collection" />
</svg> </svg>
</div> </div>
@ -306,7 +306,7 @@ body_class: ""
<div class="col d-flex flex-column gap-2"> <div class="col d-flex flex-column gap-2">
<div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3"> <div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
<svg class="bi" width="1em" height="1em"> <svg class="bi" width="1em" height="1em" aria-hidden="true">
<use xlink:href="#gear-fill" /> <use xlink:href="#gear-fill" />
</svg> </svg>
</div> </div>
@ -316,7 +316,7 @@ body_class: ""
<div class="col d-flex flex-column gap-2"> <div class="col d-flex flex-column gap-2">
<div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3"> <div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
<svg class="bi" width="1em" height="1em"> <svg class="bi" width="1em" height="1em" aria-hidden="true">
<use xlink:href="#speedometer" /> <use xlink:href="#speedometer" />
</svg> </svg>
</div> </div>
@ -326,7 +326,7 @@ body_class: ""
<div class="col d-flex flex-column gap-2"> <div class="col d-flex flex-column gap-2">
<div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3"> <div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
<svg class="bi" width="1em" height="1em"> <svg class="bi" width="1em" height="1em" aria-hidden="true">
<use xlink:href="#table" /> <use xlink:href="#table" />
</svg> </svg>
</div> </div>

24
site/content/docs/5.3/examples/footers/index.html
View File

@ -24,8 +24,8 @@ body_class: ""
<footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top"> <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
<p class="col-md-4 mb-0 text-body-secondary">&copy; {{< year >}} Company, Inc</p> <p class="col-md-4 mb-0 text-body-secondary">&copy; {{< year >}} Company, Inc</p>
<a href="/" class="col-md-4 d-flex align-items-center justify-content-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none"> <a href="/" class="col-md-4 d-flex align-items-center justify-content-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none" aria-label="Bootstrap">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
</a> </a>
<ul class="nav col-md-4 justify-content-end"> <ul class="nav col-md-4 justify-content-end">
@ -43,16 +43,16 @@ body_class: ""
<div class="container"> <div class="container">
<footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top"> <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
<div class="col-md-4 d-flex align-items-center"> <div class="col-md-4 d-flex align-items-center">
<a href="/" class="mb-3 me-2 mb-md-0 text-body-secondary text-decoration-none lh-1"> <a href="/" class="mb-3 me-2 mb-md-0 text-body-secondary text-decoration-none lh-1" aria-label="Bootstrap">
<svg class="bi" width="30" height="24"><use xlink:href="#bootstrap"/></svg> <svg class="bi" width="30" height="24" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
</a> </a>
<span class="mb-3 mb-md-0 text-body-secondary">&copy; {{< year >}} Company, Inc</span> <span class="mb-3 mb-md-0 text-body-secondary">&copy; {{< year >}} Company, Inc</span>
</div> </div>
<ul class="nav col-md-4 justify-content-end list-unstyled d-flex"> <ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
<li class="ms-3"><a class="text-body-secondary" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#twitter"/></svg></a></li> <li class="ms-3"><a class="text-body-secondary" href="#" aria-label="Twitter"><svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#twitter"/></svg></a></li>
<li class="ms-3"><a class="text-body-secondary" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#instagram"/></svg></a></li> <li class="ms-3"><a class="text-body-secondary" href="#" aria-label="Instagram"><svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#instagram"/></svg></a></li>
<li class="ms-3"><a class="text-body-secondary" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#facebook"/></svg></a></li> <li class="ms-3"><a class="text-body-secondary" href="#" aria-label="Facebook"><svg class="bi" width="24" height="24"><use xlink:href="#facebook"/></svg></a></li>
</ul> </ul>
</footer> </footer>
</div> </div>
@ -77,8 +77,8 @@ body_class: ""
<div class="container"> <div class="container">
<footer class="row row-cols-1 row-cols-sm-2 row-cols-md-5 py-5 my-5 border-top"> <footer class="row row-cols-1 row-cols-sm-2 row-cols-md-5 py-5 my-5 border-top">
<div class="col mb-3"> <div class="col mb-3">
<a href="/" class="d-flex align-items-center mb-3 link-body-emphasis text-decoration-none"> <a href="/" class="d-flex align-items-center mb-3 link-body-emphasis text-decoration-none" aria-label="Bootstrap">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
</a> </a>
<p class="text-body-secondary">&copy; {{< year >}}</p> <p class="text-body-secondary">&copy; {{< year >}}</p>
</div> </div>
@ -177,9 +177,9 @@ body_class: ""
<div class="d-flex flex-column flex-sm-row justify-content-between py-4 my-4 border-top"> <div class="d-flex flex-column flex-sm-row justify-content-between py-4 my-4 border-top">
<p>&copy; {{< year >}} Company, Inc. All rights reserved.</p> <p>&copy; {{< year >}} Company, Inc. All rights reserved.</p>
<ul class="list-unstyled d-flex"> <ul class="list-unstyled d-flex">
<li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#twitter"/></svg></a></li> <li class="ms-3"><a class="link-body-emphasis" href="#" aria-label="Twitter"><svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#twitter"/></svg></a></li>
<li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#instagram"/></svg></a></li> <li class="ms-3"><a class="link-body-emphasis" href="#" aria-label="Instagram"><svg class="bi" width="24" height="24"><use xlink:href="#instagram"/></svg></a></li>
<li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#facebook"/></svg></a></li> <li class="ms-3"><a class="link-body-emphasis" href="#" aria-label="Facebook"><svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#facebook"/></svg></a></li>
</ul> </ul>
</div> </div>
</footer> </footer>

18
site/content/docs/5.3/examples/headers/index.html
View File

@ -36,7 +36,7 @@ body_class: ""
<div class="container"> <div class="container">
<header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom"> <header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none"> <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
<span class="fs-4">Simple header</span> <span class="fs-4">Simple header</span>
</a> </a>
@ -159,8 +159,8 @@ body_class: ""
<header class="py-3 mb-3 border-bottom"> <header class="py-3 mb-3 border-bottom">
<div class="container-fluid d-grid gap-3 align-items-center" style="grid-template-columns: 1fr 2fr;"> <div class="container-fluid d-grid gap-3 align-items-center" style="grid-template-columns: 1fr 2fr;">
<div class="dropdown"> <div class="dropdown">
<a href="#" class="d-flex align-items-center col-lg-4 mb-2 mb-lg-0 link-body-emphasis text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> <a href="#" class="d-flex align-items-center col-lg-4 mb-2 mb-lg-0 link-body-emphasis text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Bootstrap menu">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
</a> </a>
<ul class="dropdown-menu text-small shadow"> <ul class="dropdown-menu text-small shadow">
<li><a class="dropdown-item active" href="#" aria-current="page">Overview</a></li> <li><a class="dropdown-item active" href="#" aria-current="page">Overview</a></li>
@ -225,7 +225,7 @@ body_class: ""
<header class="py-3 mb-4 border-bottom"> <header class="py-3 mb-4 border-bottom">
<div class="container d-flex flex-wrap justify-content-center"> <div class="container d-flex flex-wrap justify-content-center">
<a href="/" class="d-flex align-items-center mb-3 mb-lg-0 me-lg-auto link-body-emphasis text-decoration-none"> <a href="/" class="d-flex align-items-center mb-3 mb-lg-0 me-lg-auto link-body-emphasis text-decoration-none">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
<span class="fs-4">Double header</span> <span class="fs-4">Double header</span>
</a> </a>
<form class="col-12 col-lg-auto mb-3 mb-lg-0" role="search"> <form class="col-12 col-lg-auto mb-3 mb-lg-0" role="search">
@ -247,31 +247,31 @@ body_class: ""
<ul class="nav col-12 col-lg-auto my-2 justify-content-center my-md-0 text-small"> <ul class="nav col-12 col-lg-auto my-2 justify-content-center my-md-0 text-small">
<li> <li>
<a href="#" class="nav-link text-secondary"> <a href="#" class="nav-link text-secondary">
<svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#home"/></svg> <svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><use xlink:href="#home"/></svg>
Home Home
</a> </a>
</li> </li>
<li> <li>
<a href="#" class="nav-link text-white"> <a href="#" class="nav-link text-white">
<svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#speedometer2"/></svg> <svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><use xlink:href="#speedometer2"/></svg>
Dashboard Dashboard
</a> </a>
</li> </li>
<li> <li>
<a href="#" class="nav-link text-white"> <a href="#" class="nav-link text-white">
<svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#table"/></svg> <svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><use xlink:href="#table"/></svg>
Orders Orders
</a> </a>
</li> </li>
<li> <li>
<a href="#" class="nav-link text-white"> <a href="#" class="nav-link text-white">
<svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#grid"/></svg> <svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><use xlink:href="#grid"/></svg>
Products Products
</a> </a>
</li> </li>
<li> <li>
<a href="#" class="nav-link text-white"> <a href="#" class="nav-link text-white">
<svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#people-circle"/></svg> <svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><use xlink:href="#people-circle"/></svg>
Customers Customers
</a> </a>
</li> </li>

4
site/content/docs/5.3/examples/jumbotrons/index.html
View File

@ -22,7 +22,7 @@ body_class: ""
<div class="container my-5"> <div class="container my-5">
<div class="p-5 text-center bg-body-tertiary rounded-3"> <div class="p-5 text-center bg-body-tertiary rounded-3">
<svg class="bi mt-4 mb-3" style="color: var(--bs-indigo);" width="100" height="100"><use xlink:href="#bootstrap"/></svg> <svg class="bi mt-4 mb-3" style="color: var(--bs-indigo);" width="100" height="100" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
<h1 class="text-body-emphasis">Jumbotron with icon</h1> <h1 class="text-body-emphasis">Jumbotron with icon</h1>
<p class="col-lg-8 mx-auto fs-5 text-muted"> <p class="col-lg-8 mx-auto fs-5 text-muted">
This is a custom jumbotron featuring an SVG image at the top, some longer text that wraps early thanks to a responsive <code>.col-*</code> class, and a customized call to action. This is a custom jumbotron featuring an SVG image at the top, some longer text that wraps early thanks to a responsive <code>.col-*</code> class, and a customized call to action.
@ -44,7 +44,7 @@ body_class: ""
<div class="container my-5"> <div class="container my-5">
<div class="position-relative p-5 text-center text-muted bg-body border border-dashed rounded-5"> <div class="position-relative p-5 text-center text-muted bg-body border border-dashed rounded-5">
<button type="button" class="position-absolute top-0 end-0 p-3 m-3 btn-close bg-secondary bg-opacity-10 rounded-pill" aria-label="Close"></button> <button type="button" class="position-absolute top-0 end-0 p-3 m-3 btn-close bg-secondary bg-opacity-10 rounded-pill" aria-label="Close"></button>
<svg class="bi mt-5 mb-3" width="48" height="48"><use xlink:href="#check2-circle"/></svg> <svg class="bi mt-5 mb-3" width="48" height="48" aria-hidden="true"><use xlink:href="#check2-circle"/></svg>
<h1 class="text-body-emphasis">Placeholder jumbotron</h1> <h1 class="text-body-emphasis">Placeholder jumbotron</h1>
<p class="col-lg-6 mx-auto mb-4"> <p class="col-lg-6 mx-auto mb-4">
This faded back jumbotron is useful for placeholder content. It's also a great way to add a bit of context to a page or section when no content is available and to encourage visitors to take a specific action. This faded back jumbotron is useful for placeholder content. It's also a great way to add a bit of context to a page or section when no content is available and to encourage visitors to take a specific action.

14
site/content/docs/5.3/examples/list-groups/index.html
View File

@ -25,7 +25,7 @@ body_class: ""
<div class="d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center"> <div class="d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center">
<div class="list-group"> <div class="list-group">
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true"> <a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0"> <img src="https://github.com/twbs.png" alt="" width="32" height="32" class="rounded-circle flex-shrink-0">
<div class="d-flex gap-2 w-100 justify-content-between"> <div class="d-flex gap-2 w-100 justify-content-between">
<div> <div>
<h6 class="mb-0">List group item heading</h6> <h6 class="mb-0">List group item heading</h6>
@ -35,7 +35,7 @@ body_class: ""
</div> </div>
</a> </a>
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true"> <a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0"> <img src="https://github.com/twbs.png" alt="" width="32" height="32" class="rounded-circle flex-shrink-0">
<div class="d-flex gap-2 w-100 justify-content-between"> <div class="d-flex gap-2 w-100 justify-content-between">
<div> <div>
<h6 class="mb-0">Another title here</h6> <h6 class="mb-0">Another title here</h6>
@ -45,7 +45,7 @@ body_class: ""
</div> </div>
</a> </a>
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true"> <a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0"> <img src="https://github.com/twbs.png" alt="" width="32" height="32" class="rounded-circle flex-shrink-0">
<div class="d-flex gap-2 w-100 justify-content-between"> <div class="d-flex gap-2 w-100 justify-content-between">
<div> <div>
<h6 class="mb-0">Third heading</h6> <h6 class="mb-0">Third heading</h6>
@ -118,7 +118,7 @@ body_class: ""
<span class="pt-1 form-checked-content"> <span class="pt-1 form-checked-content">
<strong>Finish sales report</strong> <strong>Finish sales report</strong>
<small class="d-block text-body-secondary"> <small class="d-block text-body-secondary">
<svg class="bi me-1" width="1em" height="1em"><use xlink:href="#calendar-event"/></svg> <svg class="bi me-1" width="1em" height="1em" role="img" aria-label="Schedule"><use xlink:href="#calendar-event"/></svg>
1:00–2:00pm 1:00–2:00pm
</small> </small>
</span> </span>
@ -128,7 +128,7 @@ body_class: ""
<span class="pt-1 form-checked-content"> <span class="pt-1 form-checked-content">
<strong>Weekly All Hands</strong> <strong>Weekly All Hands</strong>
<small class="d-block text-body-secondary"> <small class="d-block text-body-secondary">
<svg class="bi me-1" width="1em" height="1em"><use xlink:href="#calendar-event"/></svg> <svg class="bi me-1" width="1em" height="1em" role="img" aria-label="Schedule"><use xlink:href="#calendar-event"/></svg>
2:00–2:30pm 2:00–2:30pm
</small> </small>
</span> </span>
@ -138,7 +138,7 @@ body_class: ""
<span class="pt-1 form-checked-content"> <span class="pt-1 form-checked-content">
<strong>Out of office</strong> <strong>Out of office</strong>
<small class="d-block text-body-secondary"> <small class="d-block text-body-secondary">
<svg class="bi me-1" width="1em" height="1em"><use xlink:href="#alarm"/></svg> <svg class="bi me-1" width="1em" height="1em" role="img" aria-label="Reminder"><use xlink:href="#alarm"/></svg>
Tomorrow Tomorrow
</small> </small>
</span> </span>
@ -148,7 +148,7 @@ body_class: ""
<span class="pt-1 form-checked-content"> <span class="pt-1 form-checked-content">
<span contenteditable="true" class="w-100">Add new task...</span> <span contenteditable="true" class="w-100">Add new task...</span>
<small class="d-block text-body-secondary"> <small class="d-block text-body-secondary">
<svg class="bi me-1" width="1em" height="1em"><use xlink:href="#list-check"/></svg> <svg class="bi me-1" width="1em" height="1em" aria-hidden="true"><use xlink:href="#list-check"/></svg>
Choose list... Choose list...
</small> </small>
</span> </span>

12
site/content/docs/5.3/examples/modals/index.html
View File

@ -78,21 +78,21 @@ body_class: ""
<ul class="d-grid gap-4 my-5 list-unstyled small"> <ul class="d-grid gap-4 my-5 list-unstyled small">
<li class="d-flex gap-4"> <li class="d-flex gap-4">
<svg class="bi text-body-secondary flex-shrink-0" width="48" height="48"><use xlink:href="#grid-fill"/></svg> <svg class="bi text-body-secondary flex-shrink-0" width="48" height="48" aria-hidden="true"><use xlink:href="#grid-fill"/></svg>
<div> <div>
<h5 class="mb-0">Grid view</h5> <h5 class="mb-0">Grid view</h5>
Not into lists? Try the new grid view. Not into lists? Try the new grid view.
</div> </div>
</li> </li>
<li class="d-flex gap-4"> <li class="d-flex gap-4">
<svg class="bi text-warning flex-shrink-0" width="48" height="48"><use xlink:href="#bookmark-star"/></svg> <svg class="bi text-warning flex-shrink-0" width="48" height="48" aria-hidden="true"><use xlink:href="#bookmark-star"/></svg>
<div> <div>
<h5 class="mb-0">Bookmarks</h5> <h5 class="mb-0">Bookmarks</h5>
Save items you love for easy access later. Save items you love for easy access later.
</div> </div>
</li> </li>
<li class="d-flex gap-4"> <li class="d-flex gap-4">
<svg class="bi text-primary flex-shrink-0" width="48" height="48"><use xlink:href="#film"/></svg> <svg class="bi text-primary flex-shrink-0" width="48" height="48" aria-hidden="true"><use xlink:href="#film"/></svg>
<div> <div>
<h5 class="mb-0">Video embeds</h5> <h5 class="mb-0">Video embeds</h5>
Share videos wherever you go. Share videos wherever you go.
@ -130,15 +130,15 @@ body_class: ""
<hr class="my-4"> <hr class="my-4">
<h2 class="fs-5 fw-bold mb-3">Or use a third-party</h2> <h2 class="fs-5 fw-bold mb-3">Or use a third-party</h2>
<button class="w-100 py-2 mb-2 btn btn-outline-secondary rounded-3" type="submit"> <button class="w-100 py-2 mb-2 btn btn-outline-secondary rounded-3" type="submit">
<svg class="bi me-1" width="16" height="16"><use xlink:href="#twitter"/></svg> <svg class="bi me-1" width="16" height="16" aria-hidden="true"><use xlink:href="#twitter"/></svg>
Sign up with Twitter Sign up with Twitter
</button> </button>
<button class="w-100 py-2 mb-2 btn btn-outline-primary rounded-3" type="submit"> <button class="w-100 py-2 mb-2 btn btn-outline-primary rounded-3" type="submit">
<svg class="bi me-1" width="16" height="16"><use xlink:href="#facebook"/></svg> <svg class="bi me-1" width="16" height="16" aria-hidden="true"><use xlink:href="#facebook"/></svg>
Sign up with Facebook Sign up with Facebook
</button> </button>
<button class="w-100 py-2 mb-2 btn btn-outline-secondary rounded-3" type="submit"> <button class="w-100 py-2 mb-2 btn btn-outline-secondary rounded-3" type="submit">
<svg class="bi me-1" width="16" height="16"><use xlink:href="#github"/></svg> <svg class="bi me-1" width="16" height="16" aria-hidden="true"><use xlink:href="#github"/></svg>
Sign up with GitHub Sign up with GitHub
</button> </button>
</form> </form>

26
site/content/docs/5.3/examples/pricing/index.html
View File

@ -104,42 +104,42 @@ extra_css:
<tbody> <tbody>
<tr> <tr>
<th scope="row" class="text-start">Public</th> <th scope="row" class="text-start">Public</th>
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
</tr> </tr>
<tr> <tr>
<th scope="row" class="text-start">Private</th> <th scope="row" class="text-start">Private</th>
<td></td> <td></td>
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
</tr> </tr>
</tbody> </tbody>
<tbody> <tbody>
<tr> <tr>
<th scope="row" class="text-start">Permissions</th> <th scope="row" class="text-start">Permissions</th>
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
</tr> </tr>
<tr> <tr>
<th scope="row" class="text-start">Sharing</th> <th scope="row" class="text-start">Sharing</th>
<td></td> <td></td>
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
</tr> </tr>
<tr> <tr>
<th scope="row" class="text-start">Unlimited members</th> <th scope="row" class="text-start">Unlimited members</th>
<td></td> <td></td>
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
</tr> </tr>
<tr> <tr>
<th scope="row" class="text-start">Extra security</th> <th scope="row" class="text-start">Extra security</th>
<td></td> <td></td>
<td></td> <td></td>
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>

14
site/content/docs/5.3/examples/product/index.html
View File

@ -21,7 +21,7 @@ extra_css:
<nav class="navbar navbar-expand-md bg-dark sticky-top border-bottom" data-bs-theme="dark"> <nav class="navbar navbar-expand-md bg-dark sticky-top border-bottom" data-bs-theme="dark">
<div class="container"> <div class="container">
<a class="navbar-brand d-md-none" href="#"> <a class="navbar-brand d-md-none" href="#">
<svg class="bi" width="24" height="24"><use xlink:href="#aperture"/></svg> <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#aperture"/></svg>
Aperture Aperture
</a> </a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas" aria-controls="offcanvas" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas" aria-controls="offcanvas" aria-label="Toggle navigation">
@ -34,8 +34,8 @@ extra_css:
</div> </div>
<div class="offcanvas-body"> <div class="offcanvas-body">
<ul class="navbar-nav flex-grow-1 justify-content-between"> <ul class="navbar-nav flex-grow-1 justify-content-between">
<li class="nav-item"><a class="nav-link" href="#"> <li class="nav-item"><a class="nav-link" href="#" aria-label="Aperture">
<svg class="bi" width="24" height="24"><use xlink:href="#aperture"/></svg> <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#aperture"/></svg>
</a></li> </a></li>
<li class="nav-item"><a class="nav-link" href="#">Tour</a></li> <li class="nav-item"><a class="nav-link" href="#">Tour</a></li>
<li class="nav-item"><a class="nav-link" href="#">Product</a></li> <li class="nav-item"><a class="nav-link" href="#">Product</a></li>
@ -43,8 +43,8 @@ extra_css:
<li class="nav-item"><a class="nav-link" href="#">Enterprise</a></li> <li class="nav-item"><a class="nav-link" href="#">Enterprise</a></li>
<li class="nav-item"><a class="nav-link" href="#">Support</a></li> <li class="nav-item"><a class="nav-link" href="#">Support</a></li>
<li class="nav-item"><a class="nav-link" href="#">Pricing</a></li> <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
<li class="nav-item"><a class="nav-link" href="#"> <li class="nav-item"><a class="nav-link" href="#" aria-label="Cart">
<svg class="bi" width="24" height="24"><use xlink:href="#cart"/></svg> <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#cart"/></svg>
</a></li> </a></li>
</ul> </ul>
</div> </div>
@ -60,11 +60,11 @@ extra_css:
<div class="d-flex gap-3 justify-content-center lead fw-normal"> <div class="d-flex gap-3 justify-content-center lead fw-normal">
<a class="icon-link" href="#"> <a class="icon-link" href="#">
Learn more Learn more
<svg class="bi"><use xlink:href="#chevron-right"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
</a> </a>
<a class="icon-link" href="#"> <a class="icon-link" href="#">
Buy Buy
<svg class="bi"><use xlink:href="#chevron-right"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
</a> </a>
</div> </div>
</div> </div>

30
site/content/docs/5.3/examples/sidebars/index.html
View File

@ -38,38 +38,38 @@ body_class: ""
<div class="d-flex flex-column flex-shrink-0 p-3 text-bg-dark" style="width: 280px;"> <div class="d-flex flex-column flex-shrink-0 p-3 text-bg-dark" style="width: 280px;">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none"> <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
<svg class="bi pe-none me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> <svg class="bi pe-none me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
<span class="fs-4">Sidebar</span> <span class="fs-4">Sidebar</span>
</a> </a>
<hr> <hr>
<ul class="nav nav-pills flex-column mb-auto"> <ul class="nav nav-pills flex-column mb-auto">
<li class="nav-item"> <li class="nav-item">
<a href="#" class="nav-link active" aria-current="page"> <a href="#" class="nav-link active" aria-current="page">
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#home"/></svg> <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#home"/></svg>
Home Home
</a> </a>
</li> </li>
<li> <li>
<a href="#" class="nav-link text-white"> <a href="#" class="nav-link text-white">
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#speedometer2"/></svg> <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#speedometer2"/></svg>
Dashboard Dashboard
</a> </a>
</li> </li>
<li> <li>
<a href="#" class="nav-link text-white"> <a href="#" class="nav-link text-white">
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#table"/></svg> <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#table"/></svg>
Orders Orders
</a> </a>
</li> </li>
<li> <li>
<a href="#" class="nav-link text-white"> <a href="#" class="nav-link text-white">
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#grid"/></svg> <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#grid"/></svg>
Products Products
</a> </a>
</li> </li>
<li> <li>
<a href="#" class="nav-link text-white"> <a href="#" class="nav-link text-white">
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#people-circle"/></svg> <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#people-circle"/></svg>
Customers Customers
</a> </a>
</li> </li>
@ -94,38 +94,38 @@ body_class: ""
<div class="d-flex flex-column flex-shrink-0 p-3 bg-body-tertiary" style="width: 280px;"> <div class="d-flex flex-column flex-shrink-0 p-3 bg-body-tertiary" style="width: 280px;">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none"> <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none">
<svg class="bi pe-none me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> <svg class="bi pe-none me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
<span class="fs-4">Sidebar</span> <span class="fs-4">Sidebar</span>
</a> </a>
<hr> <hr>
<ul class="nav nav-pills flex-column mb-auto"> <ul class="nav nav-pills flex-column mb-auto">
<li class="nav-item"> <li class="nav-item">
<a href="#" class="nav-link active" aria-current="page"> <a href="#" class="nav-link active" aria-current="page">
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#home"/></svg> <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#home"/></svg>
Home Home
</a> </a>
</li> </li>
<li> <li>
<a href="#" class="nav-link link-body-emphasis"> <a href="#" class="nav-link link-body-emphasis">
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#speedometer2"/></svg> <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#speedometer2"/></svg>
Dashboard Dashboard
</a> </a>
</li> </li>
<li> <li>
<a href="#" class="nav-link link-body-emphasis"> <a href="#" class="nav-link link-body-emphasis">
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#table"/></svg> <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#table"/></svg>
Orders Orders
</a> </a>
</li> </li>
<li> <li>
<a href="#" class="nav-link link-body-emphasis"> <a href="#" class="nav-link link-body-emphasis">
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#grid"/></svg> <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#grid"/></svg>
Products Products
</a> </a>
</li> </li>
<li> <li>
<a href="#" class="nav-link link-body-emphasis"> <a href="#" class="nav-link link-body-emphasis">
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#people-circle"/></svg> <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#people-circle"/></svg>
Customers Customers
</a> </a>
</li> </li>
@ -150,7 +150,7 @@ body_class: ""
<div class="d-flex flex-column flex-shrink-0 bg-body-tertiary" style="width: 4.5rem;"> <div class="d-flex flex-column flex-shrink-0 bg-body-tertiary" style="width: 4.5rem;">
<a href="/" class="d-block p-3 link-body-emphasis text-decoration-none" title="Icon-only" data-bs-toggle="tooltip" data-bs-placement="right"> <a href="/" class="d-block p-3 link-body-emphasis text-decoration-none" title="Icon-only" data-bs-toggle="tooltip" data-bs-placement="right">
<svg class="bi pe-none" width="40" height="32"><use xlink:href="#bootstrap"/></svg> <svg class="bi pe-none" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
<span class="visually-hidden">Icon-only</span> <span class="visually-hidden">Icon-only</span>
</a> </a>
<ul class="nav nav-pills nav-flush flex-column mb-auto text-center"> <ul class="nav nav-pills nav-flush flex-column mb-auto text-center">
@ -198,7 +198,7 @@ body_class: ""
<div class="flex-shrink-0 p-3" style="width: 280px;"> <div class="flex-shrink-0 p-3" style="width: 280px;">
<a href="/" class="d-flex align-items-center pb-3 mb-3 link-body-emphasis text-decoration-none border-bottom"> <a href="/" class="d-flex align-items-center pb-3 mb-3 link-body-emphasis text-decoration-none border-bottom">
<svg class="bi pe-none me-2" width="30" height="24"><use xlink:href="#bootstrap"/></svg> <svg class="bi pe-none me-2" width="30" height="24" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
<span class="fs-5 fw-semibold">Collapsible</span> <span class="fs-5 fw-semibold">Collapsible</span>
</a> </a>
<ul class="list-unstyled ps-0"> <ul class="list-unstyled ps-0">
@ -261,7 +261,7 @@ body_class: ""
<div class="d-flex flex-column align-items-stretch flex-shrink-0 bg-body-tertiary" style="width: 380px;"> <div class="d-flex flex-column align-items-stretch flex-shrink-0 bg-body-tertiary" style="width: 380px;">
<a href="/" class="d-flex align-items-center flex-shrink-0 p-3 link-body-emphasis text-decoration-none border-bottom"> <a href="/" class="d-flex align-items-center flex-shrink-0 p-3 link-body-emphasis text-decoration-none border-bottom">
<svg class="bi pe-none me-2" width="30" height="24"><use xlink:href="#bootstrap"/></svg> <svg class="bi pe-none me-2" width="30" height="24" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
<span class="fs-5 fw-semibold">List group</span> <span class="fs-5 fw-semibold">List group</span>
</a> </a>
<div class="list-group list-group-flush border-bottom scrollarea"> <div class="list-group list-group-flush border-bottom scrollarea">

4
site/content/docs/5.3/examples/sign-in/index.html
View File

@ -21,8 +21,8 @@ body_class: "d-flex align-items-center py-4 bg-body-tertiary"
</div> </div>
<div class="form-check text-start my-3"> <div class="form-check text-start my-3">
<input class="form-check-input" type="checkbox" value="remember-me" id="flexCheckDefault"> <input class="form-check-input" type="checkbox" value="remember-me" id="checkDefault">
<label class="form-check-label" for="flexCheckDefault"> <label class="form-check-label" for="checkDefault">
Remember me Remember me
</label> </label>
</div> </div>

2
site/content/docs/5.3/examples/starter-template/index.html
View File

@ -16,7 +16,7 @@ title: Starter Template
<div class="col-lg-8 mx-auto p-4 py-md-5"> <div class="col-lg-8 mx-auto p-4 py-md-5">
<header class="d-flex align-items-center pb-3 mb-5 border-bottom"> <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
<a href="/" class="d-flex align-items-center text-body-emphasis text-decoration-none"> <a href="/" class="d-flex align-items-center text-body-emphasis text-decoration-none">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg>
<span class="fs-4">Starter template</span> <span class="fs-4">Starter template</span>
</a> </a>
</header> </header>

60
site/content/docs/5.3/forms/checks-radios.md
View File

@ -19,14 +19,14 @@ Our checks use custom Bootstrap icons to indicate checked or indeterminate state
{{< example >}} {{< example >}}
<div class="form-check"> <div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault"> <input class="form-check-input" type="checkbox" value="" id="checkDefault">
<label class="form-check-label" for="flexCheckDefault"> <label class="form-check-label" for="checkDefault">
Default checkbox Default checkbox
</label> </label>
</div> </div>
<div class="form-check"> <div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked> <input class="form-check-input" type="checkbox" value="" id="checkChecked" checked>
<label class="form-check-label" for="flexCheckChecked"> <label class="form-check-label" for="checkChecked">
Checked checkbox Checked checkbox
</label> </label>
</div> </div>
@ -38,8 +38,8 @@ Checkboxes can utilize the `:indeterminate` pseudo class when manually set via J
{{< example class="bd-example-indeterminate" stackblitz_add_js="true" >}} {{< example class="bd-example-indeterminate" stackblitz_add_js="true" >}}
<div class="form-check"> <div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminate"> <input class="form-check-input" type="checkbox" value="" id="checkIndeterminate">
<label class="form-check-label" for="flexCheckIndeterminate"> <label class="form-check-label" for="checkIndeterminate">
Indeterminate checkbox Indeterminate checkbox
</label> </label>
</div> </div>
@ -51,20 +51,20 @@ Add the `disabled` attribute and the associated `<label>`s are automatically sty
{{< example class="bd-example-indeterminate" stackblitz_add_js="true" >}} {{< example class="bd-example-indeterminate" stackblitz_add_js="true" >}}
<div class="form-check"> <div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminateDisabled" disabled> <input class="form-check-input" type="checkbox" value="" id="checkIndeterminateDisabled" disabled>
<label class="form-check-label" for="flexCheckIndeterminateDisabled"> <label class="form-check-label" for="checkIndeterminateDisabled">
Disabled indeterminate checkbox Disabled indeterminate checkbox
</label> </label>
</div> </div>
<div class="form-check"> <div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDisabled" disabled> <input class="form-check-input" type="checkbox" value="" id="checkDisabled" disabled>
<label class="form-check-label" for="flexCheckDisabled"> <label class="form-check-label" for="checkDisabled">
Disabled checkbox Disabled checkbox
</label> </label>
</div> </div>
<div class="form-check"> <div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckCheckedDisabled" checked disabled> <input class="form-check-input" type="checkbox" value="" id="checkCheckedDisabled" checked disabled>
<label class="form-check-label" for="flexCheckCheckedDisabled"> <label class="form-check-label" for="checkCheckedDisabled">
Disabled checked checkbox Disabled checked checkbox
</label> </label>
</div> </div>
@ -74,14 +74,14 @@ Add the `disabled` attribute and the associated `<label>`s are automatically sty
{{< example >}} {{< example >}}
<div class="form-check"> <div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1"> <input class="form-check-input" type="radio" name="radioDefault" id="radioDefault1">
<label class="form-check-label" for="flexRadioDefault1"> <label class="form-check-label" for="radioDefault1">
Default radio Default radio
</label> </label>
</div> </div>
<div class="form-check"> <div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked> <input class="form-check-input" type="radio" name="radioDefault" id="radioDefault2" checked>
<label class="form-check-label" for="flexRadioDefault2"> <label class="form-check-label" for="radioDefault2">
Default checked radio Default checked radio
</label> </label>
</div> </div>
@ -93,14 +93,14 @@ Add the `disabled` attribute and the associated `<label>`s are automatically sty
{{< example >}} {{< example >}}
<div class="form-check"> <div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioDisabled" disabled> <input class="form-check-input" type="radio" name="radioDisabled" id="radioDisabled" disabled>
<label class="form-check-label" for="flexRadioDisabled"> <label class="form-check-label" for="radioDisabled">
Disabled radio Disabled radio
</label> </label>
</div> </div>
<div class="form-check"> <div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioCheckedDisabled" checked disabled> <input class="form-check-input" type="radio" name="radioDisabled" id="radioCheckedDisabled" checked disabled>
<label class="form-check-label" for="flexRadioCheckedDisabled"> <label class="form-check-label" for="radioCheckedDisabled">
Disabled checked radio Disabled checked radio
</label> </label>
</div> </div>
@ -112,20 +112,20 @@ A switch has the markup of a custom checkbox but uses the `.form-switch` class t
{{< example >}} {{< example >}}
<div class="form-check form-switch"> <div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault"> <input class="form-check-input" type="checkbox" role="switch" id="switchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label> <label class="form-check-label" for="switchCheckDefault">Default switch checkbox input</label>
</div> </div>
<div class="form-check form-switch"> <div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked> <input class="form-check-input" type="checkbox" role="switch" id="switchCheckChecked" checked>
<label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label> <label class="form-check-label" for="switchCheckChecked">Checked switch checkbox input</label>
</div> </div>
<div class="form-check form-switch"> <div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDisabled" disabled> <input class="form-check-input" type="checkbox" role="switch" id="switchCheckDisabled" disabled>
<label class="form-check-label" for="flexSwitchCheckDisabled">Disabled switch checkbox input</label> <label class="form-check-label" for="switchCheckDisabled">Disabled switch checkbox input</label>
</div> </div>
<div class="form-check form-switch"> <div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckCheckedDisabled" checked disabled> <input class="form-check-input" type="checkbox" role="switch" id="switchCheckCheckedDisabled" checked disabled>
<label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label> <label class="form-check-label" for="switchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
</div> </div>
{{< /example >}} {{< /example >}}
@ -222,8 +222,8 @@ Put your checkboxes, radios, and switches on the opposite side with the `.form-c
</div> </div>
<div class="form-check form-switch form-check-reverse"> <div class="form-check form-switch form-check-reverse">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckReverse"> <input class="form-check-input" type="checkbox" id="switchCheckReverse">
<label class="form-check-label" for="flexSwitchCheckReverse">Reverse switch checkbox input</label> <label class="form-check-label" for="switchCheckReverse">Reverse switch checkbox input</label>
</div> </div>
{{< /example >}} {{< /example >}}

11
site/content/docs/5.3/getting-started/download.md
View File

@ -100,6 +100,17 @@ Install Bootstrap in your Node.js powered apps with [the yarn package](https://y
yarn add bootstrap@{{< param "current_version" >}} yarn add bootstrap@{{< param "current_version" >}}
``` ```
{{< callout warning >}}
**Yarn 2+ (aka Yarn Berry) doesn't support the `node_modules` directory by default**: using our [Sass & JS example](https://github.com/twbs/examples/tree/main/sass-js) needs some adjustments:
```sh
yarn config set nodeLinker node-modules # Use the node_modules linker
touch yarn.lock # Create an empty yarn.lock file
yarn install # Install the dependencies
yarn start # Start the project
```
{{< /callout >}}
### RubyGems ### RubyGems
Install Bootstrap in your Ruby apps using [Bundler](https://bundler.io/) (**recommended**) and [RubyGems](https://rubygems.org/) by adding the following line to your [`Gemfile`](https://bundler.io/guides/gemfile.html): Install Bootstrap in your Ruby apps using [Bundler](https://bundler.io/) (**recommended**) and [RubyGems](https://rubygems.org/) by adding the following line to your [`Gemfile`](https://bundler.io/guides/gemfile.html):

2
site/content/docs/5.3/getting-started/javascript.md
View File

@ -24,7 +24,7 @@ A better alternative for those using this type of frameworks is to use a framewo
{{< /callout >}} {{< /callout >}}
- Vue: [BootstrapVue](https://bootstrap-vue.org/) (Bootstrap 4) - Vue: [BootstrapVue](https://bootstrap-vue.org/) (Bootstrap 4)
- Vue 3: [BootstrapVueNext](https://bootstrap-vue-next.github.io/bootstrap-vue-next/) (Bootstrap 5, currently in alpha) - Vue 3: [BootstrapVueNext](https://bootstrap-vue-next.github.io/bootstrap-vue-next/) (Bootstrap 5, currently in alpha)
- Angular: [ng-bootstrap](https://ng-bootstrap.github.io/) - Angular: [ng-bootstrap](https://ng-bootstrap.github.io/) or [ngx-bootstrap](https://valor-software.com/ngx-bootstrap)
## Using Bootstrap as a module ## Using Bootstrap as a module

4
site/content/docs/5.3/getting-started/parcel.md
View File

@ -13,6 +13,10 @@ thumbnail: guides/bootstrap-parcel@2x.png
**Want to skip to the end?** Download the source code and working demo for this guide from the [twbs/examples repository](https://github.com/twbs/examples/tree/main/parcel). You can also [open the example in StackBlitz](https://stackblitz.com/github/twbs/examples/tree/main/parcel?file=index.html) but not run it because Parcel isn't currently supported there. **Want to skip to the end?** Download the source code and working demo for this guide from the [twbs/examples repository](https://github.com/twbs/examples/tree/main/parcel). You can also [open the example in StackBlitz](https://stackblitz.com/github/twbs/examples/tree/main/parcel?file=index.html) but not run it because Parcel isn't currently supported there.
{{< /callout >}} {{< /callout >}}
## What is Parcel?
[Parcel](https://parceljs.org/) is a web application bundler designed to simplify the development process with a zero-configuration setup out of the box. It offers features found in more advanced bundlers while focusing on ease of use, making it ideal for developers seeking a quick start.
## Setup ## Setup
We're building a Parcel project with Bootstrap from scratch, so there are some prerequisites and upfront steps before we can really get started. This guide requires you to have Node.js installed and some familiarity with the terminal. We're building a Parcel project with Bootstrap from scratch, so there are some prerequisites and upfront steps before we can really get started. This guide requires you to have Node.js installed and some familiarity with the terminal.

2
site/content/docs/5.3/getting-started/rtl.md
View File

@ -175,7 +175,7 @@ Do you want to automate this process and address several edge cases involving bo
1. It is recommended that you add the `dir` attribute to the `html` element. This way, the entire page will be affected when you change the direction. Also, make sure you add the `lang` attribute accordingly. 1. It is recommended that you add the `dir` attribute to the `html` element. This way, the entire page will be affected when you change the direction. Also, make sure you add the `lang` attribute accordingly.
2. Having a single bundle with both directions will increase the size of the final stylesheet (on average, by 20%-30%): consider some [optimization]({{< docsref "/customize/optimize" >}}). 2. Having a single bundle with both directions will increase the size of the final stylesheet (on average, by 20%-30%): consider some [optimization]({{< docsref "/customize/optimize" >}}).
3. Take into account that PostCSS RTLCSS is not compatible with `/* rtl:remove */` directives because it doesn't remove any CSS rule. You should replace your `/* rtl:remove */`, `/* rtl:begin:remove */` and `/* rtl:end:remove */` directives with `/* rtl:ignore */`, `/* rtl:begin:ignore */` and `/* rtl:end:ignore */` directives respectively. These directives will ignore the rule and will not create an RTL counterpart (same result as the `remove` ones in RTLCSS). 3. Take into account that PostCSS RTLCSS is not compatible with `/* rtl:remove */` directives because it doesn't remove any CSS rule. You should replace your `/* rtl:remove */`, `/* rtl:begin:remove */` and `/* rtl:end:remove */` directives with `/* rtl:freeze */`, `/* rtl:begin:freeze */` and `/* rtl:end:freeze */` directives respectively. These directives will prefix the targeted rules or declarations with the current direction but will not create an RTL counterpart (same result as the `remove` ones in RTLCSS).
{{< /callout >}} {{< /callout >}}
## The breadcrumb case ## The breadcrumb case

4
site/content/docs/5.3/getting-started/vite.md
View File

@ -16,6 +16,10 @@ added:
**Want to skip to the end?** Download the source code and working demo for this guide from the [twbs/examples repository](https://github.com/twbs/examples/tree/main/vite). You can also [open the example in StackBlitz](https://stackblitz.com/github/twbs/examples/tree/main/vite?file=index.html) for live editing. **Want to skip to the end?** Download the source code and working demo for this guide from the [twbs/examples repository](https://github.com/twbs/examples/tree/main/vite). You can also [open the example in StackBlitz](https://stackblitz.com/github/twbs/examples/tree/main/vite?file=index.html) for live editing.
{{< /callout >}} {{< /callout >}}
## What is Vite?
[Vite](https://vite.dev/) is a modern frontend build tool designed for speed and simplicity. It provides an efficient and streamlined development experience, especially for modern JavaScript frameworks.
## Setup ## Setup
We're building a Vite project with Bootstrap from scratch, so there are some prerequisites and upfront steps before we can really get started. This guide requires you to have Node.js installed and some familiarity with the terminal. We're building a Vite project with Bootstrap from scratch, so there are some prerequisites and upfront steps before we can really get started. This guide requires you to have Node.js installed and some familiarity with the terminal.

4
site/content/docs/5.3/getting-started/webpack.md
View File

@ -13,6 +13,10 @@ thumbnail: guides/bootstrap-webpack@2x.png
**Want to skip to the end?** Download the source code and working demo for this guide from the [twbs/examples repository](https://github.com/twbs/examples/tree/main/webpack). You can also [open the example in StackBlitz](https://stackblitz.com/github/twbs/examples/tree/main/webpack?file=index.html) for live editing. **Want to skip to the end?** Download the source code and working demo for this guide from the [twbs/examples repository](https://github.com/twbs/examples/tree/main/webpack). You can also [open the example in StackBlitz](https://stackblitz.com/github/twbs/examples/tree/main/webpack?file=index.html) for live editing.
{{< /callout >}} {{< /callout >}}
## What is Webpack?
[Webpack](https://webpack.js.org/) is a JavaScript module bundler that processes modules and their dependencies to generate static assets. It simplifies managing complex web applications with multiple files and dependencies.
## Setup ## Setup
We're building a Webpack project with Bootstrap from scratch, so there are some prerequisites and upfront steps before we can really get started. This guide requires you to have Node.js installed and some familiarity with the terminal. We're building a Webpack project with Bootstrap from scratch, so there are some prerequisites and upfront steps before we can really get started. This guide requires you to have Node.js installed and some familiarity with the terminal.

2
site/content/docs/5.3/helpers/stacks.md
View File

@ -11,7 +11,7 @@ added:
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/). 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/).
{{< callout warning >}} {{< callout warning >}}
**Heads up!** Support for gap utilities with flexbox was recently added to Safari, so consider verifying your intended browser support. Grid layout should have no issues. [Read more](https://caniuse.com/flexbox-gap). **Heads up!** Support for gap utilities with flexbox isn't available in Safari prior to 14.5, so consider verifying your intended browser support. Grid layout should have no issues. [Read more](https://caniuse.com/flexbox-gap).
{{< /callout >}} {{< /callout >}}
## Vertical ## Vertical

24
site/content/docs/5.3/layout/columns.md
View File

@ -203,7 +203,7 @@ You may also apply this break at specific breakpoints with our [responsive displ
### Order classes ### Order classes
Use `.order-` classes for controlling the **visual order** of your content. These classes are responsive, so you can set the `order` by breakpoint (e.g., `.order-1.order-md-2`). Includes support for `1` through `5` across all six grid tiers. If you need more `.order-*` classes, you can modify the default number via Sass variable. Use `.order-` classes for controlling the **visual order** of your content. These classes are responsive, so you can set the `order` by breakpoint (e.g., `.order-1.order-md-2`). Includes support for `1` through `5` across all six grid tiers.
{{< example class="bd-example-row" >}} {{< example class="bd-example-row" >}}
<div class="container text-center"> <div class="container text-center">
@ -239,6 +239,28 @@ There are also responsive `.order-first` and `.order-last` classes that change t
</div> </div>
{{< /example >}} {{< /example >}}
If you need more `.order-*` classes, you can add new ones by modifying our `$utilities` Sass map. [Read our Sass maps and loops docs]({{< docsref "/customize/sass#maps-and-loops" >}}) or [our Modify utilities docs]({{< docsref "/utilities/api#modify-utilities" >}}) for details.
```scss
$utilities: map-merge(
$utilities,
(
"order": map-merge(
map-get($utilities, "order"),
(
values: map-merge(
map-get(map-get($utilities, "order"), "values"),
(
6: 6, // Add a new `.order-{breakpoint}-6` utility
last: 7 // Change the `.order-{breakpoint}-last` utility to use the next number
)
),
),
),
)
);
```
### Offsetting columns ### Offsetting columns
You can offset grid columns in two ways: our responsive `.offset-` grid classes and our [margin utilities]({{< docsref "/utilities/spacing" >}}). Grid classes are sized to match columns while margins are more useful for quick layouts where the width of the offset is variable. You can offset grid columns in two ways: our responsive `.offset-` grid classes and our [margin utilities]({{< docsref "/utilities/spacing" >}}). Grid classes are sized to match columns while margins are more useful for quick layouts where the width of the offset is variable.

2
site/content/docs/5.3/layout/css-grid.md
View File

@ -149,7 +149,7 @@ Similar to our default grid system, our CSS Grid allows for easy nesting of `.gr
In practice this allows for more complex and custom layouts when compared to our default grid system. In practice this allows for more complex and custom layouts when compared to our default grid system.
{{< example class="bd-example-cssgrid" >}} {{< example class="bd-example-cssgrid" >}}
<div class="grid text-center" style="--bs-columns: 3;"> <div class="grid text-center overflow-x-auto" style="--bs-columns: 3;">
<div> <div>
First auto-column First auto-column
<div class="grid"> <div class="grid">

4
site/content/docs/5.3/migration.md
View File

@ -445,7 +445,7 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co
- Columns no longer have `position: relative` applied, so you may have to add `.position-relative` to some elements to restore that behavior. - Columns no longer have `position: relative` applied, so you may have to add `.position-relative` to some elements to restore that behavior.
- <span class="badge text-bg-danger">Breaking</span> Dropped several `.order-*` classes that often went unused. We now only provide `.order-1` to `.order-5` out of the box. - <span class="badge text-bg-danger">Breaking</span> Dropped several `.order-*` classes that often went unused. We now only provide `.order-0` to `.order-5` out of the box.
- <span class="badge text-bg-danger">Breaking</span> Dropped the `.media` component as it can be easily replicated with utilities. [See #28265](https://github.com/twbs/bootstrap/pull/28265) and the [flex utilities page for an example]({{< docsref "/utilities/flex#media-object" >}}). - <span class="badge text-bg-danger">Breaking</span> Dropped the `.media` component as it can be easily replicated with utilities. [See #28265](https://github.com/twbs/bootstrap/pull/28265) and the [flex utilities page for an example]({{< docsref "/utilities/flex#media-object" >}}).
@ -736,3 +736,5 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co
- The default value for the `fallbackPlacements` is changed to `['top', 'right', 'bottom', 'left']` for better placement of Popper elements. **Applies to dropdowns, popovers, and tooltips.** - The default value for the `fallbackPlacements` is changed to `['top', 'right', 'bottom', 'left']` for better placement of Popper elements. **Applies to dropdowns, popovers, and tooltips.**
- Removed underscore from public static methods like `_getInstance()` → `getInstance()`. - Removed underscore from public static methods like `_getInstance()` → `getInstance()`.
- Removed `util.js`, with its functionality now integrated into individual plugins. If you previously included `util.js` manually, you can safely remove it, as it is no longer needed. Each plugin now contains only the utilities it requires, enhancing modularity and reducing dependencies.

8
site/content/docs/5.3/utilities/api.md
View File

@ -452,7 +452,8 @@ You can enable responsive classes for an existing set of utilities that are not
@import "bootstrap/scss/utilities"; @import "bootstrap/scss/utilities";
$utilities: map-merge( $utilities: map-merge(
$utilities, ( $utilities,
(
"border": map-merge( "border": map-merge(
map-get($utilities, "border"), map-get($utilities, "border"),
( responsive: true ), ( responsive: true ),
@ -508,7 +509,8 @@ Missing v4 utilities, or used to another naming convention? The utilities API ca
@import "bootstrap/scss/utilities"; @import "bootstrap/scss/utilities";
$utilities: map-merge( $utilities: map-merge(
$utilities, ( $utilities,
(
"margin-start": map-merge( "margin-start": map-merge(
map-get($utilities, "margin-start"), map-get($utilities, "margin-start"),
( class: ml ), ( class: ml ),
@ -574,13 +576,11 @@ $utilities: map-merge(
( (
// Remove the `width` utility // Remove the `width` utility
"width": null, "width": null,
// Make an existing utility responsive // Make an existing utility responsive
"border": map-merge( "border": map-merge(
map-get($utilities, "border"), map-get($utilities, "border"),
( responsive: true ), ( responsive: true ),
), ),
// Add new utilities // Add new utilities
"cursor": ( "cursor": (
property: cursor, property: cursor,

2
site/content/docs/5.3/utilities/display.md
View File

@ -55,7 +55,7 @@ For faster mobile-friendly development, use responsive display classes for showi
To hide elements simply use the `.d-none` class or one of the `.d-{sm,md,lg,xl,xxl}-none` classes for any responsive screen variation. To hide elements simply use the `.d-none` class or one of the `.d-{sm,md,lg,xl,xxl}-none` classes for any responsive screen variation.
To show an element only on a given interval of screen sizes you can combine one `.d-*-none` class with a `.d-*-*` class, for example `.d-none .d-md-block .d-xl-none .d-xxl-none` will hide the element for all screen sizes except on medium and large devices. To show an element only on a given interval of screen sizes you can combine one `.d-*-none` class with a `.d-*-*` class, for example `.d-none .d-md-block .d-xl-none` will hide the element for all screen sizes except on medium and large devices.
{{< bs-table >}} {{< bs-table >}}
| Screen size | Class | | Screen size | Class |

2
site/content/docs/5.3/utilities/position.md
View File

@ -94,7 +94,7 @@ Here are some real life examples of these classes:
</button> </button>
<div class="position-relative py-2 px-4 text-bg-secondary border border-secondary rounded-pill"> <div class="position-relative py-2 px-4 text-bg-secondary border border-secondary rounded-pill">
Marker <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-1" fill="var(--bs-secondary)" xmlns="http://www.w3.org/2000/svg"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg> Marker <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-1" fill="var(--bs-secondary)" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>
</div> </div>
<button type="button" class="btn btn-primary position-relative"> <button type="button" class="btn btn-primary position-relative">

30
site/content/docs/5.3/utilities/spacing.md
View File

@ -103,11 +103,11 @@ The syntax is nearly the same as the default, positive margin utilities, but wit
When using `display: grid` or `display: flex`, you can make use of `gap` utilities on the parent element. This can save on having to add margin utilities to individual children of a grid or flex container. Gap utilities are responsive by default, and are generated via our utilities API, based on the `$spacers` Sass map. When using `display: grid` or `display: flex`, you can make use of `gap` utilities on the parent element. This can save on having to add margin utilities to individual children of a grid or flex container. Gap utilities are responsive by default, and are generated via our utilities API, based on the `$spacers` Sass map.
{{< example class="bd-example-cssgrid" >}} {{< example class="bd-example-cssgrid" >}}
<div class="grid gap-3"> <div style="grid-template-columns: 1fr 1fr;" class="d-grid gap-3">
<div class="p-2 g-col-6">Grid item 1</div> <div class="p-2">Grid item 1</div>
<div class="p-2 g-col-6">Grid item 2</div> <div class="p-2">Grid item 2</div>
<div class="p-2 g-col-6">Grid item 3</div> <div class="p-2">Grid item 3</div>
<div class="p-2 g-col-6">Grid item 4</div> <div class="p-2">Grid item 4</div>
</div> </div>
{{< /example >}} {{< /example >}}
@ -118,11 +118,11 @@ Support includes responsive options for all of Bootstrap's grid breakpoints, as
`row-gap` sets the vertical space between children items in the specified container. `row-gap` sets the vertical space between children items in the specified container.
{{< example class="bd-example-cssgrid" >}} {{< example class="bd-example-cssgrid" >}}
<div class="grid gap-0 row-gap-3"> <div style="grid-template-columns: 1fr 1fr;" class="d-grid gap-0 row-gap-3">
<div class="p-2 g-col-6">Grid item 1</div> <div class="p-2">Grid item 1</div>
<div class="p-2 g-col-6">Grid item 2</div> <div class="p-2">Grid item 2</div>
<div class="p-2 g-col-6">Grid item 3</div> <div class="p-2">Grid item 3</div>
<div class="p-2 g-col-6">Grid item 4</div> <div class="p-2">Grid item 4</div>
</div> </div>
{{< /example >}} {{< /example >}}
@ -131,11 +131,11 @@ Support includes responsive options for all of Bootstrap's grid breakpoints, as
`column-gap` sets the horizontal space between children items in the specified container. `column-gap` sets the horizontal space between children items in the specified container.
{{< example class="bd-example-cssgrid" >}} {{< example class="bd-example-cssgrid" >}}
<div class="grid gap-0 column-gap-3"> <div style="grid-template-columns: 1fr 1fr;" class="d-grid gap-0 column-gap-3">
<div class="p-2 g-col-6">Grid item 1</div> <div class="p-2">Grid item 1</div>
<div class="p-2 g-col-6">Grid item 2</div> <div class="p-2">Grid item 2</div>
<div class="p-2 g-col-6">Grid item 3</div> <div class="p-2">Grid item 3</div>
<div class="p-2 g-col-6">Grid item 4</div> <div class="p-2">Grid item 4</div>
</div> </div>
{{< /example >}} {{< /example >}}

2
site/layouts/partials/docs-versions.html
View File

@ -23,7 +23,7 @@
<li> <li>
<a class="dropdown-item d-flex align-items-center justify-content-between active" aria-current="true" href="{{ if .IsHome }}/{{ else }}/docs/{{ .Site.Params.docs_version }}/{{ $versions_link }}{{ end }}"> <a class="dropdown-item d-flex align-items-center justify-content-between active" aria-current="true" href="{{ if .IsHome }}/{{ else }}/docs/{{ .Site.Params.docs_version }}/{{ $versions_link }}{{ end }}">
Latest ({{ .Site.Params.docs_version }}.x) Latest ({{ .Site.Params.docs_version }}.x)
<svg class="bi"><use xlink:href="#check2"></use></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#check2"></use></svg>
</a> </a>
</li> </li>
<li> <li>

14
site/layouts/partials/examples/main.html
View File

@ -14,11 +14,11 @@
{{- $len := len $entry.examples -}} {{- $len := len $entry.examples -}}
{{ if (eq $i 0) }}<div class="row">{{ end }} {{ if (eq $i 0) }}<div class="row">{{ end }}
{{ if $entry.external -}} {{ if $entry.external -}}
<div class="col-md-6 col-lg-4 mb-3 d-flex gap-3"> <article class="col-md-6 col-lg-4 mb-3 d-flex gap-3">
<svg class="bi fs-5 flex-shrink-0 mt-1" aria-hidden="true"><use xlink:href="#box-seam"></use></svg> <svg class="bi fs-5 flex-shrink-0 mt-1" aria-hidden="true"><use xlink:href="#box-seam"></use></svg>
<div> <div>
<h3 class="h5 mb-1"> <h3 class="h5 mb-1">
<a class="d-block link-offset-1" href="{{ urls.JoinPath $.Site.Params.github_org $example.url }}" target="_blank" rel="noopener"> <a class="d-block link-offset-1" href="{{ urls.JoinPath $.Site.Params.github_org $example.url }}" target="_blank" rel="noopener" id="starter-{{ $i }}">
{{ $example.name }} {{ $example.name }}
</a> </a>
</h3> </h3>
@ -26,15 +26,15 @@
<p> <p>
{{- $indexPath := default "index.html" $example.indexPath -}} {{- $indexPath := default "index.html" $example.indexPath -}}
{{- $stackBlitzUrl := printf "%s%s%s" (urls.JoinPath "https://stackblitz.com/github/twbs" $example.url) "?file=" ($indexPath | urlquery) }} {{- $stackBlitzUrl := printf "%s%s%s" (urls.JoinPath "https://stackblitz.com/github/twbs" $example.url) "?file=" ($indexPath | urlquery) }}
<a class="icon-link small link-secondary link-offset-1" href="{{ $stackBlitzUrl }}" target="_blank" rel="noopener"> <a class="icon-link small link-secondary link-offset-1" href="{{ $stackBlitzUrl }}" target="_blank" rel="noopener" aria-labelledby="edit-{{ $i }} starter-{{ $i }}">
<svg class="bi flex-shrink-0" aria-hidden="true"><use xlink:href="#lightning-charge-fill"></use></svg> <svg class="bi flex-shrink-0" aria-hidden="true"><use xlink:href="#lightning-charge-fill"></use></svg>
Edit in StackBlitz <span id="edit-{{ $i }}">Edit in StackBlitz</span>
</a> </a>
</p> </p>
</div> </div>
</div> </article>
{{ else -}} {{ else -}}
<div class="col-sm-6 col-md-3 mb-3"> <article class="col-sm-6 col-md-3 mb-3">
{{- $exampleNameUrlized := $example.name | urlize -}} {{- $exampleNameUrlized := $example.name | urlize -}}
{{- $exampleUrl := urls.JoinPath "/docs" $.Site.Params.docs_version "/examples" $exampleNameUrlized "/" }} {{- $exampleUrl := urls.JoinPath "/docs" $.Site.Params.docs_version "/examples" $exampleNameUrlized "/" }}
<a class="d-block link-offset-1" href="{{ $exampleUrl }}"{{ if in $example.name "RTL" }} hreflang="ar"{{ end }}> <a class="d-block link-offset-1" href="{{ $exampleUrl }}"{{ if in $example.name "RTL" }} hreflang="ar"{{ end }}>
@ -55,7 +55,7 @@
</h3> </h3>
</a> </a>
<p class="text-body-secondary">{{ $example.description }}</p> <p class="text-body-secondary">{{ $example.description }}</p>
</div> </article>
{{- end }} {{- end }}
{{ if (eq (add $i 1) $len) }}</div>{{ end -}} {{ if (eq (add $i 1) $len) }}</div>{{ end -}}
{{ end -}} {{ end -}}

4
site/layouts/partials/home/components-utilities.html
View File

@ -52,7 +52,7 @@
</li> </li>
</ul> </ul>
`) "html" "" }} `) "html" "" }}
<p class="d-flex justify-content-start mb-md-0"> <p class="d-flex mb-md-0">
<a href="/docs/{{ .Site.Params.docs_version }}/examples/#snippets" class="icon-link icon-link-hover fw-semibold"> <a href="/docs/{{ .Site.Params.docs_version }}/examples/#snippets" class="icon-link icon-link-hover fw-semibold">
Explore customized components Explore customized components
<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
@ -77,7 +77,7 @@ $utilities: map-merge(
); );
`) "scss" "" }} `) "scss" "" }}
<p class="d-flex justify-content-start mb-md-0"> <p class="d-flex mb-md-0">
<a href="/docs/{{ .Site.Params.docs_version }}/utilities/api/" class="icon-link icon-link-hover fw-semibold mb-3"> <a href="/docs/{{ .Site.Params.docs_version }}/utilities/api/" class="icon-link icon-link-hover fw-semibold mb-3">
Explore the utility API Explore the utility API
<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>

2
site/layouts/partials/home/css-variables.html
View File

@ -7,7 +7,7 @@
<p class="lead fw-normal"> <p class="lead fw-normal">
Bootstrap 5 is evolving with each release to better utilize CSS variables for global theme styles, individual components, and even utilities. We provide dozens of variables for colors, font styles, and more at a <code>:root</code> level for use anywhere. On components and utilities, CSS variables are scoped to the relevant class and can easily be modified. Bootstrap 5 is evolving with each release to better utilize CSS variables for global theme styles, individual components, and even utilities. We provide dozens of variables for colors, font styles, and more at a <code>:root</code> level for use anywhere. On components and utilities, CSS variables are scoped to the relevant class and can easily be modified.
</p> </p>
<p class="d-flex align-items-start flex-column lead fw-normal mb-0"> <p class="d-flex flex-column lead fw-normal mb-0">
<a href="/docs/{{ .Site.Params.docs_version }}/customize/css-variables/" class="icon-link icon-link-hover fw-semibold mb-3"> <a href="/docs/{{ .Site.Params.docs_version }}/customize/css-variables/" class="icon-link icon-link-hover fw-semibold mb-3">
Learn more about CSS variables Learn more about CSS variables
<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>

2
site/layouts/partials/home/customize.html
View File

@ -6,7 +6,7 @@
<p class="lead fw-normal"> <p class="lead fw-normal">
Bootstrap utilizes Sass for a modular and customizable architecture. Import only the components you need, enable global options like gradients and shadows, and write your own CSS with our variables, maps, functions, and mixins. Bootstrap utilizes Sass for a modular and customizable architecture. Import only the components you need, enable global options like gradients and shadows, and write your own CSS with our variables, maps, functions, and mixins.
</p> </p>
<p class="d-flex justify-content-start lead fw-normal"> <p class="d-flex lead fw-normal">
<a href="/docs/{{ .Site.Params.docs_version }}/customize/overview/" class="icon-link icon-link-hover fw-semibold"> <a href="/docs/{{ .Site.Params.docs_version }}/customize/overview/" class="icon-link icon-link-hover fw-semibold">
Learn more about customizing Learn more about customizing
<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>

2
site/layouts/partials/home/get-started.html
View File

@ -6,7 +6,7 @@
<p class="lead fw-normal"> <p class="lead fw-normal">
Jump right into building with Bootstrap—use the CDN, install it via package manager, or download the source code. Jump right into building with Bootstrap—use the CDN, install it via package manager, or download the source code.
</p> </p>
<p class="d-flex justify-content-md-start justify-content-md-center lead fw-normal"> <p class="d-flex justify-content-md-center lead fw-normal">
<a href="/docs/{{ .Site.Params.docs_version }}/getting-started/download/" class="icon-link icon-link-hover fw-semibold ps-md-4"> <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/download/" class="icon-link icon-link-hover fw-semibold ps-md-4">
Read installation docs Read installation docs
<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>

2
site/layouts/partials/home/icons.html
View File

@ -7,7 +7,7 @@
<p class="lead fw-normal"> <p class="lead fw-normal">
<a href="{{ .Site.Params.icons }}">Bootstrap Icons</a> is an open source SVG icon library featuring over 1,800 glyphs, with more added every release. They're designed to work in any project, whether you use Bootstrap itself or not. Use them as SVGs or icon fonts—both options give you vector scaling and easy customization via CSS. <a href="{{ .Site.Params.icons }}">Bootstrap Icons</a> is an open source SVG icon library featuring over 1,800 glyphs, with more added every release. They're designed to work in any project, whether you use Bootstrap itself or not. Use them as SVGs or icon fonts—both options give you vector scaling and easy customization via CSS.
</p> </p>
<p class="d-flex justify-content-start lead fw-normal mb-md-0"> <p class="d-flex lead fw-normal mb-md-0">
<a href="{{ .Site.Params.icons }}" class="icon-link icon-link-hover fw-semibold"> <a href="{{ .Site.Params.icons }}" class="icon-link icon-link-hover fw-semibold">
Get Bootstrap Icons Get Bootstrap Icons
<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>

2
site/layouts/partials/home/plugins.html
View File

@ -7,7 +7,7 @@
<p class="lead fw-normal"> <p class="lead fw-normal">
Add toggleable hidden elements, modals and offcanvas menus, popovers and tooltips, and so much more—all without jQuery. Bootstrap's JavaScript is HTML-first, meaning most plugins are added with <code>data</code> attributes in your HTML. Need more control? Include individual plugins programmatically. Add toggleable hidden elements, modals and offcanvas menus, popovers and tooltips, and so much more—all without jQuery. Bootstrap's JavaScript is HTML-first, meaning most plugins are added with <code>data</code> attributes in your HTML. Need more control? Include individual plugins programmatically.
</p> </p>
<p class="d-flex justify-content-start lead fw-normal mb-md-0"> <p class="d-flex lead fw-normal mb-md-0">
<a href="/docs/{{ .Site.Params.docs_version }}/getting-started/javascript/" class="icon-link icon-link-hover fw-semibold"> <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/javascript/" class="icon-link icon-link-hover fw-semibold">
Learn more about Bootstrap JavaScript Learn more about Bootstrap JavaScript
<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>

2
site/layouts/partials/home/themes.html
View File

@ -7,7 +7,7 @@
<p class="lead fw-normal"> <p class="lead fw-normal">
Take Bootstrap to the next level with premium themes from the <a href="{{ .Site.Params.themes }}">official Bootstrap Themes marketplace</a>. Themes are built on Bootstrap as their own extended frameworks, rich with new components and plugins, documentation, and powerful build tools. Take Bootstrap to the next level with premium themes from the <a href="{{ .Site.Params.themes }}">official Bootstrap Themes marketplace</a>. Themes are built on Bootstrap as their own extended frameworks, rich with new components and plugins, documentation, and powerful build tools.
</p> </p>
<p class="d-flex justify-content-start lead fw-normal mb-md-0"> <p class="d-flex lead fw-normal mb-md-0">
<a href="{{ .Site.Params.themes }}" class="icon-link icon-link-hover fw-semibold"> <a href="{{ .Site.Params.themes }}" class="icon-link icon-link-hover fw-semibold">
Browse Bootstrap Themes Browse Bootstrap Themes
<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>

2
site/layouts/partials/icons/hamburger.svg
View File

@ -1,3 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg"{{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }}{{ with .class }} class="{{ . }}"{{ end }} fill="currentColor" viewBox="0 0 16 16"> <svg xmlns="http://www.w3.org/2000/svg"{{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }}{{ with .class }} class="{{ . }}"{{ end }} fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
<path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/> <path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 428 B

After

Width:  |  Height:  |  Size: 447 B

14
site/layouts/partials/theme-toggler.html
View File

@ -6,29 +6,29 @@
data-bs-toggle="dropdown" data-bs-toggle="dropdown"
{{ if not $isExamples }}data-bs-display="static"{{ end }} {{ if not $isExamples }}data-bs-display="static"{{ end }}
aria-label="Toggle theme (auto)"> aria-label="Toggle theme (auto)">
<svg class="bi my-1 theme-icon-active"><use href="#circle-half"></use></svg> <svg class="bi my-1 theme-icon-active" aria-hidden="true"><use href="#circle-half"></use></svg>
<span class="{{ if $isExamples }}visually-hidden{{ else }}d-lg-none ms-2{{ end }}" id="bd-theme-text">Toggle theme</span> <span class="{{ if $isExamples }}visually-hidden{{ else }}d-lg-none ms-2{{ end }}" id="bd-theme-text">Toggle theme</span>
</button> </button>
<ul class="dropdown-menu dropdown-menu-end{{ if $isExamples }} shadow{{ end }}" aria-labelledby="bd-theme-text"> <ul class="dropdown-menu dropdown-menu-end{{ if $isExamples }} shadow{{ end }}" aria-labelledby="bd-theme-text">
<li> <li>
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false"> <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false">
<svg class="bi me-2 opacity-50"><use href="#sun-fill"></use></svg> <svg class="bi me-2 opacity-50" aria-hidden="true"><use href="#sun-fill"></use></svg>
Light Light
<svg class="bi ms-auto d-none"><use href="#check2"></use></svg> <svg class="bi ms-auto d-none" aria-hidden="true"><use href="#check2"></use></svg>
</button> </button>
</li> </li>
<li> <li>
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false"> <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
<svg class="bi me-2 opacity-50"><use href="#moon-stars-fill"></use></svg> <svg class="bi me-2 opacity-50" aria-hidden="true"><use href="#moon-stars-fill"></use></svg>
Dark Dark
<svg class="bi ms-auto d-none"><use href="#check2"></use></svg> <svg class="bi ms-auto d-none" aria-hidden="true"><use href="#check2"></use></svg>
</button> </button>
</li> </li>
<li> <li>
<button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true"> <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true">
<svg class="bi me-2 opacity-50"><use href="#circle-half"></use></svg> <svg class="bi me-2 opacity-50" aria-hidden="true"><use href="#circle-half"></use></svg>
Auto Auto
<svg class="bi ms-auto d-none"><use href="#check2"></use></svg> <svg class="bi ms-auto d-none" aria-hidden="true"><use href="#check2"></use></svg>
</button> </button>
</li> </li>
</ul> </ul>

2
site/static/docs/5.3/assets/js/color-modes.js
View File

@ -1,6 +1,6 @@
/*! /*!
* Color mode toggler for Bootstrap's docs (https://getbootstrap.com/) * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
* Copyright 2011-2024 The Bootstrap Authors * Copyright 2011-2025 The Bootstrap Authors
* Licensed under the Creative Commons Attribution 3.0 Unported License. * Licensed under the Creative Commons Attribution 3.0 Unported License.
*/ */