diff options
Diffstat (limited to 'site/content/docs/5.1')
30 files changed, 189 insertions, 93 deletions
diff --git a/site/content/docs/5.1/components/navbar.md b/site/content/docs/5.1/components/navbar.md index f6dbb8e612..8d245d10f9 100644 --- a/site/content/docs/5.1/components/navbar.md +++ b/site/content/docs/5.1/components/navbar.md @@ -65,7 +65,7 @@ Here's an example of all the sub-components included in a responsive light-theme <a class="nav-link disabled">Disabled</a> </li> </ul> - <form class="d-flex"> + <form class="d-flex" role="search"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success" type="submit">Search</button> </form> @@ -74,7 +74,7 @@ Here's an example of all the sub-components included in a responsive light-theme </nav> {{< /example >}} -This example uses [background]({{< docsref "/utilities/background" >}}) (`bg-light`) and [spacing]({{< docsref "/utilities/spacing" >}}) (`my-2`, `my-lg-0`, `me-sm-0`, `my-sm-0`) utility classes. +This example uses [background]({{< docsref "/utilities/background" >}}) (`bg-light`) and [spacing]({{< docsref "/utilities/spacing" >}}) (`me-auto`, `mb-2`, `mb-lg-0`, `me-2`) utility classes. ### Brand @@ -228,7 +228,7 @@ Place various form controls and components within a navbar: {{< example >}} <nav class="navbar navbar-light bg-light"> <div class="container-fluid"> - <form class="d-flex"> + <form class="d-flex" role="search"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success" type="submit">Search</button> </form> @@ -242,7 +242,7 @@ Immediate child elements of `.navbar` use flex layout and will default to `justi <nav class="navbar navbar-light bg-light"> <div class="container-fluid"> <a class="navbar-brand">Navbar</a> - <form class="d-flex"> + <form class="d-flex" role="search"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success" type="submit">Search</button> </form> @@ -343,7 +343,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl <a class="nav-link" href="#">About</a> </li> </ul> - <form class="d-flex"> + <form class="d-flex" role="search"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-light" type="submit">Search</button> </form> @@ -372,7 +372,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl <a class="nav-link" href="#">About</a> </li> </ul> - <form class="d-flex"> + <form class="d-flex" role="search"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-light" type="submit">Search</button> </form> @@ -401,7 +401,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl <a class="nav-link" href="#">About</a> </li> </ul> - <form class="d-flex"> + <form class="d-flex" role="search"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-primary" type="submit">Search</button> </form> @@ -524,7 +524,7 @@ Here's an example navbar using `.navbar-nav-scroll` with `style="--bs-scroll-hei <a class="nav-link disabled">Link</a> </li> </ul> - <form class="d-flex"> + <form class="d-flex" role="search"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success" type="submit">Search</button> </form> @@ -564,7 +564,7 @@ With no `.navbar-brand` shown at the smallest breakpoint: <a class="nav-link disabled">Disabled</a> </li> </ul> - <form class="d-flex"> + <form class="d-flex" role="search"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success" type="submit">Search</button> </form> @@ -594,7 +594,7 @@ With a brand name shown on the left and toggler on the right: <a class="nav-link disabled">Disabled</a> </li> </ul> - <form class="d-flex"> + <form class="d-flex" role="search"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success" type="submit">Search</button> </form> @@ -624,7 +624,7 @@ With a toggler on the left and brand name on the right: <a class="nav-link disabled">Disabled</a> </li> </ul> - <form class="d-flex"> + <form class="d-flex" role="search"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success" type="submit">Search</button> </form> @@ -695,7 +695,7 @@ In the example below, to create an offcanvas navbar that is always collapsed acr </ul> </li> </ul> - <form class="d-flex"> + <form class="d-flex" role="search"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success" type="submit">Search</button> </form> diff --git a/site/content/docs/5.1/components/offcanvas.md b/site/content/docs/5.1/components/offcanvas.md index a5bf9426fe..fd18fe5c98 100644 --- a/site/content/docs/5.1/components/offcanvas.md +++ b/site/content/docs/5.1/components/offcanvas.md @@ -8,7 +8,7 @@ toc: true ## How it works -Offcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, or bottom edge of the viewport. Buttons or anchors are used as triggers that are attached to specific elements you toggle, and `data` attributes are used to invoke our JavaScript. +Offcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, top, or bottom edge of the viewport. Buttons or anchors are used as triggers that are attached to specific elements you toggle, and `data` attributes are used to invoke our JavaScript. - Offcanvas shares some of the same JavaScript code as modals. Conceptually, they are quite similar, but they are separate plugins. - Similarly, some [source Sass](#sass) variables for offcanvas's styles and dimensions are inherited from the modal's variables. @@ -95,7 +95,7 @@ Try the top, right, and bottom examples out below. <div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel"> <div class="offcanvas-header"> - <h5 id="offcanvasTopLabel">Offcanvas top</h5> + <h5 class="offcanvas-title" id="offcanvasTopLabel">Offcanvas top</h5> <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button> </div> <div class="offcanvas-body"> @@ -109,7 +109,7 @@ Try the top, right, and bottom examples out below. <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel"> <div class="offcanvas-header"> - <h5 id="offcanvasRightLabel">Offcanvas right</h5> + <h5 class="offcanvas-title" id="offcanvasRightLabel">Offcanvas right</h5> <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button> </div> <div class="offcanvas-body"> @@ -188,6 +188,7 @@ The offcanvas plugin utilizes a few classes and attributes to handle the heavy l - `.offcanvas.show` shows the content - `.offcanvas-start` hides the offcanvas on the left - `.offcanvas-end` hides the offcanvas on the right +- `.offcanvas-top` hides the offcanvas on the top - `.offcanvas-bottom` hides the offcanvas on the bottom Add a dismiss button with the `data-bs-dismiss="offcanvas"` attribute, which triggers the JavaScript functionality. Be sure to use the `<button>` element with it for proper behavior across all devices. diff --git a/site/content/docs/5.1/components/popovers.md b/site/content/docs/5.1/components/popovers.md index dc1c985d3f..0acc76a0a2 100644 --- a/site/content/docs/5.1/components/popovers.md +++ b/site/content/docs/5.1/components/popovers.md @@ -368,6 +368,21 @@ Removes the ability for an element's popover to be shown. The popover will only myPopover.disable() ``` +#### setContent + +Gives a way to change the popover's content after its initialization. + +```js +myPopover.setContent({ + '.popover-header': 'another title', + '.popover-body': 'another content' +}) +``` + +{{< callout info >}} +The `setContent` method accepts an `object` argument, where each property-key is a valid `string` selector within the popover template, and each related property-value can be `string` | `element` | `function` | `null` +{{< /callout >}} + #### toggleEnabled Toggles the ability for an element's popover to be shown or hidden. diff --git a/site/content/docs/5.1/components/tooltips.md b/site/content/docs/5.1/components/tooltips.md index caa2a2d0c0..16501a3c96 100644 --- a/site/content/docs/5.1/components/tooltips.md +++ b/site/content/docs/5.1/components/tooltips.md @@ -392,6 +392,17 @@ Removes the ability for an element's tooltip to be shown. The tooltip will only tooltip.disable() ``` +#### setContent + +Gives a way to change the tooltip's content after its initialization. + +```js +tooltip.setContent({ '.tooltip-inner': 'another title' }) +``` +{{< callout info >}} +The `setContent` method accepts an `object` argument, where each property-key is a valid `string` selector within the popover template, and each related property-value can be `string` | `element` | `function` | `null` +{{< /callout >}} + #### toggleEnabled Toggles the ability for an element's tooltip to be shown or hidden. diff --git a/site/content/docs/5.1/content/images.md b/site/content/docs/5.1/content/images.md index 9d13ef4fb8..b55e7a2b87 100644 --- a/site/content/docs/5.1/content/images.md +++ b/site/content/docs/5.1/content/images.md @@ -48,7 +48,7 @@ Align images with the [helper float classes]({{< docsref "/utilities/float" >}}) If you are using the `<picture>` element to specify multiple `<source>` elements for a specific `<img>`, make sure to add the `.img-*` classes to the `<img>` and not to the `<picture>` tag. ```html -<picture> +<picture> <source srcset="..." type="image/svg+xml"> <img src="..." class="img-fluid img-thumbnail" alt="..."> </picture> diff --git a/site/content/docs/5.1/content/tables.md b/site/content/docs/5.1/content/tables.md index 6f6e025dc6..645145ba4c 100644 --- a/site/content/docs/5.1/content/tables.md +++ b/site/content/docs/5.1/content/tables.md @@ -252,7 +252,7 @@ Add `.table-sm` to make any `.table` more compact by cutting all cell `padding` ## Vertical alignment -Table cells of `<thead>` are always vertical aligned to the bottom. Table cells in `<tbody>` inherit their alignment from `<table>` and are aligned to the the top by default. Use the [vertical align]({{< docsref "/utilities/vertical-align" >}}) classes to re-align where needed. +Table cells of `<thead>` are always vertical aligned to the bottom. Table cells in `<tbody>` inherit their alignment from `<table>` and are aligned to the top by default. Use the [vertical align]({{< docsref "/utilities/vertical-align" >}}) classes to re-align where needed. <div class="bd-example"> <div class="table-responsive"> @@ -786,4 +786,4 @@ Use `.table-responsive{-sm|-md|-lg|-xl|-xxl}` as needed to create responsive tab ### Customizing - The factor variables (`$table-striped-bg-factor`, `$table-active-bg-factor` & `$table-hover-bg-factor`) are used to determine the contrast in table variants. -- Apart from the light & dark table variants, theme colors are lightened by the `$table-bg-level` variable. +- Apart from the light & dark table variants, theme colors are lightened by the `$table-bg-scale` variable. diff --git a/site/content/docs/5.1/content/typography.md b/site/content/docs/5.1/content/typography.md index 7d41f04dee..44c65252da 100644 --- a/site/content/docs/5.1/content/typography.md +++ b/site/content/docs/5.1/content/typography.md @@ -184,7 +184,7 @@ Add `.initialism` to an abbreviation for a slightly smaller font-size. ## Blockquotes -For quoting blocks of content from another source within your document. Wrap `<blockquote class="blockquote">` around any <abbr title="HyperText Markup Language">HTML</abbr> as the quote. +For quoting blocks of content from another source within your document. Wrap `<blockquote class="blockquote">` around any HTML as the quote. {{< example >}} <blockquote class="blockquote"> diff --git a/site/content/docs/5.1/customize/color.md b/site/content/docs/5.1/customize/color.md index 63e5d19e6a..785179bb82 100644 --- a/site/content/docs/5.1/customize/color.md +++ b/site/content/docs/5.1/customize/color.md @@ -122,6 +122,7 @@ Here's an example that generates text color utilities (e.g., `.text-purple-500`) ```scss @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; +@import "bootstrap/scss/maps"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/utilities"; diff --git a/site/content/docs/5.1/customize/sass.md b/site/content/docs/5.1/customize/sass.md index e00d1eeae0..53562e1f99 100644 --- a/site/content/docs/5.1/customize/sass.md +++ b/site/content/docs/5.1/customize/sass.md @@ -59,10 +59,15 @@ In your `custom.scss`, you'll import Bootstrap's source Sass files. You have two // 3. Include remainder of required Bootstrap stylesheets @import "../node_modules/bootstrap/scss/variables"; + +// 4. Include any default map overrides here + +// 5. Include remainder of required parts +@import "../node_modules/bootstrap/scss/maps"; @import "../node_modules/bootstrap/scss/mixins"; @import "../node_modules/bootstrap/scss/root"; -// 4. Include any optional Bootstrap CSS as needed +// 6. Optionally include any other parts as needed @import "../node_modules/bootstrap/scss/utilities"; @import "../node_modules/bootstrap/scss/reboot"; @import "../node_modules/bootstrap/scss/type"; @@ -71,10 +76,10 @@ In your `custom.scss`, you'll import Bootstrap's source Sass files. You have two @import "../node_modules/bootstrap/scss/grid"; @import "../node_modules/bootstrap/scss/helpers"; -// 5. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss` +// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss` @import "../node_modules/bootstrap/scss/utilities/api"; -// 6. Add additional custom code here +// 8. Add additional custom code here ``` With that setup in place, you can begin to modify any of the Sass variables and maps in your `custom.scss`. You can also start to add parts of Bootstrap under the `// Optional` section as needed. We suggest using the full import stack from our `bootstrap.scss` file as your starting point. @@ -99,6 +104,7 @@ $body-color: #111; // Required @import "../node_modules/bootstrap/scss/variables"; +@import "../node_modules/bootstrap/scss/maps"; @import "../node_modules/bootstrap/scss/mixins"; @import "../node_modules/bootstrap/scss/root"; @@ -160,6 +166,7 @@ To remove colors from `$theme-colors`, or any other map, use `map-remove`. Be aw // Required @import "../node_modules/bootstrap/scss/functions"; @import "../node_modules/bootstrap/scss/variables"; +@import "../node_modules/bootstrap/scss/maps"; @import "../node_modules/bootstrap/scss/mixins"; @import "../node_modules/bootstrap/scss/root"; diff --git a/site/content/docs/5.1/examples/carousel-rtl/index.html b/site/content/docs/5.1/examples/carousel-rtl/index.html index 043d4b063b..b29ea863e9 100644 --- a/site/content/docs/5.1/examples/carousel-rtl/index.html +++ b/site/content/docs/5.1/examples/carousel-rtl/index.html @@ -25,7 +25,7 @@ extra_css: <a class="nav-link disabled">رابط غير مفعل</a> </li> </ul> - <form class="d-flex"> + <form class="d-flex" role="search"> <input class="form-control me-2" type="search" placeholder="بحث" aria-label="بحث"> <button class="btn btn-outline-success" type="submit">بحث</button> </form> diff --git a/site/content/docs/5.1/examples/carousel/index.html b/site/content/docs/5.1/examples/carousel/index.html index 8faf6cdd1d..e27c6b73a6 100644 --- a/site/content/docs/5.1/examples/carousel/index.html +++ b/site/content/docs/5.1/examples/carousel/index.html @@ -24,7 +24,7 @@ extra_css: <a class="nav-link disabled">Disabled</a> </li> </ul> - <form class="d-flex"> + <form class="d-flex" role="search"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success" type="submit">Search</button> </form> diff --git a/site/content/docs/5.1/examples/cheatsheet-rtl/index.html b/site/content/docs/5.1/examples/cheatsheet-rtl/index.html index 04afcbaf4b..5816865450 100644 --- a/site/content/docs/5.1/examples/cheatsheet-rtl/index.html +++ b/site/content/docs/5.1/examples/cheatsheet-rtl/index.html @@ -1240,7 +1240,7 @@ direction: rtl <a class="nav-link disabled">معطل</a> </li> </ul> - <form class="d-flex"> + <form class="d-flex" role="search"> <input class="form-control me-2" type="search" placeholder="بحث" aria-label="بحث"> <button class="btn btn-outline-dark" type="submit">بحث</button> </form> @@ -1279,7 +1279,7 @@ direction: rtl <a class="nav-link disabled">معطل</a> </li> </ul> - <form class="d-flex"> + <form class="d-flex" role="search"> <input class="form-control me-2" type="search" placeholder="بحث" aria-label="بحث"> <button class="btn btn-outline-light" type="submit">بحث</button> </form> @@ -1497,7 +1497,7 @@ direction: rtl <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="قريب"></button> </div> <div class="toast-body"> - مرحبا بالعالم! هذه رسالة إشعار. + مرحبًا بالعالم! هذه رسالة إشعار. </div> </div> {{< /example >}} diff --git a/site/content/docs/5.1/examples/cheatsheet/index.html b/site/content/docs/5.1/examples/cheatsheet/index.html index d68e262338..64269b31c8 100644 --- a/site/content/docs/5.1/examples/cheatsheet/index.html +++ b/site/content/docs/5.1/examples/cheatsheet/index.html @@ -1239,7 +1239,7 @@ body_class: "bg-light" <a class="nav-link disabled">Disabled</a> </li> </ul> - <form class="d-flex"> + <form class="d-flex" role="search"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-dark" type="submit">Search</button> </form> @@ -1278,7 +1278,7 @@ body_class: "bg-light" <a class="nav-link disabled">Disabled</a> </li> </ul> - <form class="d-flex"> + <form class="d-flex" role="search"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-light" type="submit">Search</button> </form> diff --git a/site/content/docs/5.1/examples/dropdowns/index.html b/site/content/docs/5.1/examples/dropdowns/index.html index 5296d1507e..861e816670 100644 --- a/site/content/docs/5.1/examples/dropdowns/index.html +++ b/site/content/docs/5.1/examples/dropdowns/index.html @@ -107,19 +107,19 @@ body_class: "" </form> <ul class="list-unstyled mb-0"> <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#"> - <span class="d-inline-block bg-success rounded-circle" style="width: .5em; height: .5em;"></span> + <span class="d-inline-block bg-success rounded-circle p-1"></span> Action </a></li> <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#"> - <span class="d-inline-block bg-primary rounded-circle" style="width: .5em; height: .5em;"></span> + <span class="d-inline-block bg-primary rounded-circle p-1"></span> Another action </a></li> <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#"> - <span class="d-inline-block bg-danger rounded-circle" style="width: .5em; height: .5em;"></span> + <span class="d-inline-block bg-danger rounded-circle p-1"></span> Something else here </a></li> <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#"> - <span class="d-inline-block bg-info rounded-circle" style="width: .5em; height: .5em;"></span> + <span class="d-inline-block bg-info rounded-circle p-1"></span> Separated link </a></li> </ul> @@ -131,19 +131,19 @@ body_class: "" </form> <ul class="list-unstyled mb-0"> <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#"> - <span class="d-inline-block bg-success rounded-circle" style="width: .5em; height: .5em;"></span> + <span class="d-inline-block bg-success rounded-circle p-1"></span> Action </a></li> <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#"> - <span class="d-inline-block bg-primary rounded-circle" style="width: .5em; height: .5em;"></span> + <span class="d-inline-block bg-primary rounded-circle p-1"></span> Another action </a></li> <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#"> - <span class="d-inline-block bg-danger rounded-circle" style="width: .5em; height: .5em;"></span> + <span class="d-inline-block bg-danger rounded-circle p-1"></span> Something else here </a></li> <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#"> - <span class="d-inline-block bg-info rounded-circle" style="width: .5em; height: .5em;"></span> + <span class="d-inline-block bg-info rounded-circle p-1"></span> Separated link </a></li> </ul> @@ -336,4 +336,4 @@ body_class: "" <div class="col-4"> ... </div> -</div>
\ No newline at end of file +</div> diff --git a/site/content/docs/5.1/examples/footers/index.html b/site/content/docs/5.1/examples/footers/index.html index b269095742..efa26b92d6 100644 --- a/site/content/docs/5.1/examples/footers/index.html +++ b/site/content/docs/5.1/examples/footers/index.html @@ -48,7 +48,7 @@ body_class: "" <a href="/" class="mb-3 me-2 mb-md-0 text-muted text-decoration-none lh-1"> <svg class="bi" width="30" height="24"><use xlink:href="#bootstrap"/></svg> </a> - <span class="text-muted">© {{< year >}} Company, Inc</span> + <span class="mb-3 mb-md-0 text-muted">© {{< year >}} Company, Inc</span> </div> <ul class="nav col-md-4 justify-content-end list-unstyled d-flex"> @@ -77,19 +77,19 @@ body_class: "" <div class="b-example-divider"></div> <div class="container"> - <footer class="row row-cols-5 py-5 my-5 border-top"> - <div class="col"> + <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"> <a href="/" class="d-flex align-items-center mb-3 link-dark text-decoration-none"> <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> </a> <p class="text-muted">© {{< year >}}</p> </div> - <div class="col"> + <div class="col mb-3"> </div> - <div class="col"> + <div class="col mb-3"> <h5>Section</h5> <ul class="nav flex-column"> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Home</a></li> @@ -100,7 +100,7 @@ body_class: "" </ul> </div> - <div class="col"> + <div class="col mb-3"> <h5>Section</h5> <ul class="nav flex-column"> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Home</a></li> @@ -111,7 +111,7 @@ body_class: "" </ul> </div> - <div class="col"> + <div class="col mb-3"> <h5>Section</h5> <ul class="nav flex-column"> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Home</a></li> @@ -130,7 +130,7 @@ body_class: "" <div class="container"> <footer class="py-5"> <div class="row"> - <div class="col-2"> + <div class="col-6 col-md-2 mb-3"> <h5>Section</h5> <ul class="nav flex-column"> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Home</a></li> @@ -141,7 +141,7 @@ body_class: "" </ul> </div> - <div class="col-2"> + <div class="col-6 col-md-2 mb-3"> <h5>Section</h5> <ul class="nav flex-column"> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Home</a></li> @@ -152,7 +152,7 @@ body_class: "" </ul> </div> - <div class="col-2"> + <div class="col-6 col-md-2 mb-3"> <h5>Section</h5> <ul class="nav flex-column"> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Home</a></li> @@ -163,11 +163,11 @@ body_class: "" </ul> </div> - <div class="col-4 offset-1"> + <div class="col-md-5 offset-md-1 mb-3"> <form> <h5>Subscribe to our newsletter</h5> <p>Monthly digest of whats new and exciting from us.</p> - <div class="d-flex w-100 gap-2"> + <div class="d-flex flex-column flex-sm-row w-100 gap-2"> <label for="newsletter1" class="visually-hidden">Email address</label> <input id="newsletter1" type="text" class="form-control" placeholder="Email address"> <button class="btn btn-primary" type="button">Subscribe</button> @@ -176,7 +176,7 @@ body_class: "" </div> </div> - <div class="d-flex 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>© {{< year >}} Company, Inc. All rights reserved.</p> <ul class="list-unstyled d-flex"> <li class="ms-3"><a class="link-dark" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#twitter"/></svg></a></li> diff --git a/site/content/docs/5.1/examples/grid/index.html b/site/content/docs/5.1/examples/grid/index.html index f26829b4f9..fae182a1cd 100644 --- a/site/content/docs/5.1/examples/grid/index.html +++ b/site/content/docs/5.1/examples/grid/index.html @@ -110,8 +110,8 @@ include_js: false <hr class="my-4"> <h2 class="mt-4">Mixed: mobile and desktop</h2> - <p>The Bootstrap v4 grid system has five tiers of classes: xs (extra small, this class infix is not used), sm (small), md (medium), lg (large), and xl (extra large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.</p> - <p>Each tier of classes scales up, meaning if you plan on setting the same widths for md, lg and xl, you only need to specify md.</p> + <p>The Bootstrap v5 grid system has six tiers of classes: xs (extra small, this class infix is not used), sm (small), md (medium), lg (large), xl (x-large), and xxl (xx-large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.</p> + <p>Each tier of classes scales up, meaning if you plan on setting the same widths for md, lg, xl and xxl, you only need to specify md.</p> <div class="row mb-3"> <div class="col-md-8 themed-grid-col">.col-md-8</div> <div class="col-6 col-md-4 themed-grid-col">.col-6 .col-md-4</div> diff --git a/site/content/docs/5.1/examples/headers/index.html b/site/content/docs/5.1/examples/headers/index.html index e15b47e5f5..15f82c5058 100644 --- a/site/content/docs/5.1/examples/headers/index.html +++ b/site/content/docs/5.1/examples/headers/index.html @@ -104,7 +104,7 @@ body_class: "" <li><a href="#" class="nav-link px-2 text-white">About</a></li> </ul> - <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3"> + <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search"> <input type="search" class="form-control form-control-dark" placeholder="Search..." aria-label="Search"> </form> @@ -132,7 +132,7 @@ body_class: "" <li><a href="#" class="nav-link px-2 link-dark">Products</a></li> </ul> - <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3"> + <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search"> <input type="search" class="form-control" placeholder="Search..." aria-label="Search"> </form> @@ -172,7 +172,7 @@ body_class: "" </div> <div class="d-flex align-items-center"> - <form class="w-100 me-3"> + <form class="w-100 me-3" role="search"> <input type="search" class="form-control" placeholder="Search..." aria-label="Search"> </form> @@ -226,7 +226,7 @@ body_class: "" <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> <span class="fs-4">Double header</span> </a> - <form class="col-12 col-lg-auto mb-3 mb-lg-0"> + <form class="col-12 col-lg-auto mb-3 mb-lg-0" role="search"> <input type="search" class="form-control" placeholder="Search..." aria-label="Search"> </form> </div> @@ -279,7 +279,7 @@ body_class: "" </div> <div class="px-3 py-2 border-bottom mb-3"> <div class="container d-flex flex-wrap justify-content-center"> - <form class="col-12 col-lg-auto mb-2 mb-lg-0 me-lg-auto"> + <form class="col-12 col-lg-auto mb-2 mb-lg-0 me-lg-auto" role="search"> <input type="search" class="form-control" placeholder="Search..." aria-label="Search"> </form> diff --git a/site/content/docs/5.1/examples/navbar-fixed/index.html b/site/content/docs/5.1/examples/navbar-fixed/index.html index 0c981392e1..b0d9986520 100644 --- a/site/content/docs/5.1/examples/navbar-fixed/index.html +++ b/site/content/docs/5.1/examples/navbar-fixed/index.html @@ -23,7 +23,7 @@ extra_css: <a class="nav-link disabled">Disabled</a> </li> </ul> - <form class="d-flex"> + <form class="d-flex" role="search"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success" type="submit">Search</button> </form> diff --git a/site/content/docs/5.1/examples/navbar-static/index.html b/site/content/docs/5.1/examples/navbar-static/index.html index 63c54c9f24..b6c26c94a0 100644 --- a/site/content/docs/5.1/examples/navbar-static/index.html +++ b/site/content/docs/5.1/examples/navbar-static/index.html @@ -23,7 +23,7 @@ extra_css: <a class="nav-link disabled">Disabled</a> </li> </ul> - <form class="d-flex"> + <form class="d-flex" role="search"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success" type="submit">Search</button> </form> diff --git a/site/content/docs/5.1/examples/navbars/index.html b/site/content/docs/5.1/examples/navbars/index.html index 04d6ab623d..d1c3675e4b 100644 --- a/site/content/docs/5.1/examples/navbars/index.html +++ b/site/content/docs/5.1/examples/navbars/index.html @@ -33,8 +33,8 @@ extra_css: </ul> </li> </ul> - <form> - <input class="form-control" type="text" placeholder="Search" aria-label="Search"> + <form role="search"> + <input class="form-control" type="search" placeholder="Search" aria-label="Search"> </form> </div> </div> @@ -56,8 +56,8 @@ extra_css: <a class="nav-link" href="#">Link</a> </li> </ul> - <form> - <input class="form-control" type="text" placeholder="Search" aria-label="Search"> + <form role="search"> + <input class="form-control" type="search" placeholder="Search" aria-label="Search"> </form> </div> </div> @@ -90,8 +90,8 @@ extra_css: </ul> </li> </ul> - <form> - <input class="form-control" type="text" placeholder="Search" aria-label="Search"> + <form role="search"> + <input class="form-control" type="search" placeholder="Search" aria-label="Search"> </form> </div> </div> @@ -124,8 +124,8 @@ extra_css: </ul> </li> </ul> - <form> - <input class="form-control" type="text" placeholder="Search" aria-label="Search"> + <form role="search"> + <input class="form-control" type="search" placeholder="Search" aria-label="Search"> </form> </div> </div> @@ -158,8 +158,8 @@ extra_css: </ul> </li> </ul> - <form> - <input class="form-control" type="text" placeholder="Search" aria-label="Search"> + <form role="search"> + <input class="form-control" type="search" placeholder="Search" aria-label="Search"> </form> </div> </div> @@ -192,8 +192,8 @@ extra_css: </ul> </li> </ul> - <form> - <input class="form-control" type="text" placeholder="Search" aria-label="Search"> + <form role="search"> + <input class="form-control" type="search" placeholder="Search" aria-label="Search"> </form> </div> </div> @@ -226,8 +226,8 @@ extra_css: </ul> </li> </ul> - <form> - <input class="form-control" type="text" placeholder="Search" aria-label="Search"> + <form role="search"> + <input class="form-control" type="search" placeholder="Search" aria-label="Search"> </form> </div> </div> @@ -260,8 +260,8 @@ extra_css: </ul> </li> </ul> - <form> - <input class="form-control" type="text" placeholder="Search" aria-label="Search"> + <form role="search"> + <input class="form-control" type="search" placeholder="Search" aria-label="Search"> </form> </div> </div> @@ -294,8 +294,8 @@ extra_css: </ul> </li> </ul> - <form> - <input class="form-control" type="text" placeholder="Search" aria-label="Search"> + <form role="search"> + <input class="form-control" type="search" placeholder="Search" aria-label="Search"> </form> </div> </div> @@ -363,8 +363,8 @@ extra_css: </ul> </li> </ul> - <form> - <input class="form-control" type="text" placeholder="Search" aria-label="Search"> + <form role="search"> + <input class="form-control" type="search" placeholder="Search" aria-label="Search"> </form> </div> </div> diff --git a/site/content/docs/5.1/examples/offcanvas-navbar/index.html b/site/content/docs/5.1/examples/offcanvas-navbar/index.html index 5af7e2ea29..258e445e68 100644 --- a/site/content/docs/5.1/examples/offcanvas-navbar/index.html +++ b/site/content/docs/5.1/examples/offcanvas-navbar/index.html @@ -39,7 +39,7 @@ aliases: "/docs/5.1/examples/offcanvas/" </ul> </li> </ul> - <form class="d-flex"> + <form class="d-flex" role="search"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success" type="submit">Search</button> </form> diff --git a/site/content/docs/5.1/examples/sticky-footer-navbar/index.html b/site/content/docs/5.1/examples/sticky-footer-navbar/index.html index cd72aa778c..1f807a6dc1 100644 --- a/site/content/docs/5.1/examples/sticky-footer-navbar/index.html +++ b/site/content/docs/5.1/examples/sticky-footer-navbar/index.html @@ -27,7 +27,7 @@ body_class: "d-flex flex-column h-100" <a class="nav-link disabled">Disabled</a> </li> </ul> - <form class="d-flex"> + <form class="d-flex" role="search"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success" type="submit">Search</button> </form> diff --git a/site/content/docs/5.1/forms/floating-labels.md b/site/content/docs/5.1/forms/floating-labels.md index 9410550898..2ac6752047 100644 --- a/site/content/docs/5.1/forms/floating-labels.md +++ b/site/content/docs/5.1/forms/floating-labels.md @@ -89,7 +89,7 @@ When working with the Bootstrap grid system, be sure to place form elements with </div> <div class="col-md"> <div class="form-floating"> - <select class="form-select" id="floatingSelectGrid" aria-label="Floating label select example"> + <select class="form-select" id="floatingSelectGrid"> <option selected>Open this select menu</option> <option value="1">One</option> <option value="2">Two</option> diff --git a/site/content/docs/5.1/forms/overview.md b/site/content/docs/5.1/forms/overview.md index c60cf1ccc0..29bead1a3d 100644 --- a/site/content/docs/5.1/forms/overview.md +++ b/site/content/docs/5.1/forms/overview.md @@ -145,10 +145,10 @@ While using visually hidden content (`.visually-hidden`, `aria-label`, and even ## Sass -Many form variables are set at a general level to be re-used and extended by individual form components. You'll see these most often as `$btn-input-*` and `$input-*` variables. +Many form variables are set at a general level to be re-used and extended by individual form components. You'll see these most often as `$input-btn-*` and `$input-*` variables. ### Variables -`$btn-input-*` variables are shared global variables between our [buttons]({{< docsref "/components/buttons" >}}) and our form components. You'll find these frequently reassigned as values to other component-specific variables. +`$input-btn-*` variables are shared global variables between our [buttons]({{< docsref "/components/buttons" >}}) and our form components. You'll find these frequently reassigned as values to other component-specific variables. {{< scss-docs name="input-btn-variables" file="scss/_variables.scss" >}} diff --git a/site/content/docs/5.1/getting-started/rtl.md b/site/content/docs/5.1/getting-started/rtl.md index 549104c6f2..b1a0534cf6 100644 --- a/site/content/docs/5.1/getting-started/rtl.md +++ b/site/content/docs/5.1/getting-started/rtl.md @@ -46,10 +46,10 @@ You can see the above requirements reflected in this modified RTL starter templa <!-- Bootstrap CSS --> <link rel="stylesheet" href="{{< param "cdn.css_rtl" >}}" integrity="{{< param "cdn.css_rtl_hash" >}}" crossorigin="anonymous"> - <title>مرحبا بالعالم!</title> + <title>مرحبًا بالعالم!</title> </head> <body> - <h1>مرحبا بالعالم!</h1> + <h1>مرحبًا بالعالم!</h1> <!-- Optional JavaScript; choose one of the two! --> diff --git a/site/content/docs/5.1/layout/gutters.md b/site/content/docs/5.1/layout/gutters.md index 87d2731a47..9ea13e4ab2 100644 --- a/site/content/docs/5.1/layout/gutters.md +++ b/site/content/docs/5.1/layout/gutters.md @@ -137,7 +137,7 @@ Gutter classes can also be added to [row columns]({{< docsref "/layout/grid#row- The gutters between columns in our predefined grid classes can be removed with `.g-0`. This removes the negative `margin`s from `.row` and the horizontal `padding` from all immediate children columns. -**Need an edge-to-edge design?** Drop the parent `.container` or `.container-fluid`. +**Need an edge-to-edge design?** Drop the parent `.container` or `.container-fluid` and add `.mx-0` to the `.row` to prevent overflow. In practice, here's how it looks. Note you can continue to use this with all other predefined grid classes (including column widths, responsive tiers, reorders, and more). diff --git a/site/content/docs/5.1/migration.md b/site/content/docs/5.1/migration.md index 10d4a44212..4ee9c60146 100644 --- a/site/content/docs/5.1/migration.md +++ b/site/content/docs/5.1/migration.md @@ -9,6 +9,52 @@ toc: true ## v5.2.0 +### New `_maps.scss` + +Bootstrap v5.2.0 introduced a new Sass file, `_maps.scss`, that pulled out several Sass maps from `_variables.scss` to fix an issue where updates to an original map were not applied to secondary maps that extend them. For example, updates to `$theme-colors` were not being applied to other theme maps that relied on `$theme-colors`, breaking key customization workflows. In short, Sass has a limitation where once a default variable or map has been _used_, it cannot be updated. + +This is why variable customizations in Bootstrap have to come after `@import "functions"`, but before `@import "variables"` and the rest of our import stack. The same applies to Sass maps—you must override the defaults before the defaults get used. The following maps have been moved to the new `_maps.scss`: + +- `$theme-colors-rgb` +- `$utilities-colors` +- `$utilities-text` +- `$utilities-text-colors` +- `$utilities-bg` +- `$utilities-bg-colors` +- `$negative-spacers` +- `$gutters` + +Your custom Bootstrap CSS builds should now look something like this with a separate maps import. + +```diff + // Functions come first + @import "functions"; + + // Optional variable overrides here ++ $custom-color: #df711b; ++ $custom-theme-colors: ( ++ "custom": $custom-color ++ ); + + // Variables come next + @import "variables"; + ++ // Optional Sass map overrides here ++ $theme-colors: map-merge($theme-colors, $custom-theme-colors); ++ ++ // Followed by our default maps ++ @import "maps"; ++ + // Rest of our imports + @import "mixins"; + @import "utilities"; + @import "root"; + @import "reboot"; + // etc +``` + +### Key changes + - **Introduced new `$enable-container-classes` option.** Now when opting into the experimental CSS Grid layout, `.container-*` classes will still be compiled, unless this option is set to `false`. ## Dependencies @@ -251,7 +297,7 @@ toc: true - <span class="badge bg-danger">Breaking</span> All the events for the dropdown are now triggered on the dropdown toggle button and then bubbled up to the parent element. -- Dropdown menus now have a `data-bs-popper="static"` attribute set when the positioning of the dropdown is static and `data-bs-popper="none"` when dropdown is in the navbar. This is added by our JavaScript and helps us use custom position styles without interfering with Popper's positioning. +- Dropdown menus now have a `data-bs-popper="static"` attribute set when the positioning of the dropdown is static, or dropdown is in the navbar. This is added by our JavaScript and helps us use custom position styles without interfering with Popper's positioning. - <span class="badge bg-danger">Breaking</span> Dropped `flip` option for dropdown plugin in favor of native Popper configuration. You can now disable the flipping behavior by passing an empty array for [`fallbackPlacements`](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements) option in [flip](https://popper.js.org/docs/v2/modifiers/flip/) modifier. diff --git a/site/content/docs/5.1/utilities/api.md b/site/content/docs/5.1/utilities/api.md index 66b6bc0f82..af8de6561a 100644 --- a/site/content/docs/5.1/utilities/api.md +++ b/site/content/docs/5.1/utilities/api.md @@ -363,7 +363,10 @@ New utilities can be added to the default `$utilities` map with a `map-merge`. M ```scss @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; +@import "bootstrap/scss/maps"; +@import "bootstrap/scss/mixins"; @import "bootstrap/scss/utilities"; +@import "bootstrap/scss/utilities/api"; $utilities: map-merge( $utilities, @@ -385,7 +388,10 @@ Modify existing utilities in the default `$utilities` map with `map-get` and `ma ```scss @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; +@import "bootstrap/scss/maps"; +@import "bootstrap/scss/mixins"; @import "bootstrap/scss/utilities"; +@import "bootstrap/scss/utilities/api"; $utilities: map-merge( $utilities, @@ -410,7 +416,10 @@ You can enable responsive classes for an existing set of utilities that are not ```scss @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; +@import "bootstrap/scss/maps"; +@import "bootstrap/scss/mixins"; @import "bootstrap/scss/utilities"; +@import "bootstrap/scss/utilities/api"; $utilities: map-merge( $utilities, ( @@ -461,7 +470,10 @@ Missing v4 utilities, or used to another naming convention? The utilities API ca ```scss @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; +@import "bootstrap/scss/maps"; +@import "bootstrap/scss/mixins"; @import "bootstrap/scss/utilities"; +@import "bootstrap/scss/utilities/api"; $utilities: map-merge( $utilities, ( @@ -480,7 +492,10 @@ Remove any of the default utilities by setting the group key to `null`. For exam ```scss @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; +@import "bootstrap/scss/maps"; +@import "bootstrap/scss/mixins"; @import "bootstrap/scss/utilities"; +@import "bootstrap/scss/utilities/api"; $utilities: map-merge( $utilities, diff --git a/site/content/docs/5.1/utilities/background.md b/site/content/docs/5.1/utilities/background.md index 61c27365b1..b6f7a8bdff 100644 --- a/site/content/docs/5.1/utilities/background.md +++ b/site/content/docs/5.1/utilities/background.md @@ -103,11 +103,11 @@ Grayscale colors are also available as a Sass map. **This map is not used to gen RGB colors are generated from a separate Sass map: -{{< scss-docs name="theme-colors-rgb" file="scss/_variables.scss" >}} +{{< scss-docs name="theme-colors-rgb" file="scss/_maps.scss" >}} And background color opacities build on that with their own map that's consumed by the utilities API: -{{< scss-docs name="utilities-bg-colors" file="scss/_variables.scss" >}} +{{< scss-docs name="utilities-bg-colors" file="scss/_maps.scss" >}} ### Mixins diff --git a/site/content/docs/5.1/utilities/colors.md b/site/content/docs/5.1/utilities/colors.md index 60462070b4..95752ed64c 100644 --- a/site/content/docs/5.1/utilities/colors.md +++ b/site/content/docs/5.1/utilities/colors.md @@ -100,11 +100,11 @@ Grayscale colors are also available as a Sass map. **This map is not used to gen RGB colors are generated from a separate Sass map: -{{< scss-docs name="theme-colors-rgb" file="scss/_variables.scss" >}} +{{< scss-docs name="theme-colors-rgb" file="scss/_maps.scss" >}} And color opacities build on that with their own map that's consumed by the utilities API: -{{< scss-docs name="utilities-text-colors" file="scss/_variables.scss" >}} +{{< scss-docs name="utilities-text-colors" file="scss/_maps.scss" >}} ### Utilities API |