From f8401a7ff75664581f6c1b33893faf36e45b496e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?=
<20430676+supermavster@users.noreply.github.com>
Date: Mon, 9 May 2022 19:00:55 -0500
Subject: [PATCH 01/53] Update main README.md
Markdown rules, especially MD033 or higher, different standards within the lines contain few but substantial errors; likewise, I have 'fixed' the composition or grammatical structure of the text and sentences in the readme file.
---
README.md | 34 ++++++++++------------------------
1 file changed, 10 insertions(+), 24 deletions(-)
diff --git a/README.md b/README.md
index 32a9608ff1..b19cbab688 100644
--- a/README.md
+++ b/README.md
@@ -21,11 +21,9 @@
<a href="https://blog.getbootstrap.com/">Blog</a>
</p>
-
## Bootstrap 5
-Our default branch is for development of our Bootstrap 5 release. Head to the [`v4-dev` branch](https://github.com/twbs/bootstrap/tree/v4-dev) to view the readme, documentation, and source code for Bootstrap 4.
-
+Our default branch is for the development of our Bootstrap 5 release. Head to the [`v4-dev` branch](https://github.com/twbs/bootstrap/tree/v4-dev) to view the readme, documentation, and source code for Bootstrap 4.
## Table of contents
@@ -41,8 +39,7 @@ Our default branch is for development of our Bootstrap 5 release. Head to the [`
- [Thanks](#thanks)
- [Copyright and license](#copyright-and-license)
-
-## Quick start
+## Quickstart
Several quick start options are available:
@@ -53,8 +50,7 @@ Several quick start options are available:
- Install with [Composer](https://getcomposer.org/): `composer require twbs/bootstrap:5.1.3`
- Install with [NuGet](https://www.nuget.org/): CSS: `Install-Package bootstrap` Sass: `Install-Package bootstrap.sass`
-Read the [Getting started page](https://getbootstrap.com/docs/5.1/getting-started/introduction/) for information on the framework contents, templates, examples, and more.
-
+Read the [Getting started page](https://getbootstrap.com/docs/5.1/getting-started/introduction/) for information on the framework contents, templates, examples, etc.
## Status
@@ -74,10 +70,9 @@ Read the [Getting started page](https://getbootstrap.com/docs/5.1/getting-starte
[](#backers)
[](#sponsors)
-
## What's included
-Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations.
+You'll find the following directories and files within the download, logically grouping common assets and providing both compiled and minified variations.
<details>
<summary>Download contents</summary>
@@ -131,15 +126,14 @@ Within the download you'll find the following directories and files, logically g
├── bootstrap.min.js
└── bootstrap.min.js.map
```
-</details>
-We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). [Source maps](https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps) (`bootstrap.*.map`) are available for use with certain browsers' developer tools. Bundled JS files (`bootstrap.bundle.js` and minified `bootstrap.bundle.min.js`) include [Popper](https://popper.js.org/).
+</details>
+We provided compiled CSS and JS (`bootstrap.*`) and compiled and minified CSS and JS (`bootstrap.min.*`). [Source maps](https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps) (`bootstrap.*.map`) are available for use with specific browsers' developer tools. Bundled JS files (`bootstrap.bundle.js` and minified `bootstrap.bundle.min.js`) include [Popper](https://popper.js.org/).
## Bugs and feature requests
-Have a bug or a feature request? Please first read the [issue guidelines](https://github.com/twbs/bootstrap/blob/main/.github/CONTRIBUTING.md#using-the-issue-tracker) and search for existing and closed issues. If your problem or idea is not addressed yet, [please open a new issue](https://github.com/twbs/bootstrap/issues/new).
-
+Have a bug or a feature request? Please read the [issue guidelines](https://github.com/twbs/bootstrap/blob/main/.github/CONTRIBUTING.md#using-the-issue-tracker) and search for existing and closed issues if your problem or idea is not addressed yet, [please open a new issue](https://github.com/twbs/bootstrap/issues/new).
## Documentation
@@ -150,7 +144,7 @@ Documentation search is powered by [Algolia's DocSearch](https://community.algol
### Running documentation locally
1. Run `npm install` to install the Node.js dependencies, including Hugo (the site builder).
-2. Run `npm run test` (or a specific npm script) to rebuild distributed CSS and JavaScript files, as well as our docs assets.
+2. Run `npm run test` (or a specific npm script) to rebuild distributed CSS and JavaScript files and our docs assets.
3. From the root `/bootstrap` directory, run `npm run docs-serve` in the command line.
4. Open `http://localhost:9001/` in your browser, and voilà .
@@ -162,7 +156,6 @@ You can find all our previous releases docs on <https://getbootstrap.com/docs/ve
[Previous releases](https://github.com/twbs/bootstrap/releases) and their documentation are also available for download.
-
## Contributing
Please read through our [contributing guidelines](https://github.com/twbs/bootstrap/blob/main/.github/CONTRIBUTING.md). Included are directions for opening issues, coding standards, and notes on development.
@@ -171,7 +164,6 @@ Moreover, if your pull request contains JavaScript patches or features, you must
Editor preferences are available in the [editor config](https://github.com/twbs/bootstrap/blob/main/.editorconfig) for easy use in common text editors. Read more and download plugins at <https://editorconfig.org/>.
-
## Community
Get updates on Bootstrap's development and chat with the project maintainers and community members.
@@ -181,8 +173,7 @@ Get updates on Bootstrap's development and chat with the project maintainers and
- Join [the official Slack room](https://bootstrap-slack.herokuapp.com/).
- Chat with fellow Bootstrappers in IRC. On the `irc.libera.chat` server, in the `#bootstrap` channel.
- Implementation help may be found at Stack Overflow (tagged [`bootstrap-5`](https://stackoverflow.com/questions/tagged/bootstrap-5)).
-- Developers should use the keyword `bootstrap` on packages which modify or add to the functionality of Bootstrap when distributing through [npm](https://www.npmjs.com/browse/keyword/bootstrap) or similar delivery mechanisms for maximum discoverability.
-
+- Developers should use the keyword `bootstrap` on packages that modify or add to the functionality of Bootstrap when distributing through [npm](https://www.npmjs.com/browse/keyword/bootstrap) or similar delivery mechanisms for maximum discoverability.
## Versioning
@@ -190,7 +181,6 @@ For transparency into our release cycle and in striving to maintain backward com
See [the Releases section of our GitHub project](https://github.com/twbs/bootstrap/releases) for changelogs for each release version of Bootstrap. Release announcement posts on [the official Bootstrap blog](https://blog.getbootstrap.com/) contain summaries of the most noteworthy changes made in each release.
-
## Creators
**Mark Otto**
@@ -203,7 +193,6 @@ See [the Releases section of our GitHub project](https://github.com/twbs/bootstr
- <https://twitter.com/fat>
- <https://github.com/fat>
-
## Thanks
<a href="https://www.browserstack.com/">
@@ -216,8 +205,7 @@ Thanks to [BrowserStack](https://www.browserstack.com/) for providing the infras
<img src="https://www.netlify.com/v3/img/components/full-logo-light.svg" alt="Netlify" width="147" height="40">
</a>
-Thanks to [Netlify](https://www.netlify.com/) for providing us with Deploy Previews!
-
+Thanks to [Netlify](https://www.netlify.com/) for providing Deploy Previews!
## Sponsors
@@ -234,14 +222,12 @@ Support this project by becoming a sponsor. Your logo will show up here with a l
[](https://opencollective.com/bootstrap/sponsor/8/website)
[](https://opencollective.com/bootstrap/sponsor/9/website)
-
## Backers
Thank you to all our backers! 🙠[[Become a backer](https://opencollective.com/bootstrap#backer)]
[](https://opencollective.com/bootstrap#backers)
-
## Copyright and license
Code and documentation copyright 2011–2022 the [Bootstrap Authors](https://github.com/twbs/bootstrap/graphs/contributors) and [Twitter, Inc.](https://twitter.com) 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/).
--
GitLab
From c5a436efb07d203f46e385fd4b94d87ab68a519f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?=
<20430676+supermavster@users.noreply.github.com>
Date: Mon, 9 May 2022 19:07:09 -0500
Subject: [PATCH 02/53] Update CODE_OF_CONDUCT.md
Contextual grammar update for general understanding
---
CODE_OF_CONDUCT.md | 12 ++++++++----
1 file changed, 8 insertions(+), 4 deletions(-)
diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md
index e25e2bca50..ca1a7b2f63 100644
--- a/CODE_OF_CONDUCT.md
+++ b/CODE_OF_CONDUCT.md
@@ -19,22 +19,26 @@ Examples of unacceptable behavior by participants include:
- The use of sexualized language or imagery and unwelcome sexual attention or advances
- Trolling, insulting/derogatory comments, and personal or political attacks
- Public or private harassment
-- Publishing others' private information, such as a physical or electronic address, without explicit permission
+- Publishing other's private information, such as a physical or electronic address, without explicit permission
- Other conduct which could reasonably be considered inappropriate in a professional setting
## Our Responsibilities
Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
-Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
+Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
## Scope
-This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
+This Code of Conduct applies both within project spaces and in public spaces when an individual represents the project or its community. Examples of representing a project or community include:
+Using an official project e-mail address.
+Posting via an official social media account.
+Acting as an appointed representative at an online or offline event.
+Representation of a project may be further defined and clarified by project maintainers.
## Enforcement
-Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at mdo@getbootstrap.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
+Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at mdo@getbootstrap.com. The project team will review and investigate all complaints and respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality concerning the reporter of an incident. Further details of specific enforcement policies may be posted separately.
Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
--
GitLab
From dc1853a8266b2e1f7d6485795ef8b3573ae20377 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?=
<20430676+supermavster@users.noreply.github.com>
Date: Mon, 9 May 2022 19:08:40 -0500
Subject: [PATCH 03/53] Update SECURITY.md
Security grammar plugin and markdown syntax fix
---
SECURITY.md | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/SECURITY.md b/SECURITY.md
index e79dcd8d20..487d5c13d0 100644
--- a/SECURITY.md
+++ b/SECURITY.md
@@ -1,7 +1,7 @@
# Reporting Security Issues
-The Bootstrap team and community take security issues in Bootstrap seriously. We appreciate your efforts to responsibly disclose your findings, and will make every effort to acknowledge your contributions.
+The Bootstrap team and community take security issues in Bootstrap seriously. We appreciate your efforts to disclose your findings responsibly and will make every effort to acknowledge your contributions.
To report a security issue, email [security@getbootstrap.com](mailto:security@getbootstrap.com) and include the word "SECURITY" in the subject line.
-We'll endeavor to respond quickly, and will keep you updated throughout the process.
+We'll endeavor to respond quickly and keep you updated throughout the process.
--
GitLab
From 98a6d09905bbd162dd259c9d887d86c40eb19cf0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?=
<20430676+supermavster@users.noreply.github.com>
Date: Mon, 9 May 2022 19:11:58 -0500
Subject: [PATCH 04/53] Fix validate syntax SUPPORT.md
Solution to the syntax and standard predefined by markdown for the document SUPPORT.md
---
.github/SUPPORT.md | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/.github/SUPPORT.md b/.github/SUPPORT.md
index a4739f589a..092355fb58 100644
--- a/.github/SUPPORT.md
+++ b/.github/SUPPORT.md
@@ -1,8 +1,8 @@
-### Bug reports
+# Bug reports
See the [contributing guidelines](CONTRIBUTING.md) for sharing bug reports.
-### How-to
+## How-to
For general troubleshooting or help getting started:
--
GitLab
From fd75174aebf6d0cd25018af4440f8f959f417361 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?=
<20430676+supermavster@users.noreply.github.com>
Date: Mon, 9 May 2022 19:20:32 -0500
Subject: [PATCH 05/53] Update CONTRIBUTING.md
Update markdown syntax based on the reference MD004; in turn, text updating with grammatical emphasis for the general public.
---
.github/CONTRIBUTING.md | 95 +++++++++++++++++++----------------------
1 file changed, 43 insertions(+), 52 deletions(-)
diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
index be4ad836de..4c0b207dfa 100644
--- a/.github/CONTRIBUTING.md
+++ b/.github/CONTRIBUTING.md
@@ -2,15 +2,13 @@
Looking to contribute something to Bootstrap? **Here's how you can help.**
-Please take a moment to review this document in order to make the contribution
+Please take a moment to review this document to make the contribution
process easy and effective for everyone involved.
Following these guidelines helps to communicate that you respect the time of
-the developers managing and developing this open source project. In return,
-they should reciprocate that respect in addressing your issue or assessing
+the developers managing and developing this open-source project. They should reciprocate that respect in addressing your issue or assessing
patches and features.
-
## Using the issue tracker
The [issue tracker](https://github.com/twbs/bootstrap/issues) is
@@ -32,34 +30,32 @@ restrictions:
* Please **do not** open issues regarding the official themes offered on <https://themes.getbootstrap.com/>.
Instead, please email any questions or feedback regarding those themes to `themes AT getbootstrap DOT com`.
-
## Issues and labels
Our bug tracker utilizes several labels to help organize and identify issues. Here's what they represent and how we use them:
-- `browser bug` - Issues that are reported to us, but actually are the result of a browser-specific bug. These are diagnosed with reduced test cases and result in an issue opened on that browser's own bug tracker.
-- `confirmed` - Issues that have been confirmed with a reduced test case and identify a bug in Bootstrap.
-- `css` - Issues stemming from our compiled CSS or source Sass files.
-- `docs` - Issues for improving or updating our documentation.
-- `examples` - Issues involving the example templates included in our docs.
-- `feature` - Issues asking for a new feature to be added, or an existing one to be extended or modified. New features require a minor version bump (e.g., `v3.0.0` to `v3.1.0`).
-- `build` - Issues with our build system, which is used to run all our tests, concatenate and compile source files, and more.
-- `help wanted` - Issues we need or would love help from the community to resolve.
-- `js` - Issues stemming from our compiled or source JavaScript files.
-- `meta` - Issues with the project itself or our GitHub repository.
-
-For a complete look at our labels, see the [project labels page](https://github.com/twbs/bootstrap/labels).
+* `browser bug` - Issues that are reported to us but result from a browser-specific bug. These are diagnosed with reduced test cases and result in an issue opened on that browser's bug tracker.
+* `confirmed` - Issues that have been confirmed with a reduced test case and identify a bug in Bootstrap.
+* `css` - Issues stemming from our compiled CSS or source Sass files.
+* `docs` - Issues for improving or updating our documentation.
+* `examples` - Issues involving the example templates included in our docs.
+* `feature` - Issues asking for a new feature to be added or an existing one to be extended or modified. New features require a minor version bump (e.g., `v3.0.0` to `v3.1.0`).
+* `build` - Issues with our build system, which is used to run all our tests, concatenate and compile source files, and more.
+* `help wanted` - Issues we need or would love help from the community to resolve.
+* `js` - Issues stemming from our compiled or source JavaScript files.
+* `meta` - Issues with the project itself or our GitHub repository.
+See the [project labels page] for a complete look at our labels; see the [project labels page](https://github.com/twbs/bootstrap/labels).
## Bug reports
A bug is a _demonstrable problem_ that is caused by the code in the repository.
-Good bug reports are extremely helpful, so thanks!
+Good bug reports are beneficial, so thanks!
Guidelines for bug reports:
-0. **[Validate your HTML](https://html5.validator.nu/)** to ensure your
- problem isn't caused by a simple error in your own code.
+0. **[Validate your HTML](https://html5.validator.nu/)** to ensure a simple error in your code doesn't cause your
+ problem.
1. **Use the GitHub issue search** — check if the issue has already been
reported.
@@ -67,11 +63,10 @@ Guidelines for bug reports:
2. **Check if the issue has been fixed** — try to reproduce it using the
latest `main` (or `v4-dev` branch if the issue is about v4) in the repository.
-3. **Isolate the problem** — ideally create a [reduced test
+3. **Isolate the problem** — ideally, create a [reduced test
case](https://css-tricks.com/reduced-test-cases/) and a live example.
[This JS Bin](https://jsbin.com/lolome/edit?html,output) is a helpful template.
-
A good bug report shouldn't leave others needing to chase you up for more
information. Please try to be as detailed as possible in your report. What is
your environment? What steps will reproduce the issue? What browser(s) and OS
@@ -92,40 +87,38 @@ Example:
>
> `<url>` - a link to the reduced test case
>
-> Any other information you want to share that is relevant to the issue being
+> Any other information you want to share relevant to the issue being
> reported. This might include the lines of code that you have identified as
-> causing the bug, and potential solutions (and your opinions on their
+> causing the bug and potential solutions (and your opinions on their
> merits).
### Reporting upstream browser bugs
-Sometimes bugs reported to us are actually caused by bugs in the browser(s) themselves, not bugs in Bootstrap per se.
+Sometimes bugs reported to us are caused by bugs in the browser(s) themselves, not bugs in Bootstrapper se.
| Vendor(s) | Browser(s) | Rendering engine | Bug reporting website(s) | Notes |
| ------------- | ---------------------------- | ---------------- | ------------------------------------------------------ | -------------------------------------------------------- |
-| Mozilla | Firefox | Gecko | https://bugzilla.mozilla.org/enter_bug.cgi | "Core" is normally the right product option to choose. |
-| Apple | Safari | WebKit | https://bugs.webkit.org/enter_bug.cgi?product=WebKit | In Apple's bug reporter, choose "Safari" as the product. |
-| Google, Opera | Chrome, Chromium, Opera v15+ | Blink | https://bugs.chromium.org/p/chromium/issues/list | Click the "New issue" button. |
-| Microsoft | Edge | Blink | https://developer.microsoft.com/en-us/microsoft-edge/ | Go to "Help > Send Feedback" from the browser |
-
+| Mozilla | Firefox | Gecko | <https://bugzilla.mozilla.org/enter_bug.cgi> | "Core" is usually the correct product option to choose. |
+| Apple | Safari | WebKit | <https://bugs.webkit.org/enter_bug.cgi?product=WebKit> | In Apple's bug reporter, choose "Safari" as the product. |
+| Google, Opera | Chrome, Chromium, Opera v15+ | Blink | <https://bugs.chromium.org/p/chromium/issues/list> | Click the "New issue" button. |
+| Microsoft | Edge | Blink | <https://developer.microsoft.com/en-us/microsoft-edge/> | Go to "Help > Send Feedback" from the browser |
## Feature requests
Feature requests are welcome. But take a moment to find out whether your idea
-fits with the scope and aims of the project. It's up to *you* to make a strong
+fits with the scope and aims of the project. It's up to _you_ to make a solid
case to convince the project's developers of the merits of this feature. Please
provide as much detail and context as possible.
-
## Pull requests
-Good pull requests—patches, improvements, new features—are a fantastic
+Reasonable pull requests—patches, improvements, new features—are a fantastic
help. They should remain focused in scope and avoid containing unrelated
commits.
**Please ask first** before embarking on any **significant** pull request (e.g.
implementing features, refactoring code, porting to a different language),
-otherwise you risk spending a lot of time working on something that the
+otherwise, you risk spending a lot of time working on something that the
project's developers might not want to merge into the project. For trivial
things, or things that don't require a lot of your time, you can go ahead and
make a PR.
@@ -148,11 +141,11 @@ documentation source files and is managed separately by the Bootstrap Core Team.
Adhering to the following process is the best way to get your work
included in the project:
-1. [Fork](https://help.github.com/articles/fork-a-repo/) the project, clone your fork,
+1. [Fork](https://help.github.com/articles/fork-a-repo/) the project, clone your Fork,
and configure the remotes:
```bash
- # Clone your fork of the repo into the current directory
+ # Clone your Fork of the repo into the current directory
git clone https://github.com/<your-username>/bootstrap.git
# Navigate to the newly cloned directory
cd bootstrap
@@ -176,7 +169,7 @@ included in the project:
4. Commit your changes in logical chunks. Please adhere to these [git commit
message guidelines](https://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html)
- or your code is unlikely be merged into the main project. Use Git's
+ or your code is unlikely to be merged into the main project. Use Git's
[interactive rebase](https://help.github.com/articles/about-git-rebase/)
feature to tidy up your commits before making them public.
@@ -186,7 +179,7 @@ included in the project:
git pull [--rebase] upstream main
```
-6. Push your topic branch up to your fork:
+6. Push your topic branch up to your Fork:
```bash
git push origin <topic-branch-name>
@@ -201,39 +194,37 @@ includes code changes) and under the terms of the
[Creative Commons Attribution 3.0 Unported License](https://creativecommons.org/licenses/by/3.0/)
(if it includes documentation changes).
-
## Code guidelines
### HTML
[Adhere to the Code Guide.](https://codeguide.co/#html)
-- Use tags and elements appropriate for an HTML5 doctype (e.g., self-closing tags).
-- Use CDNs and HTTPS for third-party JS when possible. We don't use protocol-relative URLs in this case because they break when viewing the page locally via `file://`.
-- Use [WAI-ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) attributes in documentation examples to promote accessibility.
+* Use tags and elements appropriate for an HTML5 doctype (e.g., self-closing tags).
+* Use CDNs and HTTPS for third-party JS when possible. We don't use protocol-relative URLs in this case because they break when viewing the page locally via `file://`.
+* Use [WAI-ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) attributes in documentation examples to promote accessibility.
### CSS
[Adhere to the Code Guide.](https://codeguide.co/#css)
-- When feasible, default color palettes should comply with [WCAG color contrast guidelines](https://www.w3.org/TR/WCAG20/#visual-audio-contrast).
-- Except in rare cases, don't remove default `:focus` styles (via e.g. `outline: none;`) without providing alternative styles. See [this A11Y Project post](https://www.a11yproject.com/posts/2013-01-25-never-remove-css-outlines/) for more details.
+* When feasible, default color palettes should comply with [WCAG color contrast guidelines](https://www.w3.org/TR/WCAG20/#visual-audio-contrast).
+* Except in rare cases, don't remove the default `:focus` styles (via, e.g. `outline: none;`) without providing alternative styles. See [this A11Y Project post](https://www.a11yproject.com/posts/2013-01-25-never-remove-css-outlines/) for more details.
### JS
-- No semicolons (in client-side JS)
-- 2 spaces (no tabs)
-- strict mode
-- "Attractive"
+* No semicolons (in client-side JS)
+* 2 spaces (no tabs)
+* strict mode
+* "Attractive"
### Checking coding style
Run `npm run test` before committing to ensure your changes follow our coding standards.
-
## License
-By contributing your code, you agree to license your contribution under the [MIT License](../LICENSE).
-By contributing to the documentation, you agree to license your contribution under the [Creative Commons Attribution 3.0 Unported License](https://creativecommons.org/licenses/by/3.0/).
+You agree to license your contribution under the [MIT License](../LICENSE) by contributing your code.
+You agree to license your contribution under the [Creative Commons Attribution 3.0 Unported License](https://creativecommons.org/licenses/by/3.0/).
-Prior to v3.1.0, Bootstrap's code was released under the Apache License v2.0.
+Before v3.1.0, Bootstrap's code was released under the Apache License v2.0.
--
GitLab
From b2f9e8fd9ce4adae9842b629cee1efb552fc4fa6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?=
<20430676+supermavster@users.noreply.github.com>
Date: Mon, 9 May 2022 19:38:49 -0500
Subject: [PATCH 06/53] Update migration.md
Update markdown syntax based on the reference MD004; in turn, text updating with grammatical emphasis for the general public.
---
site/content/docs/5.1/migration.md | 66 +++++++++++++++---------------
1 file changed, 33 insertions(+), 33 deletions(-)
diff --git a/site/content/docs/5.1/migration.md b/site/content/docs/5.1/migration.md
index 9750e4e77a..d1b8c47248 100644
--- a/site/content/docs/5.1/migration.md
+++ b/site/content/docs/5.1/migration.md
@@ -13,19 +13,19 @@ toc: true
### Refreshed design
-Bootstrap v5.2.0 features a subtle design update for a handful of components and properties across the project, **most notably through refined `border-radius` values on buttons and form controls**. Our documentation also has been updated with a new homepage, simpler docs layout that no longer collapses sections of the sidebar, and more prominent examples of [Bootstrap Icons](https://icons.getbootstrap.com).
+Bootstrap v5.2.0 features a subtle design update for a handful of components and properties across the project, **most notably through refined `border-radius` values on buttons and form controls**. Our documentation also has been updated with a new homepage, a more straightforward docs layout that no longer collapses sections of the sidebar and more prominent examples of [Bootstrap Icons](https://icons.getbootstrap.com).
### More CSS variables
-**We've updated all our components to use CSS variables.** While Sass still underpins everything, each component has been updated to include CSS variables on the component base classes (e.g., `.btn`), allowing for more real-time customization of Bootstrap. In subsequent releases, we'll continue to expand our use of CSS variables into our layout, forms, helpers, and utilities. Read more about CSS variables in each component on their respective documentation pages.
+**We've updated all our components to use CSS variables.** While Sass still underpins everything, each component has been updated to include CSS variables on the component base classes (e.g., `.btn`), allowing for more real-time customization of Bootstrap. In subsequent releases, we'll continue to expand our use of CSS variables in our layout, forms, helpers, and utilities. Read more about CSS variables in each component on their respective documentation pages.
-Our CSS variable usage will be somewhat incomplete until Bootstrap 6. While we'd love to fully implement these across the board, they do run the risk of causing breaking changes. For example, setting `$alert-border-width: var(--bs-border-width)` in our source code breaks potential Sass in your own code if you were doing `$alert-border-width * 2` for some reason.
+Our CSS variable usage will be somewhat incomplete until Bootstrap 6. While we'd love to implement these across the board fully, they run the risk of causing breaking changes. For example, setting `$alert-border-width: var(--bs-border-width)` in our source code breaks potential Sass in your own code if you were doing `$alert-border-width * 2` for some reason.
-As such, wherever possible, we will continue to push towards more CSS variables, but please recognize our implementation may be slightly limited in v5.
+Whenever possible, we will continue to push toward more CSS variables, but please recognize our implementation may be slightly limited in v5.
### New `_maps.scss`
-**Bootstrap v5.2.0 introduced a new Sass file with `_maps.scss`.** It pulls 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. _There's a similar shortcoming with CSS variables when they're used to compose other CSS variables._
+**Bootstrap v5.2.0 introduced a new Sass file with `_maps.scss`.** It pulls 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 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. _There's a similar shortcoming with CSS variables when they're used to compose other CSS variables._
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 they get used. The following maps have been moved to the new `_maps.scss`:
@@ -38,7 +38,7 @@ This is why variable customizations in Bootstrap have to come after `@import "fu
- `$negative-spacers`
- `$gutters`
-Your custom Bootstrap CSS builds should now look something like this with a separate maps import.
+Your custom Bootstrap CSS builds should now look like this with a separate maps import.
```diff
// Functions come first
@@ -74,7 +74,7 @@ Your custom Bootstrap CSS builds should now look something like this with a sepa
### Additional 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`. Containers also now keep their gutter values.
+- **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`. Containers also now keep their gutter values.
- **Offcanvas component now has [responsive variations]({{< docsref "/components/offcanvas#responsive" >}}).** The original `.offcanvas` class remains unchanged—it hides content across all viewports. To make it responsive, change that `.offcanvas` class to any `.offcanvas-{sm|md|lg|xl|xxl}` class.
@@ -90,17 +90,17 @@ Your custom Bootstrap CSS builds should now look something like this with a sepa
- Added [striped columns]({{< docsref "/content/tables#striped-columns" >}}) support to tables via the new `.table-striped-columns` class.
-For a complete list of changes, [see the v5.2.0 project on GitHub](https://github.com/twbs/bootstrap/projects/32).
+[see the v5.2.0 project on GitHub](https://github.com/twbs/bootstrap/projects/32).
## v5.1.0
<hr class="mb-4">
-- **Added experimental support for [CSS Grid layout]({{< docsref "/layout/css-grid" >}}). —** This is a work in progress, and is not yet ready for production use, but you can opt into the new feature via Sass. To enable it, disable the default grid, by setting `$enable-grid-classes: false` and enable the CSS Grid by setting `$enable-cssgrid: true`.
+- **Added experimental support for [CSS Grid layout]({{< docsref "/layout/css-grid" >}}). —** This is a work in progress and is not yet ready for production use, but you can opt for the new feature via Sass. To enable it, disable the default grid by setting `$enable-grid-classes: false` and enable the CSS Grid by setting `$enable-cssgrid: true`.
- **Updated navbars to support offcanvas. —** Add [offcanvas drawers in any navbar]({{< docsref "/components/navbar#offcanvas" >}}) with the responsive `.navbar-expand-*` classes and some offcanvas markup.
-- **Added new [placeholder component]({{< docsref "/components/placeholders/" >}}). —** Our newest component, a way to provide temporary blocks in lieu of real content to help indicate that something is still loading in your site or app.
+- **Added new [placeholder component]({{< docsref "/components/placeholders/" >}}). —** Our newest component is a way to provide temporary blocks instead of real content to help indicate that something is still loading in your site or app.
- **Collapse plugin now supports [horizontal collapsing]({{< docsref "/components/collapse#horizontal" >}}). —** Add `.collapse-horizontal` to your `.collapse` to collapse the `width` instead of the `height`. Avoid browser repainting by setting a `min-height` or `height`.
@@ -112,7 +112,7 @@ For a complete list of changes, [see the v5.2.0 project on GitHub](https://githu
- **Added new snippet examples based to show how to customize our components. —** Pull ready to use customized components and other common design patterns with our new [Snippets examples]({{< docsref "/examples#snippets" >}}). Includes [footers]({{< docsref "/examples/footers/" >}}), [dropdowns]({{< docsref "/examples/dropdowns/" >}}), [list groups]({{< docsref "/examples/list-groups/" >}}), and [modals]({{< docsref "/examples/modals/" >}}).
-- **Removed unused positioning styles from popovers and tooltips** as these are handled solely by Popper. `$tooltip-margin` has been deprecated and set to `null` in the process.
+- **Removed unused positioning styles from popovers and tooltips** as these are handled solely by Popper. `$tooltip-margin` has been deprecated and set to `null`.
Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.com/2021/08/04/bootstrap-5-1-0/)
@@ -126,8 +126,8 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co
- Dropped jQuery.
- Upgraded from Popper v1.x to Popper v2.x.
-- Replaced Libsass with Dart Sass as our Sass compiler given Libsass was deprecated.
-- Migrated from Jekyll to Hugo for building our documentation
+- Replaced Libsass with Dart Sass as our Sass compiler, given Libsass was deprecated.
+- Migrated from Jekyll to Hugo to build our documentation
## Browser support
@@ -192,9 +192,9 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co
## Color system
-- The color system which worked with `color-level()` and `$theme-color-interval` was removed in favor of a new color system. All `lighten()` and `darken()` functions in our codebase are replaced by `tint-color()` and `shade-color()`. These functions will mix the color with either white or black instead of changing its lightness by a fixed amount. The `shift-color()` will either tint or shade a color depending on whether its weight parameter is positive or negative. [See #30622](https://github.com/twbs/bootstrap/pull/30622) for more details.
+- The color system, which worked with `color-level()` and `$theme-color-interval` was removed in favor of a new color system. All `lighten()` and `darken()` functions in our codebase are replaced by `tint-color()` and `shade-color()`. These functions will mix the color with either white or black instead of changing its lightness by a fixed amount. The `shift-color()` will either tint or shade a color depending on whether its weight parameter is positive or negative. [See #30622](https://github.com/twbs/bootstrap/pull/30622) for more details.
-- Added new tints and shades for every color, providing nine separate colors for each base color, as new Sass variables.
+- Added new tints and shades for every color, providing nine separate colors for each base color as new Sass variables.
- Improved color contrast. Bumped color contrast ratio from 3:1 to 4.5:1 and updated blue, green, cyan, and pink colors to ensure WCAG 2.1 AA contrast. Also changed our color contrast color from `$gray-900` to `$black`.
@@ -204,7 +204,7 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co
- **New breakpoint!** Added new `xxl` breakpoint for `1400px` and up. No changes to all other breakpoints.
-- **Improved gutters.** Gutters are now set in rems, and are narrower than v4 (`1.5rem`, or about `24px`, down from `30px`). This aligns our grid system's gutters with our spacing utilities.
+- **Improved gutters.** Gutters are now set in rems and are narrower than v4 (`1.5rem`, or about `24px`, down from `30px`). This aligns our grid system's gutters with our spacing utilities.
- Added new [gutter class]({{< docsref "/layout/gutters" >}}) (`.g-*`, `.gx-*`, and `.gy-*`) to control horizontal/vertical gutters, horizontal gutters, and vertical gutters.
- <span class="badge bg-danger">Breaking</span> Renamed `.no-gutters` to `.g-0` to match new gutter utilities.
@@ -228,7 +228,7 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co
- Added two new `.display-*` heading sizes, `.display-5` and `.display-6`.
-- **Links are underlined by default** (not just on hover), unless they're part of specific components.
+- **Links are underlined by default** (not just on hover) unless they're part of specific components.
- **Redesigned tables** to refresh their styles and rebuild them with CSS variables for more control over styling.
@@ -238,7 +238,7 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co
- <span class="badge bg-danger">Breaking</span> The `table-row-variant()` mixin is renamed to `table-variant()` and accepts only 2 parameters: `$color` (color name) and `$value` (color code). The border color and accent colors are automatically calculated based on the table factor variables.
-- Split table cell padding variables into `-y` and `-x`.
+- Splittable cell padding variables into `-y' and`-x`.
- <span class="badge bg-danger">Breaking</span> Dropped `.pre-scrollable` class. [See #29135](https://github.com/twbs/bootstrap/pull/29135)
@@ -250,17 +250,17 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co
- Reset default horizontal `padding-left` on `<ul>` and `<ol>` elements from browser default `40px` to `2rem`.
-- Added `$enable-smooth-scroll`, which applies `scroll-behavior: smooth` globally—except for users asking for reduced motion through `prefers-reduced-motion` media query. [See #31877](https://github.com/twbs/bootstrap/pull/31877)
+- Added `$enable-smooth-scroll`, which applies `scroll-behavior: smooth` globally—except for users asking for reduced motion through the `prefers-reduced-motion` media query. [See #31877](https://github.com/twbs/bootstrap/pull/31877)
## RTL
-- Horizontal direction specific variables, utilities, and mixins have all been renamed to use logical properties like those found in flexbox layouts—e.g., `start` and `end` in lieu of `left` and `right`.
+- Horizontal direction specific variables, utilities, and mixins have been renamed to use logical properties like those found in flexbox layouts—e.g., `start` and `end` instead of `left` and `right`.
## Forms
- **Added new floating forms!** We've promoted the Floating labels example to fully supported form components. [See the new Floating labels page.]({{< docsref "/forms/floating-labels" >}})
-- <span class="badge bg-danger">Breaking</span> **Consolidated native and custom form elements.** Checkboxes, radios, selects, and other inputs that had native and custom classes in v4 have been consolidated. Now nearly all our form elements are entirely custom, most without the need for custom HTML.
+- <span class="badge bg-danger">Breaking</span> **Consolidated native and custom form elements.** Checkboxes, radios, selects, and other inputs with native and custom classes in v4 have been consolidated. Now nearly all our form elements are entirely custom, most without the need for custom HTML.
- `.custom-control.custom-checkbox` is now `.form-check`.
- `.custom-control.custom-custom-radio` is now `.form-check`.
- `.custom-control.custom-switch` is now `.form-check.form-switch`.
@@ -271,7 +271,7 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co
- <span class="badge bg-danger">Breaking</span> Dropped `.input-group-append` and `.input-group-prepend`. You can now just add buttons and `.input-group-text` as direct children of the input groups.
-- The longstanding [Missing border radius on input group with validation feedback bug](https://github.com/twbs/bootstrap/issues/25110) is finally fixed by adding an additional `.has-validation` class to input groups with validation.
+- The longstanding [Missing border radius on input group with validation feedback bug](https://github.com/twbs/bootstrap/issues/25110) is finally fixed by adding the `.has-validation` class to input groups with validation.
- <span class="badge bg-danger">Breaking</span> **Dropped form-specific layout classes for our grid system.** Use our grid and utilities instead of `.form-group`, `.form-row`, or `.form-inline`.
@@ -281,7 +281,7 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co
- Form controls no longer used fixed `height` when possible, instead deferring to `min-height` to improve customization and compatibility with other components.
-- Validation icons are no longer applied to `<select>`s with `multiple`.
+- Validation icons are no longer applied to `<select>'s with`multiple`.
- Rearranged source Sass files under `scss/forms/`, including input group styles.
@@ -299,7 +299,7 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co
- Alerts now have [examples with icons]({{< docsref "/components/alerts#icons" >}}).
-- Removed custom styles for `<hr>`s in each alert since they already use `currentColor`.
+- Removed custom styles for `<hr>'s in each alert since they already use`currentColor`.
### Badges
@@ -347,7 +347,7 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co
- <span class="badge bg-danger">Breaking</span> Renamed `.close` to `.btn-close` for a less generic name.
-- Close buttons now use a `background-image` (embedded SVG) instead of a `×` in the HTML, allowing for easier customization without the need to touch your markup.
+- Close buttons now use a `background-image` (embedded SVG) instead of a `×` in the HTML, allowing for easier customization without touching your markup.
- Added new `.btn-close-white` variant that uses `filter: invert(1)` to enable higher contrast dismiss icons against darker backgrounds.
@@ -365,11 +365,11 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co
- <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, 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.
+- Dropdown menus now have a `data-bs-popper= "static"` attribute set when the positioning of the dropdown is static or the dropdown is in the navbar. Our JavaScript adds this 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.
-- Dropdown menus can now be clickable with a new `autoClose` option to handle the [auto close behavior]({{< docsref "/components/dropdowns#auto-close-behavior" >}}). You can use this option to accept the click inside or outside the dropdown menu to make it interactive.
+- Dropdown menus can now be clickable with a new `autoClose` option to handle the [auto close behavior]({{< doc ref "/components/dropdowns#auto-close-behavior" >}}). You can use this option to accept the click inside or outside the dropdown menu to make it interactive.
- Dropdowns now support `.dropdown-item`s wrapped in `<li>`s.
@@ -395,9 +395,9 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co
### Pagination
-- Pagination links now have customizable `margin-left` that are dynamically rounded on all corners when separated from one another.
+- Pagination links now have customizable `margin-left` that are dynamically rounded on all corners when separated.
-- Added `transition`s to pagination links.
+- Added `transition's to pagination links.
### Popovers
@@ -452,7 +452,7 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co
- <span class="badge bg-danger">Breaking</span> Removed `.text-hide` as it's an antiquated method for hiding text that shouldn't be used anymore.
-- Added `.fs-*` utilities for `font-size` utilities (with RFS enabled). These use the same scale as HTML's default headings (1-6, large to small), and can be modified via Sass map.
+- Added `.fs-*` utilities for `font-size` utilities (with RFS enabled). These use the same scale as HTML's default headings (1-6, large to small) and can be modified via Sass map.
- <span class="badge bg-danger">Breaking</span> Renamed `.font-weight-*` utilities as `.fw-*` for brevity and consistency.
@@ -466,14 +466,14 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co
- Moved the `.d-none` utility in our CSS to give it more weight over other display utilities.
-- Extended the `.visually-hidden-focusable` helper to also work on containers, using `:focus-within`.
+- Extended the `.visually-hidden-focusable` helper to work on containers, using `:focus-within`.
## Helpers
- <span class="badge bg-danger">Breaking</span> **Responsive embed helpers have been renamed to [ratio helpers]({{< docsref "/helpers/ratio" >}})** with new class names and improved behaviors, as well as a helpful CSS variable.
- Classes have been renamed to change `by` to `x` in the aspect ratio. For example, `.ratio-16by9` is now `.ratio-16x9`.
- We've dropped the `.embed-responsive-item` and element group selector in favor of a simpler `.ratio > *` selector. No more class is needed, and the ratio helper now works with any HTML element.
- - The `$embed-responsive-aspect-ratios` Sass map has been renamed to `$aspect-ratios` and its values have been simplified to include the class name and the percentage as the `key: value` pair.
+ - The `$embed-responsive-aspect-ratios` Sass map has been renamed to `$aspect-ratios`, and its values have been simplified to include the class name and the percentage as the `key: value` pair.
- CSS variables are now generated and included for each value in the Sass map. Modify the `--bs-aspect-ratio` variable on the `.ratio` to create any [custom aspect ratio]({{< docsref "/helpers/ratio#custom-ratios" >}}).
- <span class="badge bg-danger">Breaking</span> **"Screen reader" classes are now ["visually hidden" classes]({{< docsref "/helpers/visually-hidden" >}}).**
@@ -496,7 +496,7 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
-- `popperConfig` can be passed as a function that accepts the Bootstrap's default Popper config as an argument, so that you can merge this default configuration in your way. **Applies to dropdowns, popovers, and tooltips.**
+- `popperConfig` can be passed as a function that accepts Bootstrap's default Popper config as an argument so that you can merge this default configuration in your way. **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.**
--
GitLab
From d8c7d8cecc15f954be884d80893a0fd7fda26976 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?=
<20430676+supermavster@users.noreply.github.com>
Date: Mon, 9 May 2022 19:40:19 -0500
Subject: [PATCH 07/53] Update team.md
A general structure for a specific phrase in the document
---
site/content/docs/5.1/about/team.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/site/content/docs/5.1/about/team.md b/site/content/docs/5.1/about/team.md
index 3c1666f29d..ff893471c6 100644
--- a/site/content/docs/5.1/about/team.md
+++ b/site/content/docs/5.1/about/team.md
@@ -5,7 +5,7 @@ description: An overview of the founding team and core contributors to Bootstrap
group: about
---
-Bootstrap is maintained by the founding team and a small group of invaluable core contributors, with the massive support and involvement of our community.
+Bootstrap is maintained by the founding team and a small group of invaluable core contributors, with our community's massive support and involvement.
{{< team.inline >}}
<div class="list-group mb-3">
--
GitLab
From e6fb633aa17b684ccee61543cdd898f06904110e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?=
<20430676+supermavster@users.noreply.github.com>
Date: Mon, 9 May 2022 19:42:01 -0500
Subject: [PATCH 08/53] Update brand.md
General structure for a specific phrase in the document, minor changes.
---
site/content/docs/5.1/about/brand.md | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/site/content/docs/5.1/about/brand.md b/site/content/docs/5.1/about/brand.md
index 80c613526e..9821c0cfa8 100644
--- a/site/content/docs/5.1/about/brand.md
+++ b/site/content/docs/5.1/about/brand.md
@@ -6,11 +6,11 @@ group: about
toc: true
---
-Have a need for Bootstrap's brand resources? Great! We have only a few guidelines we follow, and in turn ask you to follow as well.
+Need Bootstrap's brand resources? Great! We have only a few guidelines we follow and, in turn, ask you to follow as well.
## Logo
-When referencing Bootstrap, use our logo mark. Do not modify our logos in any way. Do not use Bootstrap's branding for your own open or closed source projects. **Do not use the Twitter name or logo** in association with Bootstrap.
+When referencing Bootstrap, use our logo mark. Do not modify our logos in any way. Do not use Bootstrap's branding for your own open or closed source projects. **Do not use the Twitter name or logo** associated with Bootstrap.
<div class="bd-brand-item px-2 py-5 mb-3 bg-light rounded-lg">
<img class="d-block img-fluid mx-auto" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="Bootstrap" width="256" height="204">
--
GitLab
From 0c53224314ffd22b071e2a0f440d21c78283c60d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?=
<20430676+supermavster@users.noreply.github.com>
Date: Mon, 9 May 2022 19:48:48 -0500
Subject: [PATCH 09/53] Update grid.md
Update markdown syntax based on the reference MD033, MD004; in turn, text updating with grammatical emphasis for the general public.
---
site/content/docs/5.1/layout/grid.md | 42 ++++++++++++++--------------
1 file changed, 21 insertions(+), 21 deletions(-)
diff --git a/site/content/docs/5.1/layout/grid.md b/site/content/docs/5.1/layout/grid.md
index 05fc1bd65d..e17fbd79d3 100644
--- a/site/content/docs/5.1/layout/grid.md
+++ b/site/content/docs/5.1/layout/grid.md
@@ -8,7 +8,7 @@ toc: true
## Example
-Bootstrap's grid system uses a series of containers, rows, and columns to layout and align content. It's built with [flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) and is fully responsive. Below is an example and an in-depth explanation for how the grid system comes together.
+Bootstrap's grid system uses a series of containers, rows, and columns to layout and aligns content. It's built with [flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) and is fully responsive. Below is an example and an in-depth explanation of how the grid system comes together.
{{< callout info >}}
**New to or unfamiliar with flexbox?** [Read this CSS Tricks flexbox guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background) for background, terminology, guidelines, and code snippets.
@@ -30,29 +30,29 @@ Bootstrap's grid system uses a series of containers, rows, and columns to layout
</div>
{{< /example >}}
-The above example creates three equal-width columns across all devices and viewports using our predefined grid classes. Those columns are centered in the page with the parent `.container`.
+Using our predefined grid classes, the above example creates three equal-width columns across all devices and viewports. Those columns are centered on the page with the parent `.container`.
## How it works
Breaking it down, here's how the grid system comes together:
-- **Our grid supports [six responsive breakpoints]({{< docsref "/layout/breakpoints" >}}).** Breakpoints are based on `min-width` media queries, meaning they affect that breakpoint and all those above it (e.g., `.col-sm-4` applies to `sm`, `md`, `lg`, `xl`, and `xxl`). This means you can control container and column sizing and behavior by each breakpoint.
+- **Our grid supports [six responsive breakpoints]({{< docsref "/layout/breakpoints" >}}).** Breakpoints are based on `min-width` media queries, which affect that breakpoint and all those above it (e.g., `.col-sm-4` applies to `sm`, `md`, `lg`, `xl`, and `xxl`). This means you can control each breakpoint's container and column sizing and behavior.
- **Containers center and horizontally pad your content.** Use `.container` for a responsive pixel width, `.container-fluid` for `width: 100%` across all viewports and devices, or a responsive container (e.g., `.container-md`) for a combination of fluid and pixel widths.
- **Rows are wrappers for columns.** Each column has horizontal `padding` (called a gutter) for controlling the space between them. This `padding` is then counteracted on the rows with negative margins to ensure the content in your columns is visually aligned down the left side. Rows also support modifier classes to [uniformly apply column sizing](#row-columns) and [gutter classes]({{< docsref "/layout/gutters" >}}) to change the spacing of your content.
-- **Columns are incredibly flexible.** There are 12 template columns available per row, allowing you to create different combinations of elements that span any number of columns. Column classes indicate the number of template columns to span (e.g., `col-4` spans four). `width`s are set in percentages so you always have the same relative sizing.
+- **Columns are incredibly flexible.** There are 12 template columns available per row, allowing you to create different combinations of elements that span any number of columns. Column classes indicate the number of template columns to span (e.g., `col-4` spans four). `widths are set in percentages, so you always have the exact relative sizing.
- **Gutters are also responsive and customizable.** [Gutter classes are available]({{< docsref "/layout/gutters" >}}) across all breakpoints, with all the same sizes as our [margin and padding spacing]({{< docsref "/utilities/spacing" >}}). Change horizontal gutters with `.gx-*` classes, vertical gutters with `.gy-*`, or all gutters with `.g-*` classes. `.g-0` is also available to remove gutters.
-- **Sass variables, maps, and mixins power the grid.** If you don't want to use the predefined grid classes in Bootstrap, you can use our [grid's source Sass](#sass) to create your own with more semantic markup. We also include some CSS custom properties to consume these Sass variables for even greater flexibility for you.
+- **Sass variables, maps, and mixins power the grid.** If you don't want to use the predefined grid classes in Bootstrap, you can use our [grid's source Sass](#sass) to create your own with more semantic markup. We also include some CSS custom properties to consume these Sass variables for even greater flexibility.
Be aware of the limitations and [bugs around flexbox](https://github.com/philipwalton/flexbugs), like the [inability to use some HTML elements as flex containers](https://github.com/philipwalton/flexbugs#flexbug-9).
## Grid options
-Bootstrap's grid system can adapt across all six default breakpoints, and any breakpoints you customize. The six default grid tiers are as follow:
+Bootstrap's grid system can adapt across all six default breakpoints and any breakpoints you customize. The six default grid tiers are as follows:
- Extra small (xs)
- Small (sm)
@@ -61,7 +61,7 @@ Bootstrap's grid system can adapt across all six default breakpoints, and any br
- Extra large (xl)
- Extra extra large (xxl)
-As noted above, each of these breakpoints have their own container, unique class prefix, and modifiers. Here's how the grid changes across these breakpoints:
+As noted above, each of these breakpoints has its container, unique class prefix, and modifiers. Here's how the grid changes across these breakpoints:
<table class="table mb-4">
<thead>
@@ -137,11 +137,11 @@ As noted above, each of these breakpoints have their own container, unique class
## Auto-layout columns
-Utilize breakpoint-specific column classes for easy column sizing without an explicit numbered class like `.col-sm-6`.
+Utilize breakpoint-specific column classes for easy column sizing without a precise numbered class like `.col-sm-6`.
### Equal-width
-For example, here are two grid layouts that apply to every device and viewport, from `xs` to `xxl`. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.
+For example, two grid layouts apply to every device and viewport, from `xs` to `xxl`. Add any number of unitless classes for each breakpoint you need, and every column will be the same width.
{{< example class="bd-example-row" >}}
<div class="container">
@@ -235,7 +235,7 @@ Bootstrap's grid includes six tiers of predefined classes for building complex r
### All breakpoints
-For grids that are the same from the smallest of devices to the largest, use the `.col` and `.col-*` classes. Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to `.col`.
+For grids that are the same from smallest devices to largest, use the `.col` and `.col-*` classes. Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to `.col`.
{{< example class="bd-example-row" >}}
<div class="container">
@@ -254,7 +254,7 @@ For grids that are the same from the smallest of devices to the largest, use the
### Stacked to horizontal
-Using a single set of `.col-sm-*` classes, you can create a basic grid system that starts out stacked and becomes horizontal at the small breakpoint (`sm`).
+Using a single set of `.col-sm-*` classes, you can create a basic grid system that starts stacked and becomes horizontal at the small breakpoint (`sm`).
{{< example class="bd-example-row" >}}
<div class="container">
@@ -272,7 +272,7 @@ Using a single set of `.col-sm-*` classes, you can create a basic grid system th
### Mix and match
-Don't want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works.
+Don't want your columns to stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works.
{{< example class="bd-example-row" >}}
<div class="container">
@@ -299,9 +299,9 @@ Don't want your columns to simply stack in some grid tiers? Use a combination of
### Row columns
-Use the responsive `.row-cols-*` classes to quickly set the number of columns that best render your content and layout. Whereas normal `.col-*` classes apply to the individual columns (e.g., `.col-md-4`), the row columns classes are set on the parent `.row` as a shortcut. With `.row-cols-auto` you can give the columns their natural width.
+Use the responsive `.row-cols-*` classes to quickly set the number of columns that best render your content and layout. At the same time, standard `.col-*` classes apply to the individual columns (e.g., `.col-md-4`), and the row and column classes are set on the parent `.row` as a shortcut. With `.row-cols-auto`, you can give the columns their natural width.
-Use these row columns classes to quickly create basic grid layouts or to control your card layouts.
+Use these row and column classes to create basic grid layouts or control your card layouts quickly.
{{< example class="bd-example-row" >}}
<div class="container">
@@ -409,11 +409,11 @@ To nest your content with the default grid, add a new `.row` and set of `.col-sm
## Sass
-When using Bootstrap's source Sass files, you have the option of using Sass variables and mixins to create custom, semantic, and responsive page layouts. Our predefined grid classes use these same variables and mixins to provide a whole suite of ready-to-use classes for fast responsive layouts.
+When using Bootstrap's source Sass files, you can use Sass variables and mixins to create custom, semantic, and responsive page layouts. Our predefined grid classes use these same variables and mixins to provide a whole suite of ready-to-use classes for fast, responsive layouts.
### Variables
-Variables and maps determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.
+Variables and maps determine the number of columns, the gutter width, and the media query point to begin floating columns. We use these to generate the predefined grid classes documented above and the custom mixins listed below.
```scss
$grid-columns: 12;
@@ -426,7 +426,7 @@ $grid-gutter-width: 1.5rem;
### Mixins
-Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.
+Mixins are used with the grid variables to generate semantic CSS for individual grid columns.
```scss
// Creates a wrapper for a series of columns
@@ -445,7 +445,7 @@ Mixins are used in conjunction with the grid variables to generate semantic CSS
### Example usage
-You can modify the variables to your own custom values, or just use the mixins with their default values. Here's an example of using the default settings to create a two-column layout with a gap between.
+You can modify the variables to your custom values or use the mixins with their default values. Here's an example of using the default settings to create a two-column layout with a gap between.
```scss
.example-container {
@@ -493,11 +493,11 @@ You can modify the variables to your own custom values, or just use the mixins w
## Customizing the grid
-Using our built-in grid Sass variables and maps, it's possible to completely customize the predefined grid classes. Change the number of tiers, the media query dimensions, and the container widths—then recompile.
+Using our built-in grid Sass variables and maps, it's possible to customize the predefined grid classes completely. Then, change the number of tiers, the media query dimensions, and the container widths and recompile.
### Columns and gutters
-The number of grid columns can be modified via Sass variables. `$grid-columns` is used to generate the widths (in percent) of each individual column while `$grid-gutter-width` sets the width for the column gutters.
+The number of grid columns can be modified via Sass variables. `$grid-columns` is used to generate the widths (in percent) of each column, while `$grid-gutter-width` sets the width for the column gutters.
```scss
$grid-columns: 12 !default;
@@ -523,4 +523,4 @@ $container-max-widths: (
);
```
-When making any changes to the Sass variables or maps, you'll need to save your changes and recompile. Doing so will output a brand new set of predefined grid classes for column widths, offsets, and ordering. Responsive visibility utilities will also be updated to use the custom breakpoints. Make sure to set grid values in `px` (not `rem`, `em`, or `%`).
+When making any changes to the Sass variables or maps, you'll need to save your changes and recompile them. Doing so will output a new set of predefined grid classes for column widths, offsets, and ordering. Responsive visibility utilities will also be updated to use the custom breakpoints. Make sure to set grid values in `px` (not `rem`, `em`, or `%`).
--
GitLab
From 906b096b09791f036e914f02b40d16050e40202b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?=
<20430676+supermavster@users.noreply.github.com>
Date: Mon, 9 May 2022 19:49:33 -0500
Subject: [PATCH 10/53] Update range.md
General structure for a specific phrase in the document
---
site/content/docs/5.1/forms/range.md | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/site/content/docs/5.1/forms/range.md b/site/content/docs/5.1/forms/range.md
index d7ac6965cd..8b6e452fe2 100644
--- a/site/content/docs/5.1/forms/range.md
+++ b/site/content/docs/5.1/forms/range.md
@@ -8,7 +8,7 @@ toc: true
## Overview
-Create custom `<input type="range">` controls with `.form-range`. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only Firefox supports "filling" their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it.
+Create custom `<input type="range">` controls with `.form-range`. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only Firefox supports "filling" their track from the left or right of the thumb to visually indicate progress, we do not currently support it.
{{< example >}}
<label for="customRange1" class="form-label">Example range</label>
@@ -35,7 +35,7 @@ Range inputs have implicit values for `min` and `max`—`0` and `100`, respectiv
## Steps
-By default, range inputs "snap" to integer values. To change this, you can specify a `step` value. In the example below, we double the number of steps by using `step="0.5"`.
+By default, range inputs "snap" to integer values. To change this, you can specify a `step` value. In the example below, we double the number of steps using `step="0.5"`.
{{< example >}}
<label for="customRange3" class="form-label">Example range</label>
--
GitLab
From bc9048746d234f6ef9e9503f900ab6e9257e2f30 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?=
<20430676+supermavster@users.noreply.github.com>
Date: Mon, 9 May 2022 19:50:32 -0500
Subject: [PATCH 11/53] Update icons.md
Update markdown syntax based on the reference MD032; in turn, text updating with grammatical emphasis for the general public.
---
site/content/docs/5.1/extend/icons.md | 11 ++++++-----
1 file changed, 6 insertions(+), 5 deletions(-)
diff --git a/site/content/docs/5.1/extend/icons.md b/site/content/docs/5.1/extend/icons.md
index 1e26503bdb..2e8fa6f7d4 100644
--- a/site/content/docs/5.1/extend/icons.md
+++ b/site/content/docs/5.1/extend/icons.md
@@ -5,27 +5,28 @@ description: Guidance and suggestions for using external icon libraries with Boo
group: extend
---
-While Bootstrap doesn't include an icon set by default, we do have our own comprehensive icon library called Bootstrap Icons. Feel free to use them or any other icon set in your project. We've included details for Bootstrap Icons and other preferred icon sets below.
+While Bootstrap doesn't include an icon set by default, we have our comprehensive icon library called Bootstrap Icons. Feel free to use them or any other icon set in your project. We've included details for Bootstrap Icons and other preferred icon sets below.
-While most icon sets include multiple file formats, we prefer SVG implementations for their improved accessibility and vector support.
+While most icon sets include multiple file formats, we prefer SVG implementations for improved accessibility and vector support.
## Bootstrap Icons
Bootstrap Icons is a growing library of SVG icons that are designed by [@mdo](https://github.com/mdo) and maintained by [the Bootstrap Team](https://github.com/orgs/twbs/people). The beginnings of this icon set come from Bootstrap's very own components—our forms, carousels, and more. Bootstrap has very few icon needs out of the box, so we didn't need much. However, once we got going, we couldn't stop making more.
-Oh, and did we mention they're completely open source? Licensed under MIT, just like Bootstrap, our icon set is available to everyone.
+Oh, and did we mention they're completely open source? Licensed under MIT, our icon set is available to everyone, just like Bootstrap.
[Learn more about Bootstrap Icons]({{< param icons >}}), including how to install them and recommended usage.
## Alternatives
-We've tested and used these icon sets ourselves as preferred alternatives to Bootstrap Icons.
+We've tested and used this icon sets ourselves as preferred alternatives to Bootstrap Icons.
{{< markdown >}}
{{< icons.inline >}}
{{- $type := .Get "type" | default "preferred" -}}
{{- range (index .Site.Data.icons $type) }}
+
- [{{ .name }}]({{ .website }})
{{- end }}
{{< /icons.inline >}}
@@ -33,7 +34,7 @@ We've tested and used these icon sets ourselves as preferred alternatives to Boo
## More options
-While we haven't tried these out ourselves, they do look promising and provide multiple formats, including SVG.
+While we haven't tried these out ourselves, they look promising and provide multiple formats, including SVG.
{{< markdown >}}
{{< icons.inline type="more" />}}
--
GitLab
From 3ccc516f9478b892a6cafeeeefd162d0a7ae9e2b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?=
<20430676+supermavster@users.noreply.github.com>
Date: Mon, 9 May 2022 19:53:05 -0500
Subject: [PATCH 12/53] Update layout.md
Update markdown syntax based on the reference MD032 and MD004; in turn, text updating with grammatical emphasis for the general public.
---
site/content/docs/5.1/forms/layout.md | 18 +++++++++---------
1 file changed, 9 insertions(+), 9 deletions(-)
diff --git a/site/content/docs/5.1/forms/layout.md b/site/content/docs/5.1/forms/layout.md
index 21423040e4..a8a43f1ef6 100644
--- a/site/content/docs/5.1/forms/layout.md
+++ b/site/content/docs/5.1/forms/layout.md
@@ -1,7 +1,7 @@
---
layout: docs
title: Layout
-description: Give your forms some structure—from inline to horizontal to custom grid implementations—with our form layout options.
+description: Give your forms some structure with our form layout options, from inline to horizontal to custom grid implementations.
group: forms
toc: true
---
@@ -13,13 +13,13 @@ Every group of form fields should reside in a `<form>` element. Bootstrap provid
- New to browser forms? Consider reviewing [the MDN form docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) for an overview and complete list of available attributes.
- `<button>`s within a `<form>` default to `type="submit"`, so strive to be specific and always include a `type`.
-Since Bootstrap applies `display: block` and `width: 100%` to almost all our form controls, forms will by default stack vertically. Additional classes can be used to vary this layout on a per-form basis.
+Since Bootstrap applies `display: block` and `width: 100%` to almost all our form controls, forms will, by default, stack vertically; Additional classes can be used to vary this layout on a per-form basis.
## Utilities
-[Margin utilities]({{< docsref "/utilities/spacing" >}}) are the easiest way to add some structure to forms. They provide basic grouping of labels, controls, optional form text, and form validation messaging. We recommend sticking to `margin-bottom` utilities, and using a single direction throughout the form for consistency.
+[Margin utilities]({{< docsref "/utilities/spacing" >}}) are the easiest way to add some structure to forms. They provide a basic grouping of labels, controls, optional form text, and form validation messaging. We recommend sticking to `margin-bottom` utilities and using a single direction throughout the form for consistency.
-Feel free to build your forms however you like, with `<fieldset>`s, `<div>`s, or nearly any other element.
+Feel free to build your forms however you like, with `<fieldset>'s, `<div>'s, or nearly any other element.
{{< example >}}
<div class="mb-3">
@@ -49,7 +49,7 @@ More complex forms can be built using our grid classes. Use these for form layou
## Gutters
-By adding [gutter modifier classes]({{< docsref "/layout/gutters" >}}), you can have control over the gutter width in as well the inline as block direction. **Also requires the `$enable-grid-classes` Sass variable to be enabled** (on by default).
+By adding [gutter modifier classes]({{< docsref "/layout/gutters">}}), you can have control over the gutter width as well as the inline as block direction. **Also requires the `$enable-grid-classes` Sass variable to be enabled** (by default).
{{< example >}}
<div class="row g-3">
@@ -113,9 +113,9 @@ More complex layouts can also be created with the grid system.
## Horizontal form
-Create horizontal forms with the grid by adding the `.row` class to form groups and using the `.col-*-*` classes to specify the width of your labels and controls. Be sure to add `.col-form-label` to your `<label>`s as well so they're vertically centered with their associated form controls.
+Create horizontal forms with the grid by adding the `.row` class to form groups and using the `.col-*-*` classes to specify the width of your labels and controls. Be sure to add `.col-form-label` to your `<label>'s so they're vertically centered with their associated form controls.
-At times, you maybe need to use margin or padding utilities to create that perfect alignment you need. For example, we've removed the `padding-top` on our stacked radio inputs label to better align the text baseline.
+You may need to use margin or padding utilities to create that perfect alignment you need. For example, we've removed the `padding-top` on our stacked radio inputs label to align the text baseline better.
{{< example >}}
<form>
@@ -195,7 +195,7 @@ Be sure to use `.col-form-label-sm` or `.col-form-label-lg` to your `<label>`s o
## Column sizing
-As shown in the previous examples, our grid system allows you to place any number of `.col`s within a `.row`. They'll split the available width equally between them. You may also pick a subset of your columns to take up more or less space, while the remaining `.col`s equally split the rest, with specific column classes like `.col-sm-7`.
+As the previous examples show, our grid system allows you to place any number of `.col's within a `.row`. They'll split the available width equally between them. You may also pick a subset of your columns to take up more or less space, while the remaining `.col's equally split the rest, with specific column classes like `.col-sm-7`.
{{< example >}}
<div class="row g-3">
@@ -213,7 +213,7 @@ As shown in the previous examples, our grid system allows you to place any numbe
## Auto-sizing
-The example below uses a flexbox utility to vertically center the contents and changes `.col` to `.col-auto` so that your columns only take up as much space as needed. Put another way, the column sizes itself based on the contents.
+The example below uses a flexbox utility to vertically center the contents and changes `.col` to `.col-auto` so that your columns only take up as much space as needed. Put another way, the column sizes themselves based on the contents.
{{< example >}}
<form class="row gy-2 gx-3 align-items-center">
--
GitLab
From e978da5badb2905acc6ad1959ea3ef6ef5418bc5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?=
<20430676+supermavster@users.noreply.github.com>
Date: Mon, 9 May 2022 19:54:06 -0500
Subject: [PATCH 13/53] Update select.md
Update markdown syntax based on the reference MD033; in turn, text updating with grammatical emphasis for the general public.
---
site/content/docs/5.1/forms/select.md | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/site/content/docs/5.1/forms/select.md b/site/content/docs/5.1/forms/select.md
index 7f0c255efb..4c7a441e35 100644
--- a/site/content/docs/5.1/forms/select.md
+++ b/site/content/docs/5.1/forms/select.md
@@ -1,14 +1,14 @@
---
layout: docs
title: Select
-description: Customize the native `<select>`s with custom CSS that changes the element's initial appearance.
+description: Customize the native `<select>'s with custom CSS that changes the element's initial appearance.
group: forms
toc: true
---
## Default
-Custom `<select>` menus need only a custom class, `.form-select` to trigger the custom styles. Custom styles are limited to the `<select>`'s initial appearance and cannot modify the `<option>`s due to browser limitations.
+Custom `<select>` menus need only a custom class, `.form-select` to trigger the custom styles. Custom styles are limited to the `<select>`'s initial appearance and cannot modify the `<option>'s due to browser limitations.
{{< example >}}
<select class="form-select" aria-label="Default select example">
--
GitLab
From 498486f8d647c58dec8ed91c9ebea864a3d6c6c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?=
<20430676+supermavster@users.noreply.github.com>
Date: Mon, 9 May 2022 19:57:58 -0500
Subject: [PATCH 14/53] Update license.md
Update markdown syntax based on the reference MD026 and MD004; in turn, text updating with grammatical emphasis for the general public.
---
site/content/docs/5.1/about/license.md | 12 ++++++------
1 file changed, 6 insertions(+), 6 deletions(-)
diff --git a/site/content/docs/5.1/about/license.md b/site/content/docs/5.1/about/license.md
index 07e60e00aa..49f9ecad62 100644
--- a/site/content/docs/5.1/about/license.md
+++ b/site/content/docs/5.1/about/license.md
@@ -5,20 +5,20 @@ description: Commonly asked questions about Bootstrap's open source license.
group: about
---
-Bootstrap is released under the MIT license and is copyright {{< year >}} Twitter. Boiled down to smaller chunks, it can be described with the following conditions.
+Bootstrap is released under the MIT license and is copyright {{< year >}} Twitter. Where it skews into smaller pieces, it can be described with the following conditions.
-## It requires you to:
+## It requires you to
- Keep the license and copyright notice included in Bootstrap's CSS and JavaScript files when you use them in your works
-## It permits you to:
+## It permits you to
- Freely download and use Bootstrap, in whole or in part, for personal, private, company internal, or commercial purposes
- Use Bootstrap in packages or distributions that you create
- Modify the source code
- Grant a sublicense to modify and distribute Bootstrap to third parties not included in the license
-## It forbids you to:
+## It forbids you to
- Hold the authors and license owners liable for damages as Bootstrap is provided without warranty
- Hold the creators or copyright holders of Bootstrap liable
@@ -26,9 +26,9 @@ Bootstrap is released under the MIT license and is copyright {{< year >}} Twitte
- Use any marks owned by Twitter in any way that might state or imply that Twitter endorses your distribution
- Use any marks owned by Twitter in any way that might state or imply that you created the Twitter software in question
-## It does not require you to:
+## It does not require you to
-- Include the source of Bootstrap itself, or of any modifications you may have made to it, in any redistribution you may assemble that includes it
+- Include the source of Bootstrap itself or any modifications you may have made to it in any redistribution you may assemble that includes it
- Submit changes that you make to Bootstrap back to the Bootstrap project (though such feedback is encouraged)
The full Bootstrap license is located [in the project repository]({{< param repo >}}/blob/v{{< param current_version >}}/LICENSE) for more information.
--
GitLab
From a5abdc4c33e2a901ee505d7155c89c70589790a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?=
<20430676+supermavster@users.noreply.github.com>
Date: Mon, 9 May 2022 20:00:02 -0500
Subject: [PATCH 15/53] Update ratio.md
General structure for a specific sentence of the document and markdown structure MD033
---
site/content/docs/5.1/helpers/ratio.md | 11 +++++------
1 file changed, 5 insertions(+), 6 deletions(-)
diff --git a/site/content/docs/5.1/helpers/ratio.md b/site/content/docs/5.1/helpers/ratio.md
index 771bc07cb9..b84141d444 100644
--- a/site/content/docs/5.1/helpers/ratio.md
+++ b/site/content/docs/5.1/helpers/ratio.md
@@ -1,16 +1,16 @@
---
layout: docs
title: Ratios
-description: Use generated pseudo elements to make an element maintain the aspect ratio of your choosing. Perfect for responsively handling video or slideshow embeds based on the width of the parent.
+description: Use generated pseudo-elements to make an element maintain the aspect ratio of your choosing. Perfect for responsively handling video or slideshow embeds based on the parent's width.
group: helpers
toc: true
---
## About
-Use the ratio helper to manage the aspect ratios of external content like `<iframe>`s, `<embed>`s, `<video>`s, and `<object>`s. These helpers also can be used on any standard HTML child element (e.g., a `<div>` or `<img>`). Styles are applied from the parent `.ratio` class directly to the child.
+Use the ratio helper to manage the aspect ratios of external content like `<iframe>`s, `<embed>`s, `<video>`s, and `<object>`s. These helpers also can be used on any standard HTML child element (e.g., a `<div>` or `<img>`). Styles are applied directly to the child from the parent `.ratio` class.
-Aspect ratios are declared in a Sass map and included in each class via CSS variable, which also allows [custom aspect ratios](#custom-ratios).
+Aspect ratios are declared in a Sass map and included in each class via CSS variable, allowing [custom aspect ratios](#custom-ratios).
{{< callout info >}}
**Pro-Tip!** You don't need `frameborder="0"` on your `<iframe>`s as we override that for you in [Reboot]({{< docsref "/content/reboot" >}}).
@@ -18,7 +18,7 @@ Aspect ratios are declared in a Sass map and included in each class via CSS vari
## Example
-Wrap any embed, like an `<iframe>`, in a parent element with `.ratio` and an aspect ratio class. The immediate child element is automatically sized thanks to our universal selector `.ratio > *`.
+Wrap any embed, like an `<iframe>`, in a parent element with `.ratio` and an aspect ratio class. Thanks to our universal selector `.ratio > *`, the immediate child element is automatically sized.
{{< example >}}
<div class="ratio ratio-16x9">
@@ -57,7 +57,7 @@ For example, to create a 2x1 aspect ratio, set `--bs-aspect-ratio: 50%` on the `
</div>
{{< /example >}}
-This CSS variable makes it easy to modify the aspect ratio across breakpoints. The following is 4x3 to start, but changes to a custom 2x1 at the medium breakpoint.
+This CSS variable makes it easy to modify the aspect ratio across breakpoints. The following is 4x3 to start but changes to a custom 2x1 at the medium breakpoint.
```scss
.ratio-4x3 {
@@ -73,7 +73,6 @@ This CSS variable makes it easy to modify the aspect ratio across breakpoints. T
</div>
{{< /example >}}
-
## Sass map
Within `_variables.scss`, you can change the aspect ratios you want to use. Here's our default `$ratio-aspect-ratios` map. Modify the map as you like and recompile your Sass to put them to use.
--
GitLab
From c52d8f9a0ea9fe0d3a21aa683d34ef22805acc95 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?=
<20430676+supermavster@users.noreply.github.com>
Date: Mon, 9 May 2022 20:03:09 -0500
Subject: [PATCH 16/53] Update api.md
General structure for a specific sentence of the document and markdown structure MD030
---
site/content/docs/5.1/utilities/api.md | 24 ++++++++++++------------
1 file changed, 12 insertions(+), 12 deletions(-)
diff --git a/site/content/docs/5.1/utilities/api.md b/site/content/docs/5.1/utilities/api.md
index 86cf329381..deb531a5da 100644
--- a/site/content/docs/5.1/utilities/api.md
+++ b/site/content/docs/5.1/utilities/api.md
@@ -7,9 +7,9 @@ aliases: "/docs/5.1/utilities/"
toc: true
---
-Bootstrap utilities are generated with our utility API and can be used to modify or extend our default set of utility classes via Sass. Our utility API is based on a series of Sass maps and functions for generating families of classes with various options. If you're unfamiliar with Sass maps, read up on the [official Sass docs](https://sass-lang.com/documentation/values/maps) to get started.
+Bootstrap utilities are generated with our utility API and can be used to modify or extend our default set of utility classes via Sass. Our utility API is based on Sass maps and functions for generating families of classes with various options. If you're unfamiliar with Sass maps, read on the [official Sass docs](https://sass-lang.com/documentation/values/maps) to get started.
-The `$utilities` map contains all our utilities and is later merged with your custom `$utilities` map, if present. The utility map contains a keyed list of utility groups which accept the following options:
+If present, the `$utilities` map contains all our utilities and is later merged with your custom `$utilities` map. The utility map contains a keyed list of utility groups that accept the following options:
{{< bs-table "table table-utilities" >}}
| Option | Type | Default value | Description |
@@ -58,7 +58,7 @@ Which outputs the following:
### Property
-The required `property` key must be set for any utility, and it must contain a valid CSS property. This property is used in the generated utility's ruleset. When the `class` key is omitted, it also serves as the default class name. Consider the `text-decoration` utility:
+The required `property` key must be set for any valid CSS property utility. This property is used in the generated utility's ruleset. When the `class` key is omitted, it also serves as the default class name. Consider the `text-decoration` utility:
```scss
$utilities: (
@@ -79,7 +79,7 @@ Output:
### Values
-Use the `values` key to specify which values for the specified `property` should be used in the generated class names and rules. Can be a list or map (set in the utilities or in a Sass variable).
+Use the `values` key to specify which values for the specified `property` should be used in the generated class names and rules. It can be a list or map (set in the utilities or a Sass variable).
As a list, like with [`text-decoration` utilities]({{< docsref "/utilities/text#text-decoration" >}}):
@@ -135,7 +135,7 @@ Output:
.o-100 { opacity: 1 !important; }
```
-If `class: null`, generates classes for each of the `values` keys:
+If `class: null` generates classes for each of the `values` keys:
```scss
$utilities: (
@@ -159,7 +159,7 @@ Output:
### CSS variable utilities
-Set the `css-var` boolean option to `true` and the API will generate local CSS variables for the given selector instead of the usual `property: value` rules. Add an optional `css-variable-name` to set a different CSS variable name than the class name.
+Set the `css-var` boolean option to `true`, and the API will generate local CSS variables for the given selector instead of the usual `property: value` rules. Add an optional `css-variable-name` to set a different CSS variable name than the class name.
Consider our `.text-opacity-*` utilities. If we add the `css-variable-name` option, we'll get a custom output.
@@ -190,7 +190,7 @@ Output:
### Local CSS variables
-Use the `local-vars` option to specify a Sass map that will generate local CSS variables within the utility class's ruleset. Please note that it may require additional work to consume those local CSS variables in the generated CSS rules. For example, consider our `.bg-*` utilities:
+Use the `local-vars` option to specify a Sass map to generate local CSS variables within the utility class's ruleset. Please note that it may require additional work to consume those local CSS variables in the generated CSS rules. For example, consider our `.bg-*` utilities:
```scss
$utilities: (
@@ -221,7 +221,7 @@ Output:
### States
-Use the `state` option to generate pseudo-class variations. Example pseudo-classes are `:hover` and `:focus`. When a list of states are provided, classnames are created for that pseudo-class. For example, to change opacity on hover, add `state: hover` and you'll get `.opacity-hover:hover` in your compiled CSS.
+Use the `state` option to generate pseudo-class variations. Example pseudo-classes are `:hover` and `:focus`. Class names are created for that pseudo-class when a list of states is provided. For example, to change opacity on hover, add `state: hover,` and you'll get `.opacity-hover:hover` in your compiled CSS.
Need multiple pseudo-classes? Use a space-separated list of states: `state: hover focus`.
@@ -366,7 +366,7 @@ All utilities generated by the API include `!important` to ensure they override
## Using the API
-Now that you're familiar with how the utilities API works, learn how to add your own custom classes and modify our default utilities.
+Now that you're familiar with how the utility API works, learn how to add your custom classes and modify our default utilities.
### Override utilities
@@ -409,7 +409,7 @@ $utilities: map-merge(
### Modify utilities
-Modify existing utilities in the default `$utilities` map with `map-get` and `map-merge` functions. In the example below, we're adding an additional value to the `width` utilities. Start with an initial `map-merge` and then specify which utility you want to modify. From there, fetch the nested `"width"` map with `map-get` to access and modify the utility's options and values.
+Modify existing utilities in the default `$utilities` map with `map-get` and `map-merge` functions. We're adding value to the `width` utilities in the example below. Start with an initial `map-merge` and specify which utility you want to modify. Fetch the nested `"width"` map with `map-get` to access and modify the utility's options and values.
```scss
@import "bootstrap/scss/functions";
@@ -491,7 +491,7 @@ This will now generate responsive variations of `.border` and `.border-0` for ea
#### Rename utilities
-Missing v4 utilities, or used to another naming convention? The utilities API can be used to override the resulting `class` of a given utility—for example, to rename `.ms-*` utilities to oldish `.ml-*`:
+Missing v4 utilities, or used to another naming convention? The utility API can be used to override the resulting `class` of a given utility—for example, to rename `.ms-*` utilities to oldish `.ml-*`:
```scss
@import "bootstrap/scss/functions";
@@ -513,7 +513,7 @@ $utilities: map-merge(
### Remove utilities
-Remove any of the default utilities by setting the group key to `null`. For example, to remove all our `width` utilities, create a `$utilities` `map-merge` and add `"width": null` within.
+Remove any default utilities by setting the group key to `null`. For example, to remove all our `width` utilities, create a `$utilities` `map-merge` and add `"width": null` within.
```scss
@import "bootstrap/scss/functions";
--
GitLab
From a2088cfe0a6b807d998754027e46747b00a90610 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?=
<20430676+supermavster@users.noreply.github.com>
Date: Mon, 9 May 2022 20:05:18 -0500
Subject: [PATCH 17/53] Update overview.md
General structure for a specific sentence of the document and markdown structure MD033
---
site/content/docs/5.1/about/overview.md | 14 +++++++-------
1 file changed, 7 insertions(+), 7 deletions(-)
diff --git a/site/content/docs/5.1/about/overview.md b/site/content/docs/5.1/about/overview.md
index 4fd0193143..79f7b8cb80 100644
--- a/site/content/docs/5.1/about/overview.md
+++ b/site/content/docs/5.1/about/overview.md
@@ -1,7 +1,7 @@
---
layout: docs
title: About
-description: Learn more about the team maintaining Bootstrap, how and why the project started, and how to get involved.
+description: Learn more about the Bootstrap team, how and why the project started, and how to get involved.
group: about
aliases:
- "/about/"
@@ -10,19 +10,19 @@ aliases:
## Team
-Bootstrap is maintained by a [small team of developers](https://github.com/orgs/twbs/people) on GitHub. We're actively looking to grow this team and would love to hear from you if you're excited about CSS at scale, writing and maintaining vanilla JavaScript plugins, and improving build tooling processes for frontend code.
+Bootstrap is maintained by a [small team of developers](https://github.com/orgs/twbs/people) on GitHub. We're actively looking to grow this team. We would love to hear from you if you're excited about CSS at scale, writing and maintaining vanilla JavaScript plugins, and improving build tooling processes for front-end code.
## History
-Originally created by a designer and a developer at Twitter, Bootstrap has become one of the most popular front-end frameworks and open source projects in the world.
+Created by a designer and a developer at Twitter, Bootstrap has become one of the world's most popular front-end frameworks and open source projects.
-Bootstrap was created at Twitter in mid-2010 by [@mdo](https://twitter.com/mdo) and [@fat](https://twitter.com/fat). Prior to being an open-sourced framework, Bootstrap was known as _Twitter Blueprint_. A few months into development, Twitter held its [first Hack Week](https://blog.twitter.com/engineering/en_us/a/2010/hack-week.html) and the project exploded as developers of all skill levels jumped in without any external guidance. It served as the style guide for internal tools development at the company for over a year before its public release, and continues to do so today.
+Bootstrap was created at Twitter in mid-2010 by [@mdo](https://twitter.com/mdo) and [@fat](https://twitter.com/fat). Before being an open-sourced framework, Bootstrap was known as _Twitter Blueprint_. A few months into development, Twitter held its [first Hack Week](https://blog.twitter.com/engineering/en_us/a/2010/hack-week.html), and the project exploded as developers of all skill levels jumped in without any external guidance. It served as the style guide for internal tools development at the company for over a year before its public release and continues to do so today.
-Originally [released](https://blog.twitter.com/developer/en_us/a/2011/bootstrap-twitter.html) on <time datetime="2011-08-19 11:25">Friday, August 19, 2011</time>, we've since had over [twenty releases]({{< param repo >}}/releases), including two major rewrites with v2 and v3. With Bootstrap 2, we added responsive functionality to the entire framework as an optional stylesheet. Building on that with Bootstrap 3, we rewrote the library once more to make it responsive by default with a mobile first approach.
+Originally [released](https://blog.twitter.com/developer/en_us/a/2011/bootstrap-twitter.html) on <time datetime="2011-08-19 11:25">Friday, August 19, 2011</time>, we've since had over [twenty releases]({{< param repo >}}/releases), including two major rewrites with v2 and v3. With Bootstrap 2, we added responsive functionality to the entire framework as an optional stylesheet. Building on that with Bootstrap 3, we rewrote the library once more to make it responsive by default with a mobile-first approach.
-With Bootstrap 4, we once again rewrote the project to account for two key architectural changes: a migration to Sass and the move to CSS's flexbox. Our intention is to help in a small way to move the web development community forward by pushing for newer CSS properties, fewer dependencies, and new technologies across more modern browsers.
+With Bootstrap 4, we rewrote the project to account for two fundamental architectural changes: a migration to Sass and the move to CSS's flexbox. We intend to help in a small way to move the web development community forward by pushing for newer CSS properties, fewer dependencies, and new technologies across more modern browsers.
-Our latest release, Bootstrap 5, focuses on improving v4's codebase with as few major breaking changes as possible. We improved existing features and components, removed support for older browsers, dropped jQuery for regular JavaScript, and embraced more future-friendly technologies like CSS custom properties as part of our tooling.
+Our latest release, Bootstrap 5, focuses on improving v4's codebase with as few significant breaking changes as possible. We improved existing features and components, removed support for older browsers, dropped jQuery for regular JavaScript, and embraced more future-friendly technologies like CSS custom properties as part of our tooling.
## Get involved
--
GitLab
From 8ce6f777294fb276a55454e0d65e9f362e8a7f67 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?=
<20430676+supermavster@users.noreply.github.com>
Date: Mon, 9 May 2022 20:06:24 -0500
Subject: [PATCH 18/53] Update images.md
General structure for a specific sentence of the document and markdown structure MD033
---
site/content/docs/5.1/content/images.md | 6 ++----
1 file changed, 2 insertions(+), 4 deletions(-)
diff --git a/site/content/docs/5.1/content/images.md b/site/content/docs/5.1/content/images.md
index b55e7a2b87..c35846e163 100644
--- a/site/content/docs/5.1/content/images.md
+++ b/site/content/docs/5.1/content/images.md
@@ -1,14 +1,14 @@
---
layout: docs
title: Images
-description: Documentation and examples for opting images into responsive behavior (so they never become wider than their parent) and add lightweight styles to them—all via classes.
+description: Documentation and examples for opting images into responsive behavior (so they never become more comprehensive than their parent) and add lightweight styles via classes.
group: content
toc: true
---
## Responsive images
-Images in Bootstrap are made responsive with `.img-fluid`. This applies `max-width: 100%;` and `height: auto;` to the image so that it scales with the parent width.
+Images in Bootstrap are made responsive with `.img-fluid`. This applies `max-width: 100%;` and `height: auto;` to the image to scale with the parent width.
{{< example >}}
{{< placeholder width="100%" height="250" class="bd-placeholder-img-lg img-fluid" text="Responsive image" >}}
@@ -31,7 +31,6 @@ Align images with the [helper float classes]({{< docsref "/utilities/float" >}})
{{< placeholder width="200" height="200" class="rounded float-end" >}}
{{< /example >}}
-
{{< example >}}
{{< placeholder width="200" height="200" class="rounded mx-auto d-block" >}}
{{< /example >}}
@@ -42,7 +41,6 @@ Align images with the [helper float classes]({{< docsref "/utilities/float" >}})
</div>
{{< /example >}}
-
## Picture
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.
--
GitLab
From 656f568d42cd696a7290241246013e5efef5a148 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?=
<20430676+supermavster@users.noreply.github.com>
Date: Mon, 9 May 2022 20:10:33 -0500
Subject: [PATCH 19/53] Update reboot.md
General structure for a specific sentence of the document and markdown structure MD033, MD004, MD003
---
site/content/docs/5.1/content/reboot.md | 38 +++++++++++++------------
1 file changed, 20 insertions(+), 18 deletions(-)
diff --git a/site/content/docs/5.1/content/reboot.md b/site/content/docs/5.1/content/reboot.md
index 7d00e42c64..03b8b7c09e 100644
--- a/site/content/docs/5.1/content/reboot.md
+++ b/site/content/docs/5.1/content/reboot.md
@@ -9,12 +9,12 @@ toc: true
## Approach
-Reboot builds upon Normalize, providing many HTML elements with somewhat opinionated styles using only element selectors. Additional styling is done only with classes. For example, we reboot some `<table>` styles for a simpler baseline and later provide `.table`, `.table-bordered`, and more.
+Reboot builds upon Normalize, providing many HTML elements with opinionated styles using only element selectors. Additional styling is done only with classes. For example, we reboot some `<table>` styles for a more straightforward baseline and later provide `.table`, `.table-bordered`, and more.
Here are our guidelines and reasons for choosing what to override in Reboot:
- Update some browser default values to use `rem`s instead of `em`s for scalable component spacing.
-- Avoid `margin-top`. Vertical margins can collapse, yielding unexpected results. More importantly though, a single direction of `margin` is a simpler mental model.
+- Avoid `margin-top`. Vertical margins can collapse, yielding unexpected results. More importantly, though, a single direction of `margin` is a simpler mental model.
- For easier scaling across device sizes, block elements should use `rem`s for `margin`s.
- Keep declarations of `font`-related properties to a minimum, using `inherit` whenever possible.
@@ -22,7 +22,7 @@ Here are our guidelines and reasons for choosing what to override in Reboot:
{{< added-in "5.2.0" >}}
-With v5.1.1, we standardized our required `@import`s across all our CSS bundles (including `bootstrap.css`, `bootstrap-reboot.css`, and `bootstrap-grid.css`) to include `_root.scss`. This adds `:root` level CSS variables to all bundles, regardless of how many of them are used in that bundle. Ultimately Bootstrap 5 will continue to see more [CSS variables]({{< docsref "/customize/css-variables" >}}) added over time, in order to provide more real-time customization without the need to always recompile Sass. Our approach is to take our source Sass variables and transform them into CSS variables. That way, even if you don't use CSS variables, you still have all the power of Sass. **This is still in-progress and will take time to fully implement.**
+With v5.1.1, we standardized our required `@import`s across all our CSS bundles (including `bootstrap.css`, `bootstrap-reboot.css`, and `bootstrap-grid.css`) to include `_root.scss`. This adds `:root` level CSS variables to all bundles, regardless of how many of them are used in that bundle. Ultimately Bootstrap 5 will continue to see more [CSS variables]({{< docsref "/customize/css-variables" >}}) added over time to provide more real-time customization without the need always to recompile Sass. Our approach is to take our source Sass variables and transform them into CSS variables. That way, even if you don't use CSS variables, you still have all the power of Sass. **This is still in-progress and will take time to implement fully.**
For example, consider these `:root` CSS variables for common `<body>` styles:
@@ -32,7 +32,7 @@ In practice, those variables are then applied in Reboot like so:
{{< scss-docs name="reboot-body-rules" file="scss/_reboot.scss" >}}
-Which allows you to make real-time customizations however you like:
+This allows you to make real-time customizations however you like:
```html
<body style="--bs-body-color: #333;">
@@ -44,14 +44,14 @@ Which allows you to make real-time customizations however you like:
The `<html>` and `<body>` elements are updated to provide better page-wide defaults. More specifically:
-- The `box-sizing` is globally set on every element—including `*::before` and `*::after`, to `border-box`. This ensures that the declared width of element is never exceeded due to padding or border.
+- The `box-sizing` is globally set on every element—including `*::before` and `*::after`, to `border-box`. This ensures that the declared width of the element is never exceeded due to padding or border.
- No base `font-size` is declared on the `<html>`, but `16px` is assumed (the browser default). `font-size: 1rem` is applied on the `<body>` for easy responsive type-scaling via media queries while respecting user preferences and ensuring a more accessible approach. This browser default can be overridden by modifying the `$font-size-root` variable.
- The `<body>` also sets a global `font-family`, `font-weight`, `line-height`, and `color`. This is inherited later by some form elements to prevent font inconsistencies.
- For safety, the `<body>` has a declared `background-color`, defaulting to `#fff`.
## Native font stack
-Bootstrap utilizes a "native font stack" or "system font stack" for optimum text rendering on every device and OS. These system fonts have been designed specifically with today's devices in mind, with improved rendering on screens, variable font support, and more. Read more about [native font stacks in this *Smashing Magazine* article](https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/).
+Bootstrap utilizes a "native font stack" or "system font stack" for optimum text rendering on every device and OS. These system fonts have been designed specifically for today's devices, with improved rendering on screens, variable font support, and more. Read more about [native font stacks in this *Smashing Magazine* article](https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/).
```scss
$font-family-sans-serif:
@@ -76,7 +76,7 @@ $font-family-sans-serif:
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
```
-Note that because the font stack includes emoji fonts, many common symbol/dingbat unicode characters will be rendered as multi-colored pictographs. Their appearance will vary, depending on the style used in the browser/platform's native emoji font, and they won't be affected by any CSS `color` styles.
+Note that because the font stack includes emoji fonts, many common symbol/dingbat Unicode characters will be rendered as multi-colored pictographs. Their appearance will vary depending on the style used in the browser/platform's native emoji font, and they won't be affected by any CSS `color` styles.
This `font-family` is applied to the `<body>` and automatically inherited globally throughout Bootstrap. To switch the global `font-family`, update `$font-family-base` and recompile Bootstrap.
@@ -116,11 +116,11 @@ All lists—`<ul>`, `<ol>`, and `<dl>`—have their `margin-top` removed and a `
<div class="bd-example">
{{< markdown >}}
-* All lists have their top margin removed
+*All lists have their top margin removed
* And their bottom margin normalized
-* Nested lists have no bottom margin
- * This way they have a more even appearance
- * Particularly when followed by more list items
+*Nested lists have no bottom margin
+ * This way, they have a more even appearance
+ *Particularly when followed by more list items
* The left padding has also been reset
1. Here's an ordered list
@@ -128,6 +128,7 @@ All lists—`<ul>`, `<ol>`, and `<dl>`—have their `margin-top` removed and a `
3. It has the same overall look
4. As the previous unordered list
{{< /markdown >}}
+
</div>
For simpler styling, clear hierarchy, and better spacing, description lists have updated `margin`s. `<dd>`s reset `margin-left` to `0` and add `margin-bottom: .5rem`. `<dt>`s are **bolded**.
@@ -172,7 +173,7 @@ For indicating variables use the `<var>` tag.
## User input
-Use the `<kbd>` to indicate input that is typically entered via keyboard.
+Use the `<kbd>` to indicate input typically entered via the keyboard.
{{< example >}}
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
@@ -181,7 +182,7 @@ To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
## Sample output
-For indicating sample output from a program use the `<samp>` tag.
+Use the `<samp>` tag to indicate sample output from a program.
{{< example >}}
<samp>This text is meant to be treated as sample output from a computer program.</samp>
@@ -231,8 +232,8 @@ Tables are slightly adjusted to style `<caption>`s, collapse borders, and ensure
Various form elements have been rebooted for simpler base styles. Here are some of the most notable changes:
-- `<fieldset>`s have no borders, padding, or margin so they can be easily used as wrappers for individual inputs or groups of inputs.
-- `<legend>`s, like fieldsets, have also been restyled to be displayed as a heading of sorts.
+- `<fieldset>`s have no borders, padding, or margin so that they can be easily used as wrappers for individual or groups of inputs.
+Like fieldsets, `<legend>`s have also been restyled to be displayed as a heading of sorts.
- `<label>`s are set to `display: inline-block` to allow `margin` to be applied.
- `<input>`s, `<select>`s, `<textarea>`s, and `<button>`s are mostly addressed by Normalize, but Reboot removes their `margin` and sets `line-height: inherit`, too.
- `<textarea>`s are modified to only be resizable vertically as horizontal resizing often "breaks" page layout.
@@ -407,7 +408,7 @@ The default `margin` on blockquotes is `1em 40px`, so we reset that to `0 0 1rem
### Inline elements
-The `<abbr>` element receives basic styling to make it stand out amongst paragraph text.
+The `<abbr>` element receives basic styling from making it stand out amongst paragraph text.
<div class="bd-example">
The <abbr title="HyperText Markup Language">HTML</abbr> abbreviation element.
@@ -415,7 +416,7 @@ The `<abbr>` element receives basic styling to make it stand out amongst paragra
### Summary
-The default `cursor` on summary is `text`, so we reset that to `pointer` to convey that the element can be interacted with by clicking on it.
+The default `cursor` on the summary is `text`, so we reset that to `pointer` to convey that the element can be interacted with by clicking on it.
<div class="bd-example">
<details>
@@ -438,7 +439,8 @@ HTML5 adds [a new global attribute named `[hidden]`](https://developer.mozilla.o
```
{{< callout warning >}}
-##### jQuery incompatibility
+
+### jQuery incompatibility
`[hidden]` is not compatible with jQuery's `$(...).hide()` and `$(...).show()` methods. Therefore, we don't currently especially endorse `[hidden]` over other techniques for managing the `display` of elements.
{{< /callout >}}
--
GitLab
From 183950004eb9d14fee16820ca98117d5377405be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?=
<20430676+supermavster@users.noreply.github.com>
Date: Mon, 9 May 2022 20:12:27 -0500
Subject: [PATCH 20/53] Update tables.md
General structure for a specific sentence of the document and markdown structure MD033 MD030
---
site/content/docs/5.1/content/tables.md | 33 +++++++++++++------------
1 file changed, 17 insertions(+), 16 deletions(-)
diff --git a/site/content/docs/5.1/content/tables.md b/site/content/docs/5.1/content/tables.md
index 577e3ef84c..18aea346fe 100644
--- a/site/content/docs/5.1/content/tables.md
+++ b/site/content/docs/5.1/content/tables.md
@@ -8,15 +8,15 @@ toc: true
## Overview
-Due to the widespread use of `<table>` elements across third-party widgets like calendars and date pickers, Bootstrap's tables are **opt-in**. Add the base class `.table` to any `<table>`, then extend with our optional modifier classes or custom styles. All table styles are not inherited in Bootstrap, meaning any nested tables can be styled independent from the parent.
+Due to the widespread use of `<table>` elements across third-party widgets like calendars and date pickers, Bootstrap's tables are **opt-in**. Add the base class `.table` to any `<table>`, then extend with our optional modifier classes or custom styles. All table styles are not inherited in Bootstrap, meaning any nested tables can be styled independently from the parent.
-Using the most basic table markup, here's how `.table`-based tables look in Bootstrap.
+Here's how `.table`-based tables look in Bootstrap using the most basic table markup.
{{< table class="table" simplified="false" >}}
## Variants
-Use contextual classes to color tables, table rows or individual cells.
+Use contextual classes to color tables, table rows, or individual cells.
<div class="bd-example">
<table class="table">
@@ -222,13 +222,13 @@ Highlight a table row or cell by adding a `.table-active` class.
For the accented tables ([striped rows](#striped-rows), [striped columns](#striped-columns), [hoverable rows](#hoverable-rows), and [active tables](#active-tables)), we used some techniques to make these effects work for all our [table variants](#variants):
-- We start by setting the background of a table cell with the `--bs-table-bg` custom property. All table variants then set that custom property to colorize the table cells. This way, we don't get into trouble if semi-transparent colors are used as table backgrounds.
-- Then we add an inset box shadow on the table cells with `box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);` to layer on top of any specified `background-color`. Because we use a huge spread and no blur, the color will be monotone. Since `--bs-table-accent-bg` is unset by default, we don't have a default box shadow.
+We start by setting the table cell's background with the `--bs-table-bg` custom property. All table variants then set that custom property to colorize the table cells. We don't get into trouble if semi-transparent colors are used as table backgrounds.
+- Then we add an inset box shadow on the table cells with `box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);` to layer on top of any specified `background-color`. Because we use a huge spread and no blur, the color will be monotone. We don't have a default box shadow since `--bs-table-accent-bg` is unset by default.
- When either `.table-striped`, `.table-striped-columns`, `.table-hover` or `.table-active` classes are added, the `--bs-table-accent-bg` is set to a semitransparent color to colorize the background.
-- For each table variant, we generate a `--bs-table-accent-bg` color with the highest contrast depending on that color. For example, the accent color for `.table-primary` is darker while `.table-dark` has a lighter accent color.
+- For each table variant, we generate a `--bs-table-accent-bg` color with the highest contrast depending on that color. For example, the accent color for `.table-primary` is darker, while `.table-dark` has a lighter accent color.
- Text and border colors are generated the same way, and their colors are inherited by default.
-Behind the scenes it looks like this:
+Behind the scenes, it looks like this:
{{< scss-docs name="table-variant" file="scss/mixins/_table-variants.scss" >}}
@@ -262,7 +262,7 @@ Add `.table-sm` to make any `.table` more compact by cutting all cell `padding`
## Table group dividers
-Add a thicker border, darker between table groups—`<thead>`, `<tbody>`, and `<tfoot>`—with `.table-group-divider`. Customize the color by changing the `border-top-color` (which we don't currently provide a utility class for at this time).
+Add a thicker border, darker between table groups—`<thead>`, `<tbody>`, and `<tfoot>`—with `.table-group-divider`. Customize the color by changing the `border-top-color` (which we don't currently provide a utility class for).
{{< example >}}
<table class="table">
@@ -298,7 +298,7 @@ Add a thicker border, darker between table groups—`<thead>`, `<tbody>`, and `<
## 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 top by default. Use the [vertical align]({{< docsref "/utilities/vertical-align" >}}) classes to re-align where needed.
+Table cells of `<thead>` are always vertically 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">
@@ -363,7 +363,7 @@ Table cells of `<thead>` are always vertical aligned to the bottom. Table cells
## Nesting
-Border styles, active styles, and table variants are not inherited by nested tables.
+Nested tables do not inherit border styles, active styles, and table variants.
<div class="bd-example">
<table class="table table-striped table-bordered">
@@ -443,7 +443,7 @@ Border styles, active styles, and table variants are not inherited by nested tab
## How nesting works
-To prevent _any_ styles from leaking to nested tables, we use the child combinator (`>`) selector in our CSS. Since we need to target all the `td`s and `th`s in the `thead`, `tbody`, and `tfoot`, our selector would look pretty long without it. As such, we use the rather odd looking `.table > :not(caption) > * > *` selector to target all `td`s and `th`s of the `.table`, but none of any potential nested tables.
+To prevent _any_ styles from leaking to nested tables, we use our CSS's child combinator (`>`) selector. Since we need to target all the `td`s and `th`s in the `thead`, `tbody`, and `tfoot`, our selector would look pretty long without it. As such, we use the rather odd looking `.table > :not(caption) > * > *` selector to target all `td`s and `th`s of the `.table`, but none of any potential nested tables.
Note that if you add `<tr>`s as direct children of a table, those `<tr>` will be wrapped in a `<tbody>` by default, thus making our selectors work as intended.
@@ -451,7 +451,7 @@ Note that if you add `<tr>`s as direct children of a table, those `<tr>` will be
### Table head
-Similar to tables and dark tables, use the modifier classes `.table-light` or `.table-dark` to make `<thead>`s appear light or dark gray.
+Like tables and dark tables, use the modifier classes `.table-light` or `.table-dark` to make `<thead>`s appear light or dark gray.
<div class="bd-example">
<table class="table">
@@ -600,7 +600,7 @@ Similar to tables and dark tables, use the modifier classes `.table-light` or `.
### Captions
-A `<caption>` functions like a heading for a table. It helps users with screen readers to find a table and understand what it's about and decide if they want to read it.
+A `<caption>` functions as a heading for a table. It helps users with screen readers find a table, understand what it's about, and decide if they want to read it.
<div class="bd-example">
<table class="table">
@@ -662,14 +662,15 @@ You can also put the `<caption>` on the top of the table with `.caption-top`.
Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a `.table` with `.table-responsive`. Or, pick a maximum breakpoint with which to have a responsive table up to by using `.table-responsive{-sm|-md|-lg|-xl|-xxl}`.
{{< callout warning >}}
+
##### Vertical clipping/truncation
-Responsive tables make use of `overflow-y: hidden`, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.
+Responsive tables use `overflow-y: hidden`, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.
{{< /callout >}}
### Always responsive
-Across every breakpoint, use `.table-responsive` for horizontally scrolling tables.
+Across every Breakpoint, use `.table-responsive` for horizontally scrolling tables.
<div class="bd-example">
<div class="table-responsive">
@@ -740,7 +741,7 @@ Across every breakpoint, use `.table-responsive` for horizontally scrolling tabl
### Breakpoint specific
-Use `.table-responsive{-sm|-md|-lg|-xl|-xxl}` as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.
+Use `.table-responsive{-sm|-md|-lg|-xl|-xxl}` as needed to create responsive tables up to a particular breakpoint. The table will behave normally from that Breakpoint and up and not scroll horizontally.
**These tables may appear broken until their responsive styles apply at specific viewport widths.**
--
GitLab
From da4251c4c0bd3a9830ceb29448f75ffec8bb2133 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?=
<20430676+supermavster@users.noreply.github.com>
Date: Mon, 9 May 2022 20:15:26 -0500
Subject: [PATCH 21/53] Update sass.md
General structure for a specific sentence of the document
---
site/content/docs/5.1/customize/sass.md | 36 ++++++++++++-------------
1 file changed, 18 insertions(+), 18 deletions(-)
diff --git a/site/content/docs/5.1/customize/sass.md b/site/content/docs/5.1/customize/sass.md
index 0be56db9b4..8a6f3b45c0 100644
--- a/site/content/docs/5.1/customize/sass.md
+++ b/site/content/docs/5.1/customize/sass.md
@@ -6,18 +6,18 @@ group: customize
toc: true
---
-Utilize our source Sass files to take advantage of variables, maps, mixins, and more.
+Utilize our source Sass files to take advantage of variables, maps, mixins, etc.
## File structure
-Whenever possible, avoid modifying Bootstrap's core files. For Sass, that means creating your own stylesheet that imports Bootstrap so you can modify and extend it. Assuming you're using a package manager like npm, you'll have a file structure that looks like this:
+Whenever possible, avoid modifying Bootstrap's core files. For Sass, that means creating your stylesheet that imports Bootstrap so you can modify and extend it. Assuming you're using a package manager like npm, you'll have a file structure that looks like this:
```text
your-project/
├── scss
│ └── custom.scss
└── node_modules/
- └── bootstrap
+ └── Bootstrap
├── js
└── scss
```
@@ -35,7 +35,7 @@ your-project/
## Importing
-In your `custom.scss`, you'll import Bootstrap's source Sass files. You have two options: include all of Bootstrap, or pick the parts you need. We encourage the latter, though be aware there are some requirements and dependencies across our components. You also will need to include some JavaScript for our plugins.
+In your `custom.scss`, you'll import Bootstrap's source Sass files. You have two options: include all Bootstrap or pick the parts you need. We encourage the latter, though be aware there are some requirements and dependencies across our components. You also will need to include some JavaScript for our plugins.
```scss
// Custom.scss
@@ -82,15 +82,15 @@ In your `custom.scss`, you'll import Bootstrap's source Sass files. You have two
// 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.
+With that setup in place, you can begin to modify any of the Sass variables and maps in your `custom.scss`. You can also 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.
## Variable defaults
-Every Sass variable in Bootstrap includes the `!default` flag allowing you to override the variable's default value in your own Sass without modifying Bootstrap's source code. Copy and paste variables as needed, modify their values, and remove the `!default` flag. If a variable has already been assigned, then it won't be re-assigned by the default values in Bootstrap.
+Every Sass variable in Bootstrap includes the `!default` flag allowing you to override the variable's default value in your Sass without modifying Bootstrap's source code. Copy and paste variables as needed, modify their values, and remove the `!default` flag. If a variable has already been assigned, it won't be re-assigned by the default values in Bootstrap.
-You will find the complete list of Bootstrap's variables in `scss/_variables.scss`. Some variables are set to `null`, these variables don't output the property unless they are overridden in your configuration.
+You will find the complete list of Bootstrap's variables in `scss/_variables.scss`. Some variables are set to `null`; these variables don't output the property unless they are overridden in your configuration.
-Variable overrides must come after our functions are imported, but before the rest of the imports.
+Variable overrides must come after our functions are imported before the rest of the imports.
Here's an example that changes the `background-color` and `color` for the `<body>` when importing and compiling Bootstrap via npm:
@@ -122,9 +122,9 @@ Repeat as necessary for any variable in Bootstrap, including the global options
## Maps and loops
-Bootstrap includes a handful of Sass maps, key value pairs that make it easier to generate families of related CSS. We use Sass maps for our colors, grid breakpoints, and more. Just like Sass variables, all Sass maps include the `!default` flag and can be overridden and extended.
+Bootstrap includes a handful of Sass maps and key-value pairs that make generating families of related CSS easier. We use Sass maps for our colors, grid breakpoints, and more. Like Sass variables, all Sass maps include the `!default` flag and can be overridden and extended.
-Some of our Sass maps are merged into empty ones by default. This is done to allow easy expansion of a given Sass map, but comes at the cost of making _removing_ items from a map slightly more difficult.
+Some of our Sass maps are merged into empty ones by default. This is done to allow easy expansion of a given Sass map but comes at the cost of making _removing_ items from a map slightly more complicated.
### Modify map
@@ -146,7 +146,7 @@ $theme-colors: (
### Add to map
-Add new colors to `$theme-colors`, or any other map, by creating a new Sass map with your custom values and merging it with the original map. In this case, we'll create a new `$custom-colors` map and merge it with `$theme-colors`.
+Add new colors to `$theme-colors` or any other map by creating a new Sass map with your custom values and merging it with the original map. In this case, we'll create a new `$custom-colors` map and merge it with `$theme-colors`.
```scss
// Create your own map
@@ -158,7 +158,7 @@ $custom-colors: (
$theme-colors: map-merge($theme-colors, $custom-colors);
```
-### Remove from map
+### Remove from the map
To remove colors from `$theme-colors`, or any other map, use `map-remove`. Be aware you must insert it between our requirements and options:
@@ -180,9 +180,9 @@ $theme-colors: map-remove($theme-colors, "info", "light", "dark");
## Required keys
-Bootstrap assumes the presence of some specific keys within Sass maps as we used and extend these ourselves. As you customize the included maps, you may encounter errors where a specific Sass map's key is being used.
+Bootstrap assumes the presence of some specific keys within Sass maps as we used and extended these ourselves. As you customize the included maps, you may encounter errors where a specific Sass map's key is used.
-For example, we use the `primary`, `success`, and `danger` keys from `$theme-colors` for links, buttons, and form states. Replacing the values of these keys should present no issues, but removing them may cause Sass compilation issues. In these instances, you'll need to modify the Sass code that makes use of those values.
+For example, we use the `primary`, `success`, and `danger` keys from `$theme-colors` for links, buttons, and form states. Replacing the values of these keys should present no issues, but removing them may cause Sass compilation issues. In these instances, you'll need to modify the Sass code that uses those values.
## Functions
@@ -201,7 +201,7 @@ You can lighten or darken colors with Bootstrap's `tint-color()` and `shade-colo
{{< scss-docs name="color-functions" file="scss/_functions.scss" >}}
-In practice, you'd call the function and pass in the color and weight parameters.
+You'd call the function and pass in the color and weight parameters in practice.
```scss
.custom-element {
@@ -217,7 +217,7 @@ In practice, you'd call the function and pass in the color and weight parameters
In order to meet [WCAG 2.0 accessibility standards for color contrast](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html), authors **must** provide [a contrast ratio of at least 4.5:1](https://www.w3.org/WAI/WCAG20/quickref/20160105/Overview.php#visual-audio-contrast-contrast), with very few exceptions.
-An additional function we include in Bootstrap is the color contrast function, `color-contrast`. It utilizes the [WCAG 2.0 algorithm](https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests) for calculating contrast thresholds based on [relative luminance](https://www.w3.org/WAI/GL/wiki/Relative_luminance) in a `sRGB` color space to automatically return a light (`#fff`), dark (`#212529`) or black (`#000`) contrast color based on the specified base color. This function is especially useful for mixins or loops where you're generating multiple classes.
+We include an additional function in Bootstrap, the color contrast function, `color-contrast`. It utilizes the [WCAG 2.0 algorithm](https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests) for calculating contrast thresholds based on [relative luminance](https://www.w3.org/WAI/GL/wiki/Relative_luminance) in an `sRGB` color space to return a light automatically (`#fff`), dark (`#212529`) or black (`#000`) contrast color based on the specified base color. This function is handy for mixins or loops where you're generating multiple classes.
For example, to generate color swatches from our `$theme-colors` map:
@@ -251,7 +251,7 @@ We use the `escape-svg` function to escape the `<`, `>` and `#` characters for S
### Add and Subtract functions
-We use the `add` and `subtract` functions to wrap the CSS `calc` function. The primary purpose of these functions is to avoid errors when a "unitless" `0` value is passed into a `calc` expression. Expressions like `calc(10px - 0)` will return an error in all browsers, despite being mathematically correct.
+We use the `add` and `subtract` functions to wrap the CSS `calc` function. The primary purpose of these functions is to avoid errors when a "unitless" `0` value is passed into a `calc` expression. Despite being mathematically correct, expressions like `calc(10px - 0)` will return an error in all browsers.
Example where the calc is valid:
@@ -289,7 +289,7 @@ $border-width: 0;
## Mixins
-Our `scss/mixins/` directory has a ton of mixins that power parts of Bootstrap and can also be used across your own project.
+Our `scss/mixins/` directory has a ton of mixins that power parts of Bootstrap and can also be used across your project.
### Color schemes
--
GitLab
From 47d0b60db306cf19b62cc4f5c00eaed5c0b12791 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?=
<20430676+supermavster@users.noreply.github.com>
Date: Mon, 9 May 2022 21:54:06 -0500
Subject: [PATCH 22/53] Update overview.md
General structure for a specific sentence of the document and markdown structure MD033
---
site/content/docs/5.1/forms/overview.md | 23 ++++++++++++-----------
1 file changed, 12 insertions(+), 11 deletions(-)
diff --git a/site/content/docs/5.1/forms/overview.md b/site/content/docs/5.1/forms/overview.md
index 29bead1a3d..ba14106a9d 100644
--- a/site/content/docs/5.1/forms/overview.md
+++ b/site/content/docs/5.1/forms/overview.md
@@ -1,7 +1,7 @@
---
layout: docs
title: Forms
-description: Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
+description: Examples and usage guidelines for form control styles, layout options, and custom components for creating various forms.
group: forms
toc: true
aliases: "/docs/5.1/forms/"
@@ -9,7 +9,7 @@ sections:
- title: Form control
description: Style textual inputs and textareas with support for multiple states.
- title: Select
- description: Improve browser default select elements with a custom initial appearance.
+ description: Improve browser default select elements with an initial custom appearance.
- title: Checks & radios
description: Use our custom radio buttons and checkboxes in forms for selecting input options.
- title: Range
@@ -28,7 +28,7 @@ sections:
Bootstrap's form controls expand on [our Rebooted form styles]({{< docsref "/content/reboot#forms" >}}) with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices.
-Be sure to use an appropriate `type` attribute on all inputs (e.g., `email` for email address or `number` for numerical information) to take advantage of newer input controls like email verification, number selection, and more.
+Use an appropriate `type` attribute on all inputs (e.g., `email` for an email address or `number` for numerical information) to take advantage of newer input controls like email verification, number selection, etc.
Here's a quick example to demonstrate Bootstrap's form styles. Keep reading for documentation on required classes, form layout, and more.
@@ -56,18 +56,19 @@ Here's a quick example to demonstrate Bootstrap's form styles. Keep reading for
Block-level or inline-level form text can be created using `.form-text`.
{{< callout warning >}}
+
##### Associating form text with form controls
Form text should be explicitly associated with the form control it relates to using the `aria-describedby` attribute. This will ensure that assistive technologies—such as screen readers—will announce this form text when the user focuses or enters the control.
{{< /callout >}}
-Form text below inputs can be styled with `.form-text`. If a block-level element will be used, a top margin is added for easy spacing from the inputs above.
+Form text below inputs can be styled with `.form-text`. A top margin is added for easy spacing from the inputs above if a block-level element is used.
{{< example >}}
<label for="inputPassword5" class="form-label">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<div id="passwordHelpBlock" class="form-text">
- Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
+ Your password must be 8-20 characters long, contain letters and numbers, and not contain spaces, special characters, or emojis.
</div>
{{< /example >}}
@@ -97,9 +98,9 @@ Add the `disabled` boolean attribute on an input to prevent user interactions an
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
```
-Add the `disabled` attribute to a `<fieldset>` to disable all the controls within. Browsers treat all native form controls (`<input>`, `<select>`, and `<button>` elements) inside a `<fieldset disabled>` as disabled, preventing both keyboard and mouse interactions on them.
+Add the `disabled` attribute to a `<fieldset>` to disable all the controls. Browsers treat all native form controls (`<input>`, `<select>`, and `<button>` elements) inside a `<fieldset disabled>` as disabled, preventing both keyboard and mouse interactions on them.
-However, if your form also includes custom button-like elements such as `<a class="btn btn-*">...</a>`, these will only be given a style of `pointer-events: none`, meaning they are still focusable and operable using the keyboard. In this case, you must manually modify these controls by adding `tabindex="-1"` to prevent them from receiving focus and `aria-disabled="disabled"` to signal their state to assistive technologies.
+However, if your form also includes custom button-like elements such as `<a class="btn btn-*">...</a>`, these will only be given a style of `pointer-events: none`, meaning they are still focusable and operable using the keyboard. In this case, you must manually modify these controls by adding `tabindex="-1"` to prevent them from receiving the focus and `aria-disabled="disabled"` to signal their state to assistive technologies.
{{< example >}}
<form>
@@ -130,7 +131,7 @@ However, if your form also includes custom button-like elements such as `<a clas
## Accessibility
-Ensure that all form controls have an appropriate accessible name so that their purpose can be conveyed to users of assistive technologies. The simplest way to achieve this is to use a `<label>` element, or—in the case of buttons—to include sufficiently descriptive text as part of the `<button>...</button>` content.
+Ensure that all form controls have an appropriate accessible name to convey their purpose to users of assistive technologies. The simplest way to achieve this is to use a `<label>` element or—in the case of buttons—to include sufficiently descriptive text as part of the `<button>...</button>` content.
For situations where it's not possible to include a visible `<label>` or appropriate text content, there are alternative ways of still providing an accessible name, such as:
@@ -139,13 +140,13 @@ For situations where it's not possible to include a visible `<label>` or appropr
- Providing a `title` attribute
- Explicitly setting the accessible name on an element using `aria-label`
-If none of these are present, assistive technologies may resort to using the `placeholder` attribute as a fallback for the accessible name on `<input>` and `<textarea>` elements. The examples in this section provide a few suggested, case-specific approaches.
+If none of these are present, assistive technologies may use the `placeholder` attribute as a fallback for the accessible name on `<input>` and `<textarea>` elements. The examples in this section provide a few suggested, case-specific approaches.
-While using visually hidden content (`.visually-hidden`, `aria-label`, and even `placeholder` content, which disappears once a form field has content) will benefit assistive technology users, a lack of visible label text may still be problematic for certain users. Some form of visible label is generally the best approach, both for accessibility and usability.
+While using visually hidden content (`.visually-hidden`, `aria-label`, and even `placeholder` content, which disappears once a form field has content) will benefit assistive technology users, a lack of visible label text may still be problematic for specific users. Some form of visible label is generally the best approach, both for accessibility and usability.
## 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 `$input-btn-*` and `$input-*` variables.
+Many form variables are set at a general level to be re-used and extended by individual form components. You'll often see these as `$input-btn-*` and `$input-*` variables.
### Variables
--
GitLab
From 2826e39b947fee1c2992ca1244b562ef2123c6af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?=
<20430676+supermavster@users.noreply.github.com>
Date: Mon, 9 May 2022 21:57:00 -0500
Subject: [PATCH 23/53] Update stacks.md
General structure for a specific sentence of the document and markdown structure MD033
---
site/content/docs/5.1/helpers/stacks.md | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/site/content/docs/5.1/helpers/stacks.md b/site/content/docs/5.1/helpers/stacks.md
index e1960c5739..d94edbe83c 100644
--- a/site/content/docs/5.1/helpers/stacks.md
+++ b/site/content/docs/5.1/helpers/stacks.md
@@ -1,16 +1,16 @@
---
layout: docs
title: Stacks
-description: Shorthand helpers that build on top of our flexbox utilities to make component layout faster and easier than ever.
+description: Shorthand helpers that build on top of our flexbox utilities make component layout faster and easier.
group: helpers
toc: true
added: "5.1"
---
-Stacks offer a shortcut for applying a number of flexbox properties to quickly and easily create layouts in Bootstrap. All credit for the concept and implementation goes to the open source [Pylon project](https://almonk.github.io/pylon/).
+Stacks offer a shortcut for applying several 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 >}}
-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 was recently added to Safari, so consider verifying your intended browser support. The grid layout should have no issues. [Read more](https://caniuse.com/flexbox-gap).
{{< /callout >}}
## Vertical
--
GitLab
From 56bd357971a1495b03a6fc76f95ba0060f719610 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?=
<20430676+supermavster@users.noreply.github.com>
Date: Mon, 9 May 2022 22:08:19 -0500
Subject: [PATCH 24/53] Update columns.md
General structure for a specific sentence of the document
---
site/content/docs/5.1/layout/columns.md | 20 ++++++++++----------
1 file changed, 10 insertions(+), 10 deletions(-)
diff --git a/site/content/docs/5.1/layout/columns.md b/site/content/docs/5.1/layout/columns.md
index 5c859065a4..9c3aa9042e 100644
--- a/site/content/docs/5.1/layout/columns.md
+++ b/site/content/docs/5.1/layout/columns.md
@@ -1,7 +1,7 @@
---
layout: docs
title: Columns
-description: Learn how to modify columns with a handful of options for alignment, ordering, and offsetting thanks to our flexbox grid system. Plus, see how to use column classes to manage widths of non-grid elements.
+description: Learn how to modify columns with a handful of options for alignment, ordering, and offsetting, thanks to our flexbox grid system. Plus, see how to use column classes to manage the widths of non-grid elements.
group: layout
toc: true
---
@@ -14,7 +14,7 @@ toc: true
- **Columns build on the grid's flexbox architecture.** Flexbox means we have options for changing individual columns and [modifying groups of columns at the row level]({{< docsref "/layout/grid#row-columns" >}}). You choose how columns grow, shrink, or otherwise change.
-- **When building grid layouts, all content goes in columns.** The hierarchy of Bootstrap's grid goes from [container]({{< docsref "/layout/containers" >}}) to row to column to your content. On rare occasions, you may combine content and column, but be aware there can be unintended consequences.
+- **When building grid layouts, all content goes in columns.** The hierarchy of Bootstrap's grid goes from [container]({{< docsref "/layout/containers" >}}) to row to column to your content. You may combine content and column on rare occasions, but be aware there can be unintended consequences.
- **Bootstrap includes predefined classes for creating fast, responsive layouts.** With [six breakpoints]({{< docsref "/layout/breakpoints" >}}) and a dozen columns at each grid tier, we have dozens of classes already built for you to create your desired layouts. This can be disabled via Sass if you wish.
@@ -149,7 +149,7 @@ If more than 12 columns are placed within a single row, each group of extra colu
### Column breaks
-Breaking columns to a new line in flexbox requires a small hack: add an element with `width: 100%` wherever you want to wrap your columns to a new line. Normally this is accomplished with multiple `.row`s, but not every implementation method can account for this.
+Breaking columns to a new line in flexbox requires a small hack: add an element with `width: 100%` wherever you want to wrap your columns to a new line. Usually, this is accomplished with multiple `.row`s, but not every implementation method can account for this.
{{< example class="bd-example-row" >}}
<div class="container">
@@ -187,7 +187,7 @@ You may also apply this break at specific breakpoints with our [responsive displ
### 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.
+Use `.order-` classes to control your content's **visual order**. 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" >}}
<div class="container">
@@ -205,7 +205,7 @@ Use `.order-` classes for controlling the **visual order** of your content. Thes
</div>
{{< /example >}}
-There are also responsive `.order-first` and `.order-last` classes that change the `order` of an element by applying `order: -1` and `order: 6`, respectively. These classes can also be intermixed with the numbered `.order-*` classes as needed.
+There are also responsive `.order-first` and `.order-last` classes that change the `order` of an element by applying `order: -1` and `order: 6`, respectively. As needed, these classes can also be intermixed with the numbered `.order-*` classes.
{{< example class="bd-example-row" >}}
<div class="container">
@@ -225,7 +225,7 @@ There are also responsive `.order-first` and `.order-last` classes that change t
### 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.
#### Offset classes
@@ -247,7 +247,7 @@ Move columns to the right using `.offset-md-*` classes. These classes increase t
</div>
{{< /example >}}
-In addition to column clearing at responsive breakpoints, you may need to reset offsets. See this in action in [the grid example]({{< docsref "/examples/grid" >}}).
+In addition to column clearing at responsive breakpoints. See this in action in [the grid example]({{< docsref "/examples/grid" >}}).
{{< example class="bd-example-row" >}}
<div class="container">
@@ -285,7 +285,7 @@ With the move to flexbox in v4, you can use margin utilities like `.me-auto` to
## Standalone column classes
-The `.col-*` classes can also be used outside a `.row` to give an element a specific width. Whenever column classes are used as non direct children of a row, the paddings are omitted.
+The `.col-*` classes can also be used outside a `.row` to give an element a specific width. The paddings are omitted whenever column classes are used as non-direct children of a row.
{{< example >}}
<div class="col-3 bg-light p-3 border">
@@ -307,11 +307,11 @@ The classes can be used together with utilities to create responsive floated ima
</p>
<p>
- As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read.
+ As you can see, the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content here, rather than just this boring placeholder text that goes on and on but conveys no tangible information. It simply takes up space and should not be read.
</p>
<p>
- And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here.
+ And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here.
</p>
</div>
{{< /example >}}
--
GitLab
From 00697866369f6489f8f617ff8743e5dbca494a07 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?=
<20430676+supermavster@users.noreply.github.com>
Date: Mon, 9 May 2022 22:09:06 -0500
Subject: [PATCH 25/53] Update gutters.md
General structure for a specific sentence of the document and markdown structure MD033
---
site/content/docs/5.1/layout/gutters.md | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/site/content/docs/5.1/layout/gutters.md b/site/content/docs/5.1/layout/gutters.md
index 9ea13e4ab2..5fdbe9f073 100644
--- a/site/content/docs/5.1/layout/gutters.md
+++ b/site/content/docs/5.1/layout/gutters.md
@@ -8,7 +8,7 @@ toc: true
## How they work
-- **Gutters are the gaps between column content, created by horizontal `padding`.** We set `padding-right` and `padding-left` on each column, and use negative `margin` to offset that at the start and end of each row to align content.
+- **Gutters are the gaps between column content created by horizontal `padding`.** We set `padding-right` and `padding-left` on each column and use a negative `margin` to offset that at the start and end of each row to align content.
- **Gutters start at `1.5rem` (`24px`) wide.** This allows us to match our grid to the [padding and margin spacers]({{< docsref "/utilities/spacing" >}}) scale.
@@ -71,7 +71,7 @@ An alternative solution is to add a wrapper around the `.row` with the `.overflo
## Horizontal & vertical gutters
-`.g-*` classes can be used to control the horizontal gutter widths, for the following example we use a smaller gutter width, so there won't be a need to add the `.overflow-hidden` wrapper class.
+`.g-*` classes can be used to control the horizontal gutter widths; for the following example, we use a smaller gutter width, so there won't be a need to add the `.overflow-hidden` wrapper class.
{{< example >}}
<div class="container">
--
GitLab
From 7137e8bb232ac082b34975adf4420148e78d7b3b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?=
<20430676+supermavster@users.noreply.github.com>
Date: Mon, 9 May 2022 22:09:48 -0500
Subject: [PATCH 26/53] Update z-index.md
General structure for a specific sentence of the document
---
site/content/docs/5.1/layout/z-index.md | 10 +++++-----
1 file changed, 5 insertions(+), 5 deletions(-)
diff --git a/site/content/docs/5.1/layout/z-index.md b/site/content/docs/5.1/layout/z-index.md
index 1870d05d23..25273ae0e6 100644
--- a/site/content/docs/5.1/layout/z-index.md
+++ b/site/content/docs/5.1/layout/z-index.md
@@ -1,16 +1,16 @@
---
layout: docs
title: Z-index
-description: While not a part of Bootstrap's grid system, z-indexes play an important part in how our components overlay and interact with one another.
+description: While not a part of Bootstrap's grid system, z-indexes play an essential part in how our components overlay and interact with one another.
group: layout
---
-Several Bootstrap components utilize `z-index`, the CSS property that helps control layout by providing a third axis to arrange content. We utilize a default z-index scale in Bootstrap that's been designed to properly layer navigation, tooltips and popovers, modals, and more.
+Several Bootstrap components utilize `z-index`, the CSS property that helps control layout by providing a third axis to arrange content. We utilize a default z-index scale in Bootstrap designed to properly layer navigation, tooltips and popovers, modals, and more.
-These higher values start at an arbitrary number, high and specific enough to ideally avoid conflicts. We need a standard set of these across our layered components—tooltips, popovers, navbars, dropdowns, modals—so we can be reasonably consistent in the behaviors. There's no reason we couldn't have used `100`+ or `500`+.
+These higher values start at an arbitrary number, high and specific enough to ideally avoid conflicts. We need a standard set of these across our layered components—tooltips, popovers, navbars, dropdowns, and modals—to be reasonably consistent in the behaviors. There's no reason we couldn't have used `100`+ or `500`+.
-We don't encourage customization of these individual values; should you change one, you likely need to change them all.
+We don't encourage customization of these individual values; you likely need to change them all if you change one.
{{< scss-docs name="zindex-stack" file="scss/_variables.scss" >}}
-To handle overlapping borders within components (e.g., buttons and inputs in input groups), we use low single digit `z-index` values of `1`, `2`, and `3` for default, hover, and active states. On hover/focus/active, we bring a particular element to the forefront with a higher `z-index` value to show their border over the sibling elements.
+To handle overlapping borders within components (e.g., buttons and inputs in input groups), we use low single-digit `z-index` values of `1`, `2`, and `3` for default, hover, and active states. On hover/focus/active, we bring a particular element to the forefront with a higher `z-index` value to show their border over the sibling elements.
--
GitLab
From 17cae31968caec5b4a9bb736c3d5a6084f120160 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?=
<20430676+supermavster@users.noreply.github.com>
Date: Mon, 9 May 2022 22:13:04 -0500
Subject: [PATCH 27/53] Update flex.md
General structure for a specific sentence of the document and markdown structure MD033
---
site/content/docs/5.1/utilities/flex.md | 32 ++++++++++++++++---------
1 file changed, 21 insertions(+), 11 deletions(-)
diff --git a/site/content/docs/5.1/utilities/flex.md b/site/content/docs/5.1/utilities/flex.md
index 567befe0ee..544ca0099c 100644
--- a/site/content/docs/5.1/utilities/flex.md
+++ b/site/content/docs/5.1/utilities/flex.md
@@ -8,7 +8,7 @@ toc: true
## Enable flex behaviors
-Apply `display` utilities to create a flexbox container and transform **direct children elements** into flex items. Flex containers and items are able to be modified further with additional flex properties.
+Apply `display` utilities to create a flexbox container and transform **direct children elements** into flex items. Flex containers and items can be modified further with additional flex properties.
{{< example class="bd-example-flex" >}}
<div class="d-flex p-2">I'm a flexbox container!</div>
@@ -23,6 +23,7 @@ Responsive variations also exist for `.d-flex` and `.d-inline-flex`.
{{< markdown >}}
{{< flex.inline >}}
{{- range $.Site.Data.breakpoints }}
+
- `.d{{ .abbr }}-flex`
- `.d{{ .abbr }}-inline-flex`
{{- end -}}
@@ -31,7 +32,7 @@ Responsive variations also exist for `.d-flex` and `.d-inline-flex`.
## Direction
-Set the direction of flex items in a flex container with direction utilities. In most cases you can omit the horizontal class here as the browser default is `row`. However, you may encounter situations where you needed to explicitly set this value (like responsive layouts).
+Set the direction of flex items in a flex container with direction utilities. In most cases, you can omit the horizontal class here as the browser default is `row`. However, you may encounter situations where you need to set this value (like responsive layouts) explicitly.
Use `.flex-row` to set a horizontal direction (the browser default), or `.flex-row-reverse` to start the horizontal direction from the opposite side.
@@ -68,6 +69,7 @@ Responsive variations also exist for `flex-direction`.
{{< markdown >}}
{{< flex.inline >}}
{{- range $.Site.Data.breakpoints }}
+
- `.flex{{ .abbr }}-row`
- `.flex{{ .abbr }}-row-reverse`
- `.flex{{ .abbr }}-column`
@@ -127,6 +129,7 @@ Responsive variations also exist for `justify-content`.
{{< markdown >}}
{{< flex.inline >}}
{{- range $.Site.Data.breakpoints }}
+
- `.justify-content{{ .abbr }}-start`
- `.justify-content{{ .abbr }}-end`
- `.justify-content{{ .abbr }}-center`
@@ -182,6 +185,7 @@ Responsive variations also exist for `align-items`.
{{< markdown >}}
{{< flex.inline >}}
{{- range $.Site.Data.breakpoints }}
+
- `.align-items{{ .abbr }}-start`
- `.align-items{{ .abbr }}-end`
- `.align-items{{ .abbr }}-center`
@@ -193,7 +197,7 @@ Responsive variations also exist for `align-items`.
## Align self
-Use `align-self` utilities on flexbox items to individually change their alignment on the cross axis (the y-axis to start, x-axis if `flex-direction: column`). Choose from the same options as `align-items`: `start`, `end`, `center`, `baseline`, or `stretch` (browser default).
+Use `align-self` utilities on flexbox items to change their alignment on the cross axis (the y-axis to start, x-axis if `flex-direction: column`). Choose from the same options as `align-items`: `start`, `end`, `center`, `baseline`, or `stretch` (browser default).
<div class="bd-example bd-example-flex">
<div class="d-flex mb-3" style="height: 100px">
@@ -236,6 +240,7 @@ Responsive variations also exist for `align-self`.
{{< markdown >}}
{{< flex.inline >}}
{{- range $.Site.Data.breakpoints }}
+
- `.align-self{{ .abbr }}-start`
- `.align-self{{ .abbr }}-end`
- `.align-self{{ .abbr }}-center`
@@ -262,6 +267,7 @@ Responsive variations also exist for `flex-fill`.
{{< markdown >}}
{{< flex.inline >}}
{{- range $.Site.Data.breakpoints }}
+
- `.flex{{ .abbr }}-fill`
{{- end -}}
{{< /flex.inline >}}
@@ -269,7 +275,7 @@ Responsive variations also exist for `flex-fill`.
## Grow and shrink
-Use `.flex-grow-*` utilities to toggle a flex item's ability to grow to fill available space. In the example below, the `.flex-grow-1` elements uses all available space it can, while allowing the remaining two flex items their necessary space.
+Use `.flex-grow-*` utilities to toggle a flex item's ability to grow to fill available space. In the example below, the `.flex-grow-1` elements use all available space while allowing the remaining two flex items their necessary space.
{{< example class="bd-example-flex" >}}
<div class="d-flex">
@@ -293,6 +299,7 @@ Responsive variations also exist for `flex-grow` and `flex-shrink`.
{{< markdown >}}
{{< flex.inline >}}
{{- range $.Site.Data.breakpoints }}
+
- `.flex{{ .abbr }}-{grow|shrink}-0`
- `.flex{{ .abbr }}-{grow|shrink}-1`
{{- end -}}
@@ -301,7 +308,7 @@ Responsive variations also exist for `flex-grow` and `flex-shrink`.
## Auto margins
-Flexbox can do some pretty awesome things when you mix flex alignments with auto margins. Shown below are three examples of controlling flex items via auto margins: default (no auto margin), pushing two items to the right (`.me-auto`), and pushing two items to the left (`.ms-auto`).
+Flexbox can do incredible things when you mix flex alignments with auto margins. Shown below are three examples of controlling flex items via auto margins: default (no auto margin), pushing two items to the right (`.me-auto`) and pushing two items to the left (`.ms-auto`).
{{< example class="bd-example-flex" >}}
<div class="d-flex mb-3">
@@ -325,7 +332,7 @@ Flexbox can do some pretty awesome things when you mix flex alignments with auto
### With align-items
-Vertically move one flex item to the top or bottom of a container by mixing `align-items`, `flex-direction: column`, and `margin-top: auto` or `margin-bottom: auto`.
+Vertically move one flex item to the top or bottom of a container by mixing `align-items`, `flex-direction: column`, `margin-top: auto`, or `margin-bottom: auto`.
{{< example class="bd-example-flex" >}}
<div class="d-flex align-items-start flex-column mb-3" style="height: 200px;">
@@ -413,12 +420,12 @@ Change how flex items wrap in a flex container. Choose from no wrapping at all (
</div>
```
-
Responsive variations also exist for `flex-wrap`.
{{< markdown >}}
{{< flex.inline >}}
{{- range $.Site.Data.breakpoints }}
+
- `.flex{{ .abbr }}-nowrap`
- `.flex{{ .abbr }}-wrap`
- `.flex{{ .abbr }}-wrap-reverse`
@@ -428,7 +435,7 @@ Responsive variations also exist for `flex-wrap`.
## Order
-Change the _visual_ order of specific flex items with a handful of `order` utilities. We only provide options for making an item first or last, as well as a reset to use the DOM order. As `order` takes any integer value from 0 to 5, add custom CSS for any additional values needed.
+Change the _visual_ order of specific flex items with a handful of `order` utilities. We only provide options for making an item first or last and a reset to use the DOM order. As `order` takes any integer value from 0 to 5, add custom CSS for any additional values needed.
{{< example class="bd-example-flex" >}}
<div class="d-flex flex-nowrap">
@@ -444,18 +451,20 @@ Responsive variations also exist for `order`.
{{< flex.inline >}}
{{- range $bp := $.Site.Data.breakpoints -}}
{{- range (seq 0 5) }}
+
- `.order{{ $bp.abbr }}-{{ . }}`
{{- end -}}
{{- end -}}
{{< /flex.inline >}}
{{< /markdown >}}
-Additionally there are also responsive `.order-first` and `.order-last` classes that change the `order` of an element by applying `order: -1` and `order: 6`, respectively.
+Additionally, responsive `.order-first` and `.order-last` classes also change the `order` of an element by applying `order: -1` and `order: 6`, respectively.
{{< markdown >}}
{{< flex.inline >}}
{{- range $bp := $.Site.Data.breakpoints -}}
{{- range (slice "first" "last") }}
+
- `.order{{ $bp.abbr }}-{{ . }}`
{{- end -}}
{{- end -}}
@@ -464,9 +473,9 @@ Additionally there are also responsive `.order-first` and `.order-last` classes
## Align content
-Use `align-content` utilities on flexbox containers to align flex items *together* on the cross axis. Choose from `start` (browser default), `end`, `center`, `between`, `around`, or `stretch`. To demonstrate these utilities, we've enforced `flex-wrap: wrap` and increased the number of flex items.
+Use `align-content` utilities on flexbox containers to align flex items _together_ on the cross axis. Choose from `start` (browser default), `end`, `center`, `between`, `around`, or `stretch`. We've enforced `flex-wrap: wrap` and increased the number of flex items to demonstrate these utilities.
-**Heads up!** This property has no effect on single rows of flex items.
+**Heads up!** This property does not affect single rows of flex items.
<div class="bd-example bd-example-flex">
<div class="d-flex align-content-start flex-wrap mb-3" style="height: 200px">
@@ -619,6 +628,7 @@ Responsive variations also exist for `align-content`.
{{< markdown >}}
{{< flex.inline >}}
{{- range $.Site.Data.breakpoints }}
+
- `.align-content{{ .abbr }}-start`
- `.align-content{{ .abbr }}-end`
- `.align-content{{ .abbr }}-center`
--
GitLab
From d15c80667a158c405af95c146c45bc4f43b8bd65 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?=
<20430676+supermavster@users.noreply.github.com>
Date: Mon, 9 May 2022 22:16:10 -0500
Subject: [PATCH 28/53] Update text.md
General structure for a specific sentence of the document and markdown structure MD033
---
site/content/docs/5.1/utilities/text.md | 14 +++++++-------
1 file changed, 7 insertions(+), 7 deletions(-)
diff --git a/site/content/docs/5.1/utilities/text.md b/site/content/docs/5.1/utilities/text.md
index a170660efd..201f2314ff 100644
--- a/site/content/docs/5.1/utilities/text.md
+++ b/site/content/docs/5.1/utilities/text.md
@@ -1,14 +1,14 @@
---
layout: docs
title: Text
-description: Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.
+description: Documentation and examples for standard text utilities to control alignment, wrapping, weight, and more.
group: utilities
toc: true
---
## Text alignment
-Easily realign text to components with text alignment classes. For start, end, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.
+Quickly realign text to components with text alignment classes. For a start, end, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.
{{< example >}}
<p class="text-start">Start aligned text on all viewport sizes.</p>
@@ -22,7 +22,7 @@ Easily realign text to components with text alignment classes. For start, end, a
{{< /example >}}
{{< callout info >}}
-Note that we don't provide utility classes for justified text. While, aesthetically, justified text might look more appealing, it does make word-spacing more random and therefore harder to read.
+Note that we don't provide utility classes for justified text. While aesthetically, the justified text might look more appealing, it does make word-spacing more random and, therefore, harder to read.
{{< /callout >}}
## Text wrapping and overflow
@@ -45,7 +45,7 @@ Prevent text from wrapping with a `.text-nowrap` class.
## Word break
-Prevent long strings of text from breaking your components' layout by using `.text-break` to set `word-wrap: break-word` and `word-break: break-word`. We use `word-wrap` instead of the more common `overflow-wrap` for wider browser support, and add the deprecated `word-break: break-word` to avoid issues with flex containers.
+Prevent long text strings from breaking your components' layout by using `.text-break` to set `word-wrap: break-word` and `word-break: break-word`. We use `word-wrap` instead of the more common `overflow-wrap` for broader browser support and add the deprecated `word-break: break-word` to avoid issues with flex containers.
{{< example >}}
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
@@ -69,7 +69,7 @@ Note how `.text-capitalize` only changes the first letter of each word, leaving
## Font size
-Quickly change the `font-size` of text. While our heading classes (e.g., `.h1`–`.h6`) apply `font-size`, `font-weight`, and `line-height`, these utilities _only_ apply `font-size`. Sizing for these utilities matches HTML's heading elements, so as the number increases, their size decreases.
+Quickly change the `font-size` of the text. While our heading classes (e.g., `.h1`–`.h6`) apply `font-size`, `font-weight`, and `line-height`, these utilities _only_ apply `font-size`. Sizing for these utilities matches HTML's heading elements, so as the number increases, their size decreases.
{{< example >}}
<p class="fs-1">.fs-1 text</p>
@@ -97,7 +97,7 @@ Quickly change the `font-weight` or `font-style` of text with these utilities. `
<p class="fst-normal">Text with normal font style</p>
{{< /example >}}
-## Line height
+## Line-height
Change the line height with `.lh-*` utilities.
@@ -144,7 +144,7 @@ Decorate text in components with text decoration classes.
### Maps
-Font-size utilities are generated from this map, in combination with our utilities API.
+Font-size utilities are generated from this map in combination with our utility API.
{{< scss-docs name="font-sizes" file="scss/_variables.scss" >}}
--
GitLab
From c3989d2721e01acf2b58125e69ae49b8f67ab4c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?=
<20430676+supermavster@users.noreply.github.com>
Date: Mon, 9 May 2022 22:18:35 -0500
Subject: [PATCH 29/53] Update card.md
General structure for a specific sentence of the document and markdown structure MD033
---
site/content/docs/5.1/components/card.md | 40 ++++++++++++------------
1 file changed, 20 insertions(+), 20 deletions(-)
diff --git a/site/content/docs/5.1/components/card.md b/site/content/docs/5.1/components/card.md
index 9e395cd5ec..6a0c004b2d 100644
--- a/site/content/docs/5.1/components/card.md
+++ b/site/content/docs/5.1/components/card.md
@@ -12,9 +12,9 @@ A **card** is a flexible and extensible content container. It includes options f
## Example
-Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components. They have no `margin` by default, so use [spacing utilities]({{< docsref "/utilities/spacing" >}}) as needed.
+Cards are built with as little markup and styles as possible but still deliver a ton of control and customization. They offer easy alignment and mix well with other Bootstrap components built with flexbox. They have no `margin` by default, so use [spacing utilities]({{< docsref "/utilities/spacing" >}}) as needed.
-Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they'll naturally fill the full width of its parent element. This is easily customized with our various [sizing options](#sizing).
+Below is an example of a primary card with mixed content and a fixed width. Cards have no fixed width to start, so they'll naturally fill the entire width of their parent element. This is easily customized with our various [sizing options](#sizing).
{{< example >}}
<div class="card" style="width: 18rem;">
@@ -29,7 +29,7 @@ Below is an example of a basic card with mixed content and a fixed width. Cards
## Content types
-Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what's supported.
+Cards support a wide variety of content, including images, text, list groups, links, etc. Below are examples of what's supported.
### Body
@@ -63,7 +63,7 @@ Subtitles are used by adding a `.card-subtitle` to a `<h*>` tag. If the `.card-t
### Images
-`.card-img-top` places an image to the top of the card. With `.card-text`, text can be added to the card. Text within `.card-text` can also be styled with the standard HTML tags.
+`.card-img-top` place an image on the top of the card. With `.card-text`, text can be added to the card. Text within `.card-text` can also be styled with the standard HTML tags.
{{< example >}}
<div class="card" style="width: 18rem;">
@@ -116,7 +116,7 @@ Create lists of content in a card with a flush list group.
### Kitchen sink
-Mix and match multiple content types to create the card you need, or throw everything in there. Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card.
+Mix and match multiple content types to create the card you need, or throw everything in there. Below are image styles, blocks, text styles, and a list group wrapped in a fixed-width card.
{{< example >}}
<div class="card" style="width: 18rem;">
@@ -139,7 +139,7 @@ Mix and match multiple content types to create the card you need, or throw every
### Header and footer
-Add an optional header and/or footer within a card.
+Add an optional header or footer within a card.
{{< example >}}
<div class="card">
@@ -199,7 +199,7 @@ Card headers can be styled by adding `.card-header` to `<h*>` elements.
## Sizing
-Cards assume no specific `width` to start, so they'll be 100% wide unless otherwise stated. You can change this as needed with custom CSS, grid classes, grid Sass mixins, or utilities.
+Cards assume no specific `width` to start, so they'll be 100% wide unless otherwise stated. You can change this with custom CSS, grid classes, grid Sass mixins, or utilities.
### Using grid markup
@@ -252,7 +252,7 @@ Use our handful of [available sizing utilities]({{< docsref "/utilities/sizing"
### Using custom CSS
-Use custom CSS in your stylesheets or as inline styles to set a width.
+Use custom CSS in your stylesheets or inline styles to set a width.
{{< example >}}
<div class="card" style="width: 18rem;">
@@ -350,7 +350,7 @@ Cards include a few options for working with images. Choose from appending "imag
### Image caps
-Similar to headers and footers, cards can include top and bottom "image caps"—images at the top or bottom of a card.
+Like headers and footers, cards can include top and bottom "image caps"—images at the top or bottom of a card.
{{< example >}}
<div class="card mb-3">
@@ -373,7 +373,7 @@ Similar to headers and footers, cards can include top and bottom "image caps"—
### Image overlays
-Turn an image into a card background and overlay your card's text. Depending on the image, you may or may not need additional styles or utilities.
+Turn an image into a card background and overlay your card's text. You may or may not need additional styles or utilities depending on the image.
{{< example >}}
<div class="card bg-dark text-white">
@@ -387,12 +387,12 @@ Turn an image into a card background and overlay your card's text. Depending on
{{< /example >}}
{{< callout info >}}
-Note that content should not be larger than the height of the image. If content is larger than the image the content will be displayed outside the image.
+Note that content should not be larger than the height of the image. If the content is larger than the image, the content will be displayed outside the image.
{{< /callout >}}
## Horizontal
-Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way. In the example below, we remove the grid gutters with `.g-0` and use `.col-md-*` classes to make the card horizontal at the `md` breakpoint. Further adjustments may be needed depending on your card content.
+Using a combination of grid and utility classes, cards can be made horizontal, mobile-friendly, and responsive. In the example below, we remove the grid gutters with `.g-0` and use `.col-md-*` classes to make the card horizontal at the `md` breakpoint. Further adjustments may be needed depending on your card content.
{{< example >}}
<div class="card mb-3" style="max-width: 540px;">
@@ -459,7 +459,7 @@ Use [border utilities]({{< docsref "/utilities/borders" >}}) to change just the
### Mixins utilities
-You can also change the borders on the card header and footer as needed, and even remove their `background-color` with `.bg-transparent`.
+You can also change the borders on the card header and footer as needed and remove their `background-color` with `.bg-transparent`.
{{< example >}}
<div class="card border-success mb-3" style="max-width: 18rem;">
@@ -474,11 +474,11 @@ You can also change the borders on the card header and footer as needed, and eve
## Card layout
-In addition to styling the content within cards, Bootstrap includes a few options for laying out series of cards. For the time being, **these layout options are not yet responsive**.
+In addition to styling the content within cards, Bootstrap includes a few options for laying out a series of cards. For the time being, **these layout options are not yet responsive**.
### Card groups
-Use card groups to render cards as a single, attached element with equal width and height columns. Card groups start off stacked and use `display: flex;` to become attached with uniform dimensions starting at the `sm` breakpoint.
+Use card groups to render cards as a single, attached element with equal width and height columns. Card groups start stacked and use `display: flex;` to become attached with uniform dimensions starting at the `sm` breakpoint.
{{< example >}}
<div class="card-group">
@@ -548,7 +548,7 @@ When using card groups with footers, their content will automatically line up.
### Grid cards
-Use the Bootstrap grid system and its [`.row-cols` classes]({{< docsref "/layout/grid#row-columns" >}}) to control how many grid columns (wrapped around your cards) you show per row. For example, here's `.row-cols-1` laying out the cards on one column, and `.row-cols-md-2` splitting four cards to equal width across multiple rows, from the medium breakpoint up.
+Use the Bootstrap grid system and its [`.row-cols` classes]({{< docsref "/layout/grid#row-columns" >}}) to control how many grid columns (wrapped around your cards) you show per row. For example, here's `.row-cols-1` laying out the cards on one column and `.row-cols-md-2` splitting four cards to equal width across multiple rows from the medium breakpoint up.
{{< example >}}
<div class="row row-cols-1 row-cols-md-2 g-4">
@@ -591,7 +591,7 @@ Use the Bootstrap grid system and its [`.row-cols` classes]({{< docsref "/layout
</div>
{{< /example >}}
-Change it to `.row-cols-3` and you'll see the fourth card wrap.
+Change it to `.row-cols-3`, and you'll see the fourth card wrap.
{{< example >}}
<div class="row row-cols-1 row-cols-md-3 g-4">
@@ -634,7 +634,7 @@ Change it to `.row-cols-3` and you'll see the fourth card wrap.
</div>
{{< /example >}}
-When you need equal height, add `.h-100` to the cards. If you want equal heights by default, you can set `$card-height: 100%` in Sass.
+When you need equal height, add `.h-100` to the cards. By default, you can set `$card-height: 100%` in Sass if you want equal heights.
{{< example >}}
<div class="row row-cols-1 row-cols-md-3 g-4">
@@ -722,7 +722,7 @@ Just like with card groups, card footers will automatically line up.
### Masonry
-In `v4` we used a CSS-only technique to mimic the behavior of [Masonry](https://masonry.desandro.com/)-like columns, but this technique came with lots of unpleasant [side effects](https://github.com/twbs/bootstrap/pull/28922). If you want to have this type of layout in `v5`, you can just make use of Masonry plugin. **Masonry is not included in Bootstrap**, but we've made a [demo example]({{< docsref "/examples/masonry" >}}) to help you get started.
+In `v4` we used a CSS-only technique to mimic the behavior of [Masonry](https://masonry.desandro.com/)-like columns, but this technique came with lots of unpleasant [side effects](https://github.com/twbs/bootstrap/pull/28922). If you want to have this type of layout in `v5`, you can use the Masonry plugin. **Masonry is not included in Bootstrap**, but we've made a [demo example]({{< docsref "/examples/masonry" >}}) to help you get started.
## CSS
@@ -730,7 +730,7 @@ In `v4` we used a CSS-only technique to mimic the behavior of [Masonry](https://
{{< added-in "5.2.0" >}}
-As part of Bootstrap's evolving CSS variables approach, cards now use local CSS variables on `.card` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+As part of Bootstrap's evolving CSS variables approach, cards now use local CSS variables on `.card` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is also supported.
{{< scss-docs name="card-css-vars" file="scss/_card.scss" >}}
--
GitLab
From c540433684d08ececfc0c8aad2aa3e1b145bcaf7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?=
<20430676+supermavster@users.noreply.github.com>
Date: Mon, 9 May 2022 22:20:29 -0500
Subject: [PATCH 30/53] Update color.md
General structure for a specific sentence of the document and markdown structure MD033
---
site/content/docs/5.1/customize/color.md | 12 ++++++------
1 file changed, 6 insertions(+), 6 deletions(-)
diff --git a/site/content/docs/5.1/customize/color.md b/site/content/docs/5.1/customize/color.md
index 23a7f71042..951153d68b 100644
--- a/site/content/docs/5.1/customize/color.md
+++ b/site/content/docs/5.1/customize/color.md
@@ -20,7 +20,7 @@ We use a subset of all colors to create a smaller color palette for generating c
{{< /theme-colors.inline >}}
</div>
-All these colors are available as a Sass map, `$theme-colors`.
+These colors are available as a Sass map, `$theme-colors`.
{{< scss-docs name="theme-colors-map" file="scss/_variables.scss" >}}
@@ -28,9 +28,9 @@ Check out [our Sass maps and loops docs]({{< docsref "/customize/sass#maps-and-l
## All colors
-All Bootstrap colors are available as Sass variables and a Sass map in `scss/_variables.scss` file. To avoid increased file sizes, we don't create text or background color classes for each of these variables. Instead, we choose a subset of these colors for a [theme palette](#theme-colors).
+All Bootstrap colors are available as Sass variables and a Sass map in the `scss/_variables.scss` file. To avoid increased file sizes, we don't create text or background color classes for each variable. Instead, we choose a subset of these colors for a [theme palette](#theme-colors).
-Be sure to monitor contrast ratios as you customize colors. As shown below, we've added three contrast ratios to each of the main colors—one for the swatch's current colors, one for against white, and one for against black.
+Be sure to monitor contrast ratios as you customize colors. As shown below, we've added three contrast ratios to each of the primary colors—one for the swatch's current colors, one against white, and one for black.
<div class="row font-monospace">
{{< theme-colors.inline >}}
@@ -91,7 +91,7 @@ Within `scss/_variables.scss`, you'll find Bootstrap's color variables and Sass
{{< scss-docs name="colors-map" file="scss/_variables.scss" >}}
-Add, remove, or modify values within the map to update how they're used in many other components. Unfortunately at this time, not _every_ component utilizes this Sass map. Future updates will strive to improve upon this. Until then, plan on making use of the `${color}` variables and this Sass map.
+Add, remove, or modify values within the map to update how they're used in many other components. Unfortunately, at this time, not _every_ component utilizes this Sass map. Future updates will strive to improve upon this. Until then, plan on making use of the `${color}` variables and this Sass map.
### Example
@@ -111,10 +111,10 @@ Here's how you can use these in your Sass:
{{< added-in "5.1.0" >}}
-Bootstrap doesn't include `color` and `background-color` utilities for every color variable, but you can generate these yourself with our [utility API]({{< docsref "/utilities/api" >}}) and our extended Sass maps added in v5.1.0.
+Bootstrap doesn't include `color` and `background-color` utilities for every color variable. Still, you can generate these yourself with our [utility API]({{< docsref "/utilities/api" >}}) and our extended Sass maps added in v5.1.0.
1. To start, make sure you've imported our functions, variables, mixins, and utilities.
-2. Use our `map-merge-multiple()` function to quickly merge multiple Sass maps together in a new map.
+2. Use our `map-merge-multiple()` function to merge multiple Sass maps into a new map quickly.
3. Merge this new combined map to extend any utility with a `{color}-{level}` class name.
Here's an example that generates text color utilities (e.g., `.text-purple-500`) using the above steps.
--
GitLab
From bf4f2a937ef75e9678285f92c6c56a28712e001b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?=
<20430676+supermavster@users.noreply.github.com>
Date: Mon, 9 May 2022 22:22:50 -0500
Subject: [PATCH 31/53] Update approach.md
General structure for a specific sentence of the document.
---
site/content/docs/5.1/extend/approach.md | 38 ++++++++++++------------
1 file changed, 19 insertions(+), 19 deletions(-)
diff --git a/site/content/docs/5.1/extend/approach.md b/site/content/docs/5.1/extend/approach.md
index 033ab219fd..780b3786ac 100644
--- a/site/content/docs/5.1/extend/approach.md
+++ b/site/content/docs/5.1/extend/approach.md
@@ -1,42 +1,42 @@
---
layout: docs
title: Approach
-description: Learn about the guiding principles, strategies, and techniques used to build and maintain Bootstrap so you can more easily customize and extend it yourself.
+description: Learn about the guiding principles, strategies, and techniques used to build and maintain Bootstrap to customize and extend it yourself more easily.
group: extend
aliases:
- "/docs/5.1/extend/"
---
-While the getting started pages provide an introductory tour of the project and what it offers, this document focuses on _why_ we do the things we do in Bootstrap. It explains our philosophy to building on the web so that others can learn from us, contribute with us, and help us improve.
+While the getting started pages provide an introductory tour of the project and what it offers, this document focuses on _why_ we do the things we do in Bootstrap. It explains our philosophy of building on the web so that others can learn from us, contribute to us, and help us improve.
See something that doesn't sound right, or perhaps could be done better? [Open an issue]({{< param repo >}}/issues/new)—we'd love to discuss it with you.
## Summary
-We'll dive into each of these more throughout, but at a high level, here's what guides our approach.
+We'll dive into each of these more throughout, but here's what guides our approach at a high level.
- Components should be responsive and mobile-first
- Components should be built with a base class and extended via modifier classes
-- Component states should obey a common z-index scale
-- Whenever possible, prefer a HTML and CSS implementation over JavaScript
+- Component states should obey a standard z-index scale
+- Whenever possible, prefer an HTML and CSS implementation over JavaScript
- Whenever possible, use utilities over custom styles
- Whenever possible, avoid enforcing strict HTML requirements (children selectors)
## Responsive
-Bootstrap's responsive styles are built to be responsive, an approach that's often referred to as _mobile-first_. We use this term in our docs and largely agree with it, but at times it can be too broad. While not every component _must_ be entirely responsive in Bootstrap, this responsive approach is about reducing CSS overrides by pushing you to add styles as the viewport becomes larger.
+Bootstrap's responsive styles are built to be responsive, an approach that's often referred to as _mobile-first_. We use this term in our docs and largely agree with it, but it can be too broad at times. While not every component _must_ be entirely responsive in Bootstrap, this responsive approach reduces CSS overrides by pushing you to add styles as the viewport becomes larger.
Across Bootstrap, you'll see this most clearly in our media queries. In most cases, we use `min-width` queries that begin to apply at a specific breakpoint and carry up through the higher breakpoints. For example, a `.d-none` applies from `min-width: 0` to infinity. On the other hand, a `.d-md-none` applies from the medium breakpoint and up.
-At times we'll use `max-width` when a component's inherent complexity requires it. At times, these overrides are functionally and mentally clearer to implement and support than rewriting core functionality from our components. We strive to limit this approach, but will use it from time to time.
+We'll use `max-width` when a component's inherent complexity requires it. At times, these overrides are functionally and mentally clearer to implement and support than rewriting core functionality from our components. We strive to limit this approach but will use it from time to time.
## Classes
Aside from our Reboot, a cross-browser normalization stylesheet, all our styles aim to use classes as selectors. This means steering clear of type selectors (e.g., `input[type="text"]`) and extraneous parent classes (e.g., `.parent .child`) that make styles too specific to easily override.
-As such, components should be built with a base class that houses common, not-to-be overridden property-value pairs. For example, `.btn` and `.btn-primary`. We use `.btn` for all the common styles like `display`, `padding`, and `border-width`. We then use modifiers like `.btn-primary` to add the color, background-color, border-color, etc.
+Components should be built with a base class that houses common, not-to-be overridden property-value pairs. For example, `.btn` and `.btn-primary`. We use `.btn` for all the common styles like `display`, `padding`, and `border-width`. We then use modifiers like `.btn-primary` to add the color, background-color, border-color, etc.
-Modifier classes should only be used when there are multiple properties or values to be changed across multiple variants. Modifiers are not always necessary, so be sure you're actually saving lines of code and preventing unnecessary overrides when creating them. Good examples of modifiers are our theme color classes and size variants.
+Modifier classes should only be used when multiple properties or values are changed across multiple variants. Modifiers are not always necessary, so be sure you're saving lines of code and preventing unnecessary overrides when creating them. Good examples of modifiers are our theme color classes and size variants.
## z-index scales
@@ -47,35 +47,35 @@ There are two `z-index` scales in Bootstrap—elements within a component and ov
- Some components in Bootstrap are built with overlapping elements to prevent double borders without modifying the `border` property. For example, button groups, input groups, and pagination.
- These components share a standard `z-index` scale of `0` through `3`.
- `0` is default (initial), `1` is `:hover`, `2` is `:active`/`.active`, and `3` is `:focus`.
-- This approach matches our expectations of highest user priority. If an element is focused, it's in view and at the user's attention. Active elements are second highest because they indicate state. Hover is third highest because it indicates user intent, but nearly _anything_ can be hovered.
+- This approach matches our expectations of the highest user priority. If an element is focused, it's in view and at the user's attention. Active elements are second-highest because they indicate state. Hover is third highest because it indicates user intent, but nearly _anything_ can hover.
### Overlay components
-Bootstrap includes several components that function as an overlay of some kind. This includes, in order of highest `z-index`, dropdowns, fixed and sticky navbars, modals, tooltips, and popovers. These components have their own `z-index` scale that begins at `1000`. This starting number was chosen arbitrarily and serves as a small buffer between our styles and your project's custom styles.
+Bootstrap includes several components that function as an overlay of some kind. This includes, in order of highest `z-index`, dropdowns, fixed and sticky navbars, modals, tooltips, and popovers. These components have their own `z-index` scale that begins at `1000`. This starting number was chosen arbitrarily and serves as a small buffer between our and your project's custom styles.
-Each overlay component increases its `z-index` value slightly in such a way that common UI principles allow user focused or hovered elements to remain in view at all times. For example, a modal is document blocking (e.g., you cannot take any other action save for the modal's action), so we put that above our navbars.
+Each overlay component increases its `z-index` value slightly, so that common UI principles allow user-focused or hovered elements to remain in view at all times. For example, a modal is document blocking (e.g., you cannot take any other action save for the modal's action), so we put that above our navbars.
Learn more about this in our [`z-index` layout page]({{< docsref "/layout/z-index" >}}).
## HTML and CSS over JS
-Whenever possible, we prefer to write HTML and CSS over JavaScript. In general, HTML and CSS are more prolific and accessible to more people of all different experience levels. HTML and CSS are also faster in your browser than JavaScript, and your browser generally provides a great deal of functionality for you.
+Whenever possible, we prefer to write HTML and CSS over JavaScript. In general, HTML and CSS are more prolific and accessible to people of all different experience levels. HTML and CSS are also faster in your browser than JavaScript, and your browser generally provides a great deal of functionality for you.
This principle is our first-class JavaScript API using `data` attributes. You don't need to write nearly any JavaScript to use our JavaScript plugins; instead, write HTML. Read more about this in [our JavaScript overview page]({{< docsref "/getting-started/javascript#data-attributes" >}}).
-Lastly, our styles build on the fundamental behaviors of common web elements. Whenever possible, we prefer to use what the browser provides. For example, you can put a `.btn` class on nearly any element, but most elements don't provide any semantic value or browser functionality. So instead, we use `<button>`s and `<a>`s.
+Lastly, our styles build on the fundamental behaviors of common web elements. Whenever possible, we prefer to use what the browser provides. For example, you can put a `.btn` class on nearly any element, but most elements don't provide semantic value or browser functionality. So instead, we use `<button>`s and `<a>`s.
-The same goes for more complex components. While we *could* write our own form validation plugin to add classes to a parent element based on an input's state, thereby allowing us to style the text say red, we prefer using the `:valid`/`:invalid` pseudo-elements every browser provides us.
+The same goes for more complex components. While we *could* write our form validation plugin to add classes to a parent element based on an input's state, allowing us to style the text say red, we prefer using the `:valid`/`:invalid` pseudo-elements every browser provides us.
## Utilities
-Utility classes—formerly helpers in Bootstrap 3—are a powerful ally in combatting CSS bloat and poor page performance. A utility class is typically a single, immutable property-value pairing expressed as a class (e.g., `.d-block` represents `display: block;`). Their primary appeal is speed of use while writing HTML and limiting the amount of custom CSS you have to write.
+Utility classes—formerly helpers in Bootstrap 3—are a powerful ally in combatting CSS bloat and poor page performance. A utility class is typically a single, immutable property-value pairing expressed as a class (e.g., `.d-block` represents `display: block;`). Their primary appeal is the speed of use while writing HTML and limiting the amount of custom CSS you have to write.
-Specifically regarding custom CSS, utilities can help combat increasing file size by reducing your most commonly repeated property-value pairs into single classes. This can have a dramatic effect at scale in your projects.
+Specifically, regarding custom CSS, utilities can help combat increasing file size by reducing your most commonly repeated property-value pairs into single classes. This can have a dramatic effect at scale in your projects.
## Flexible HTML
-While not always possible, we strive to avoid being overly dogmatic in our HTML requirements for components. Thus, we focus on single classes in our CSS selectors and try to avoid immediate children selectors (`>`). This gives you more flexibility in your implementation and helps keep our CSS simpler and less specific.
+While not always possible, we strive to avoid being overly dogmatic in our HTML requirements for components. Thus, we focus on single classes in our CSS selectors and avoid immediate children selectors (`>`). This gives you more flexibility in your implementation and helps keep our CSS more straightforward and less specific.
## Code conventions
@@ -83,4 +83,4 @@ While not always possible, we strive to avoid being overly dogmatic in our HTML
We use [Stylelint](https://stylelint.io/) to enforce these standards and more in our Sass/CSS. [Our custom Stylelint config](https://github.com/twbs/stylelint-config-twbs-bootstrap) is open source and available for others to use and extend.
-We use [vnu-jar](https://www.npmjs.com/package/vnu-jar) to enforce standard and semantic HTML, as well as detecting common errors.
+We use [vnu-jar](https://www.npmjs.com/package/vnu-jar) to enforce standard and semantic HTML and detect common errors.
--
GitLab
From afbdd8e9a82c096706c9b1183b8fdc3113270833 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?=
<20430676+supermavster@users.noreply.github.com>
Date: Mon, 9 May 2022 22:24:47 -0500
Subject: [PATCH 32/53] Update css-grid.md
General structure for a specific sentence of the document and markdown structure MD033
---
site/content/docs/5.1/layout/css-grid.md | 32 ++++++++++++------------
1 file changed, 16 insertions(+), 16 deletions(-)
diff --git a/site/content/docs/5.1/layout/css-grid.md b/site/content/docs/5.1/layout/css-grid.md
index 4b0be38462..0b68ffe58d 100644
--- a/site/content/docs/5.1/layout/css-grid.md
+++ b/site/content/docs/5.1/layout/css-grid.md
@@ -7,15 +7,15 @@ toc: true
added: "5.1"
---
-Bootstrap's default grid system represents the culmination of over a decade of CSS layout techniques, tried and tested by millions of people. But, it was also created without many of the modern CSS features and techniques we're seeing in browsers like the new CSS Grid.
+Bootstrap's default grid system represents the culmination of over a decade of CSS layout techniques tested by millions of people. But, it was also created without many of the modern CSS features and techniques we see in browsers like the new CSS Grid.
{{< callout warning >}}
-**Heads up—our CSS Grid system is experimental and opt-in as of v5.1.0!** We included it in our documentation's CSS to demonstrate it for you, but it's disabled by default. Keep reading to learn how to enable it in your projects.
+**Heads up—our CSS Grid system is experimental and opt-in as v5.1.0!** We included it in our documentation's CSS to demonstrate it for you, but it's disabled by default. Please keep reading to learn how to enable it in your projects.
{{< /callout >}}
## How it works
-With Bootstrap 5, we've added the option to enable a separate grid system that's built on CSS Grid, but with a Bootstrap twist. You still get classes you can apply on a whim to build responsive layouts, but with a different approach under the hood.
+With Bootstrap 5, we've added the option to enable a separate grid system built on CSS Grid but with a Bootstrap twist. You still get classes you can apply on a whim to build responsive layouts, but with a different approach under the hood.
- **CSS Grid is opt-in.** Disable the default grid system by setting `$enable-grid-classes: false` and enable the CSS Grid by setting `$enable-cssgrid: true`. Then, recompile your Sass.
@@ -33,19 +33,19 @@ Compared to the default grid system:
- Flex utilities don't affect the CSS Grid columns in the same way.
-- Gaps replaces gutters. The `gap` property replaces the horizontal `padding` from our default grid system and functions more like `margin`.
+- Gaps replace gutters. The `gap` property replaces the horizontal `padding` from our default grid system and functions more like `margin`.
-- As such, unlike `.row`s, `.grid`s have no negative margins and margin utilities cannot be used to change the grid gutters. Grid gaps are applied horizontally and vertically by default. See the [customizing section](#customizing) for more details.
+Unlike `.row`s, `.grid`s have no negative margins, and margin utilities cannot be used to change the grid gutters. Grid gaps are applied horizontally and vertically by default. See the [customizing section](#customizing) for more details.
- Inline and custom styles should be viewed as replacements for modifier classes (e.g., `style="--bs-columns: 3;"` vs `class="row-cols-3"`).
-- Nesting works similarly, but may require you to reset your column counts on each instance of a nested `.grid`. See the [nesting section](#nesting) for details.
+- Nesting works similarly but may require you to reset your column counts on each instance of a nested `.grid`. See the [nesting section](#nesting) for details.
## Examples
### Three columns
-Three equal-width columns across all viewports and devices can be created by using the `.g-col-4` classes. Add [responsive classes](#responsive) to change the layout by viewport size.
+Three equal-width columns across all viewports and devices can be created using the `.g-col-4` classes. Add [responsive classes](#responsive) to change the layout by viewport size.
{{< example class="bd-example-cssgrid text-center" >}}
<div class="grid">
@@ -57,7 +57,7 @@ Three equal-width columns across all viewports and devices can be created by usi
### Responsive
-Use responsive classes to adjust your layout across viewports. Here we start with two columns on the narrowest viewports, and then grow to three columns on medium viewports and above.
+Use responsive classes to adjust your layout across viewports. Here we start with two columns on the narrowest viewports and then grow to three on medium viewports and above.
{{< example class="bd-example-cssgrid text-center" >}}
<div class="grid">
@@ -67,7 +67,7 @@ Use responsive classes to adjust your layout across viewports. Here we start wit
</div>
{{< /example >}}
-Compare that to this two column layout at all viewports.
+Compare that to these two column layout at all viewports.
{{< example class="bd-example-cssgrid text-center" >}}
<div class="grid">
@@ -78,7 +78,7 @@ Compare that to this two column layout at all viewports.
## Wrapping
-Grid items automatically wrap to the next line when there's no more room horizontally. Note that the `gap` applies to horizontal and vertical gaps between grid items.
+Grid items automatically wrap to the following line horizontally when there's no more room. The `gap` applies to horizontal and vertical gaps between grid items.
{{< example class="bd-example-cssgrid text-center" >}}
<div class="grid">
@@ -138,14 +138,14 @@ This behavior can be mixed with grid column classes.
## Nesting
-Similar to our default grid system, our CSS Grid allows for easy nesting of `.grid`s. However, unlike the default, this grid inherits changes in the rows, columns, and gaps. Consider the example below:
+Like our default grid system, our CSS Grid allows for easy nesting of `.grid`s. However, unlike the default, this grid inherits changes in the rows, columns, and gaps. Consider the example below:
- We override the default number of columns with a local CSS variable: `--bs-columns: 3`.
-- In the first auto-column, the column count is inherited and each column is one-third of the available width.
+The column count is inherited in the first auto-column, and each column is one-third of the available width.
- In the second auto-column, we've reset the column count on the nested `.grid` to 12 (our default).
- The third auto-column has no nested content.
-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 text-center" >}}
<div class="grid" style="--bs-columns: 3;">
@@ -180,7 +180,7 @@ Customize the number of columns, the number of rows, and the width of the gaps w
| `--bs-gap` | `1.5rem` | The size of the gap between columns (vertical and horizontal) |
{{< /bs-table >}}
-These CSS variables have no default value; instead, they apply fallback values that are used _until_ a local instance is provided. For example, we use `var(--bs-rows, 1)` for our CSS Grid rows, which ignores `--bs-rows` because that hasn't been set anywhere yet. Once it is, the `.grid` instance will use that value instead of the fallback value of `1`.
+These CSS variables have no default value; instead, they apply fallback values used _until_ a local instance is provided. For example, we use `var(--bs-rows, 1)` for our CSS Grid rows, which ignores `--bs-rows` because that hasn't been set anywhere yet. Once it is, the `.grid` instance will use that value instead of the fallback value of `1`.
### No grid classes
@@ -226,7 +226,7 @@ Adding more rows and changing the placement of columns:
### Gaps
-Change the vertical gaps only by modifying the `row-gap`. Note that we use `gap` on `.grid`s, but `row-gap` and `column-gap` can be modified as needed.
+Change the vertical gaps only by modifying the `row-gap`. We use `gap` on `.grid`s, but `row-gap` and `column-gap` can be modified as needed.
{{< example class="bd-example-cssgrid text-center" >}}
<div class="grid" style="row-gap: 0;">
@@ -257,7 +257,7 @@ One limitation of the CSS Grid is that our default classes are still generated b
- Modify those default Sass variables and recompile your CSS.
- Use inline or custom styles to augment the provided classes.
-For example, you can increase the column count and change the gap size, and then size your "columns" with a mix of inline styles and predefined CSS Grid column classes (e.g., `.g-col-4`).
+For example, you can increase the column count, change the gap size, and then size your "columns" with a mix of inline styles and predefined CSS Grid column classes (e.g., `.g-col-4`).
{{< example class="bd-example-cssgrid text-center" >}}
<div class="grid" style="--bs-columns: 18; --bs-gap: .5rem;">
--
GitLab
From be12e018eb3a762b102a27680f8deb09edd402bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?=
<20430676+supermavster@users.noreply.github.com>
Date: Mon, 9 May 2022 22:25:30 -0500
Subject: [PATCH 33/53] Update float.md
General structure for a specific sentence of the document and markdown structure MD033
---
site/content/docs/5.1/utilities/float.md | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/site/content/docs/5.1/utilities/float.md b/site/content/docs/5.1/utilities/float.md
index a18c21471c..324e37695b 100644
--- a/site/content/docs/5.1/utilities/float.md
+++ b/site/content/docs/5.1/utilities/float.md
@@ -8,7 +8,7 @@ toc: true
## Overview
-These utility classes float an element to the left or right, or disable floating, based on the current viewport size using the [CSS `float` property](https://developer.mozilla.org/en-US/docs/Web/CSS/float). `!important` is included to avoid specificity issues. These use the same viewport breakpoints as our grid system. Please be aware float utilities have no effect on flex items.
+These utility classes float an element to the left or right or disable floating based on the current viewport size using the [CSS `float` property](https://developer.mozilla.org/en-US/docs/Web/CSS/float). `!important` is included to avoid specificity issues. These use the same viewport breakpoints as our grid system. Please be aware float utilities do not affect flex items.
{{< example >}}
<div class="float-start">Float start on all viewport sizes</div><br>
@@ -32,6 +32,7 @@ Here are all the support classes:
{{< markdown >}}
{{< float.inline >}}
{{- range $.Site.Data.breakpoints }}
+
- `.float{{ .abbr }}-start`
- `.float{{ .abbr }}-end`
- `.float{{ .abbr }}-none`
--
GitLab
From 693935954e5487d56737c58f2c5dccbc6a61dc19 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?=
<20430676+supermavster@users.noreply.github.com>
Date: Mon, 9 May 2022 22:26:35 -0500
Subject: [PATCH 34/53] Update badge.md
General structure for a specific sentence of the document and markdown structure MD033
---
site/content/docs/5.1/components/badge.md | 12 ++++++------
1 file changed, 6 insertions(+), 6 deletions(-)
diff --git a/site/content/docs/5.1/components/badge.md b/site/content/docs/5.1/components/badge.md
index 55b1ffb851..406b1ec2db 100644
--- a/site/content/docs/5.1/components/badge.md
+++ b/site/content/docs/5.1/components/badge.md
@@ -1,14 +1,14 @@
---
layout: docs
title: Badges
-description: Documentation and examples for badges, our small count and labeling component.
+description: Documentation and examples for badges, our small count, and labeling component.
group: components
toc: true
---
## Examples
-Badges scale to match the size of the immediate parent element by using relative font sizing and `em` units. As of v5, badges no longer have focus or hover styles for links.
+Badges scale to match the size of the immediate parent element by using relative font sizing and them` units. As of v5, badges no longer have the focus or hover styles for links.
### Headings
@@ -23,7 +23,7 @@ Badges scale to match the size of the immediate parent element by using relative
### Buttons
-Badges can be used as part of links or buttons to provide a counter.
+Badges can be used as links or buttons to provide a counter.
{{< example >}}
<button type="button" class="btn btn-primary">
@@ -31,13 +31,13 @@ Badges can be used as part of links or buttons to provide a counter.
</button>
{{< /example >}}
-Note that depending on how they are used, badges may be confusing for users of screen readers and similar assistive technologies. While the styling of badges provides a visual cue as to their purpose, these users will simply be presented with the content of the badge. Depending on the specific situation, these badges may seem like random additional words or numbers at the end of a sentence, link, or button.
+Note that badges may be confusing for users of screen readers and similar assistive technologies, depending on how they are used. While the styling of badges provides a visual cue as to their purpose, these users will be presented with the content of the badge. Depending on the specific situation, these badges may seem like random additional words or numbers at the end of a sentence, link, or button.
Unless the context is clear (as with the "Notifications" example, where it is understood that the "4" is the number of notifications), consider including additional context with a visually hidden piece of additional text.
### Positioned
-Use utilities to modify a `.badge` and position it in the corner of a link or button.
+Use utilities to modify a `.badge` and position it in a link or button corner.
{{< example >}}
<button type="button" class="btn btn-primary position-relative">
@@ -94,7 +94,7 @@ Use the `.rounded-pill` utility class to make badges more rounded with a larger
{{< added-in "5.2.0" >}}
-As part of Bootstrap's evolving CSS variables approach, badges now use local CSS variables on `.badge` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+As part of Bootstrap's evolving CSS variables approach, badges now use local CSS variables on `.badge` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is also supported.
{{< scss-docs name="badge-css-vars" file="scss/_badge.scss" >}}
--
GitLab
From 44aa940983112ea7e454ee676df3f5b941c2486c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?=
<20430676+supermavster@users.noreply.github.com>
Date: Mon, 9 May 2022 22:30:51 -0500
Subject: [PATCH 35/53] Update modal.md
General structure for a specific sentence of the document and markdown structure MD033 and MD043
---
site/content/docs/5.1/components/modal.md | 56 +++++++++++------------
1 file changed, 28 insertions(+), 28 deletions(-)
diff --git a/site/content/docs/5.1/components/modal.md b/site/content/docs/5.1/components/modal.md
index 762a569bff..79309a9ae3 100644
--- a/site/content/docs/5.1/components/modal.md
+++ b/site/content/docs/5.1/components/modal.md
@@ -1,18 +1,18 @@
---
layout: docs
title: Modal
-description: Use Bootstrap's JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
+description: Use Bootstrap's JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or custom content.
group: components
toc: true
---
## How it works
-Before getting started with Bootstrap's modal component, be sure to read the following as our menu options have recently changed.
+Before starting Bootstrap's modal component, please read the following as our menu options have recently changed.
- Modals are built with HTML, CSS, and JavaScript. They're positioned over everything else in the document and remove scroll from the `<body>` so that modal content scrolls instead.
- Clicking on the modal "backdrop" will automatically close the modal.
-- Bootstrap only supports one modal window at a time. Nested modals aren't supported as we believe them to be poor user experiences.
+- Bootstrap only supports one modal window at a time. Nested modals aren't supported as we believe they are poor user experiences.
- Modals use `position: fixed`, which can sometimes be a bit particular about its rendering. Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements. You'll likely run into issues when nesting a `.modal` within another fixed element.
- Once again, due to `position: fixed`, there are some caveats with using modals on mobile devices. [See our browser support docs]({{< docsref "/getting-started/browsers-devices#modals-and-dropdowns-on-mobile" >}}) for details.
- Due to how HTML5 defines its semantics, [the `autofocus` HTML attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autofocus) has no effect in Bootstrap modals. To achieve the same effect, use some custom JavaScript:
@@ -36,7 +36,7 @@ Keep reading for demos and usage guidelines.
### Modal components
-Below is a _static_ modal example (meaning its `position` and `display` have been overridden). Included are the modal header, modal body (required for `padding`), and modal footer (optional). We ask that you include modal headers with dismiss actions whenever possible, or provide another explicit dismiss action.
+Below is a _static_ modal example (meaning its `position` and `display` have been overridden). The modal header, modal body (required for `padding`), and modal footer (optional) are included. We ask that you include modal headers with dismiss actions whenever possible, or provide another explicit dismiss action.
<div class="bd-example bg-light">
<div class="modal position-static d-block" tabindex="-1">
@@ -134,7 +134,7 @@ Toggle a working modal demo by clicking the button below. It will slide down and
### Static backdrop
-When backdrop is set to static, the modal will not close when clicking outside of it. Click the button below to try it.
+When the backdrop is set to static, the modal will not close when clicking outside of it. Click the button below to try it.
<div class="modal fade" id="staticBackdropLive" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLiveLabel" aria-hidden="true">
<div class="modal-dialog">
@@ -188,7 +188,7 @@ When backdrop is set to static, the modal will not close when clicking outside o
### Scrolling long content
-When modals become too long for the user's viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.
+When modals become too long for the user's viewport or device, they scroll independently of the page itself. Try the demo below to see what we mean.
<div class="modal fade" id="exampleModalLong" tabindex="-1" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog">
@@ -214,7 +214,7 @@ When modals become too long for the user's viewport or device, they scroll indep
</button>
</div>
-You can also create a scrollable modal that allows scroll the modal body by adding `.modal-dialog-scrollable` to `.modal-dialog`.
+You can also create a scrollable modal that allows Scrolling of the modal body by adding `.modal-dialog-scrollable` to `.modal-dialog`.
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable">
@@ -356,7 +356,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
### Using the grid
-Utilize the Bootstrap grid system within a modal by nesting `.container-fluid` within the `.modal-body`. Then, use the normal grid system classes as you would anywhere else.
+Utilize the Bootstrap grid system within a modal by nesting `.container-fluid` within the `.modal-body`. Then, use the standard grid system classes as you would anywhere else.
<div class="modal fade" id="gridSystemModal" tabindex="-1" aria-labelledby="gridModalLabel" aria-hidden="true">
<div class="modal-dialog">
@@ -440,9 +440,9 @@ Utilize the Bootstrap grid system within a modal by nesting `.container-fluid` w
### Varying modal content
-Have a bunch of buttons that all trigger the same modal with slightly different contents? Use `event.relatedTarget` and [HTML `data-bs-*` attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes) to vary the contents of the modal depending on which button was clicked.
+Have many buttons that all trigger the same modal with slightly different contents? Use `event.relatedTarget` and [HTML `data-bs-*` attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes) to vary the contents of the modal depending on which button was clicked.
-Below is a live demo followed by example HTML and JavaScript. For more information, [read the modal events docs](#events) for details on `relatedTarget`.
+Below is a live demo followed by an example of HTML and JavaScript. For more information, [read the modal events docs](#events) for details on `relatedTarget`.
{{< example >}}
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@mdo">Open modal for @mdo</button>
@@ -498,7 +498,7 @@ exampleModal.addEventListener('show.bs.modal', event => {
### Toggle between modals
-Toggle between multiple modals with some clever placement of the `data-bs-target` and `data-bs-toggle` attributes. For example, you could toggle a password reset modal from within an already open sign in modal. **Please note multiple modals cannot be open at the same time**—this method simply toggles between two separate modals.
+Toggle between multiple modals with some clever placement of the `data-bs-target` and `data-bs-toggle` attributes. For example, you could toggle a password reset modal from an already open sign-in modal. **Please note that multiple modals cannot be open simultaneously**—this method toggles between two separate models.
{{< example >}}
<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
@@ -538,13 +538,13 @@ Toggle between multiple modals with some clever placement of the `data-bs-target
### Change animation
-The `$modal-fade-transform` variable determines the transform state of `.modal-dialog` before the modal fade-in animation, the `$modal-show-transform` variable determines the transform of `.modal-dialog` at the end of the modal fade-in animation.
+The `$modal-fade-transform` variable determines the transformed state of `.modal-dialog` before the modal fade-in animation; the `$modal-show-transform` variable determines the transform of `.modal-dialog` at the end of the modal fade-in animation.
-If you want for example a zoom-in animation, you can set `$modal-fade-transform: scale(.8)`.
+For example, if you want a zoom-in animation, you can set `$modal-fade-transform: scale(.8)`.
### Remove animation
-For modals that simply appear rather than fade in to view, remove the `.fade` class from your modal markup.
+For models that appear rather than fade into view, remove the `.fade` class from your modal markup.
```html
<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
@@ -554,19 +554,19 @@ For modals that simply appear rather than fade in to view, remove the `.fade` cl
### Dynamic heights
-If the height of a modal changes while it is open, you should call `myModal.handleUpdate()` to readjust the modal's position in case a scrollbar appears.
+If the height of a modal change while it is open, you should call `myModal.handleUpdate()` to readjust the modal's position in case a scrollbar appears.
### Accessibility
-Be sure to add `aria-labelledby="..."`, referencing the modal title, to `.modal`. Additionally, you may give a description of your modal dialog with `aria-describedby` on `.modal`. Note that you don't need to add `role="dialog"` since we already add it via JavaScript.
+Add `aria-labelledby="..."`, referencing the modal title, to `.modal`. Additionally, you may describe your modal dialog with `aria-described on`.modal`. Note that you don't need to add`role="dialog"` since we already add it via JavaScript.
### Embedding YouTube videos
-Embedding YouTube videos in modals requires additional JavaScript not in Bootstrap to automatically stop playback and more. [See this helpful Stack Overflow post](https://stackoverflow.com/questions/18622508/bootstrap-3-and-youtube-in-modal) for more information.
+Embedding YouTube videos in modals requires additional JavaScript to stop playback automatically, not Bootstrap. [See this helpful Stack Overflow post](https://stackoverflow.com/questions/18622508/bootstrap-3-and-youtube-in-modal) for more information.
## Optional sizes
-Modals have three optional sizes, available via modifier classes to be placed on a `.modal-dialog`. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.
+Modals have three optional sizes, available via modifier classes to be placed on a `.modal-dialog`. These sizes kick in at specific breakpoints to avoid horizontal scrollbars on narrower viewports.
{{< bs-table "table" >}}
| Size | Class | Modal max-width
@@ -635,7 +635,7 @@ Our default modal without modifier class constitutes the "medium" size modal.
## Fullscreen Modal
-Another override is the option to pop up a modal that covers the user viewport, available via modifier classes that are placed on a `.modal-dialog`.
+Another override is the option to pop up a modal that covers the user viewport, available via modifier classes placed on a `.modal-dialog`.
{{< bs-table >}}
| Class | Availability |
@@ -772,7 +772,7 @@ Another override is the option to pop up a modal that covers the user viewport,
{{< added-in "5.2.0" >}}
-As part of Bootstrap's evolving CSS variables approach, modals now use local CSS variables on `.modal` and `.modal-backdrop` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+As part of Bootstrap's evolving CSS variables approach, modals now use local CSS variables on `.modal` and `.modal-backdrop` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is also supported.
{{< scss-docs name="modal-css-vars" file="scss/_modal.scss" >}}
@@ -790,7 +790,7 @@ As part of Bootstrap's evolving CSS variables approach, modals now use local CSS
## Usage
-The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also overrides default scrolling behavior and generates a `.modal-backdrop` to provide a click area for dismissing shown modals when clicking outside the modal.
+The modal plugin toggles your hidden content on-demand via data attributes or JavaScript. It also overrides default scrolling behavior and generates a `.modal-backdrop` to provide a click area for dismissing shown modals when clicking outside the modal.
### Via data attributes
@@ -853,13 +853,13 @@ const myModal = new bootstrap.Modal('#myModal', {
{{< bs-table "table" >}}
| Method | Description |
| --- | --- |
-| `toggle` | Manually toggles a modal. **Returns to the caller before the modal has actually been shown or hidden** (i.e. before the `shown.bs.modal` or `hidden.bs.modal` event occurs). |
-| `show` | Manually opens a modal. **Returns to the caller before the modal has actually been shown** (i.e. before the `shown.bs.modal` event occurs). Also, you can pass a DOM element as an argument that can be received in the modal events (as the `relatedTarget` property). (i.e. `const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle)` |
-| `hide` | Manually hides a modal. **Returns to the caller before the modal has actually been hidden** (i.e. before the `hidden.bs.modal` event occurs). |
-| `handleUpdate` | Manually readjust the modal's position if the height of a modal changes while it is open (i.e. in case a scrollbar appears). |
+| `toggle` | Manually toggles a modal. **Returns to the caller before the modal has been shown or hidden** (i.e., before the `shown.bs.modal` or `hidden.bs.modal` event occurs). |
+| `show` | Manually opens a modal. **Returns to the caller before the modal has been shown** (i.e., before the `shown.bs.modal` event occurs). Also, you can pass a DOM element as an argument that can be received in the modal events (as the `relatedTarget` property). (i.e. `const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle)` |
+| `hide` | Manually hides a modal. **Returns to the caller before the modal has been hidden** (i.e., before the `hidden.bs.modal` event occurs). |
+| `handleUpdate` | Manually readjust the modal's position if the height of the modal changes while it is open (i.e., in case a scrollbar appears). |
| `dispose` | Destroys an element's modal. (Removes stored data on the DOM element) |
-| `getInstance` | *Static* method which allows you to get the modal instance associated with a DOM element. |
-| `getOrCreateInstance` | *Static* method which allows you to get the modal instance associated with a DOM element, or create a new one in case it wasn't initialized. |
+| `getInstance` | _Static_ method allows you to get the modal instance associated with a DOM element. |
+| `getOrCreateInstance` | _Static_ method, which allows you to get the modal instance associated with a DOM element or create a new one if it wasn't initialized. |
{{< /bs-table >}}
### Events
@@ -873,7 +873,7 @@ Bootstrap's modal class exposes a few events for hooking into modal functionalit
| `shown.bs.modal` | This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the `relatedTarget` property of the event. |
| `hide.bs.modal` | This event is fired immediately when the `hide` instance method has been called. |
| `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 the modal is performed. The event is also fired when the escape key is pressed, and the `keyboard` option is set to `false`. |
{{< /bs-table >}}
```js
--
GitLab
From b0a06be7eb77eeccca925709d3ecded4e0b887c9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?=
<20430676+supermavster@users.noreply.github.com>
Date: Mon, 9 May 2022 22:32:51 -0500
Subject: [PATCH 36/53] Update validation.md
General structure for a specific sentence of the document and markdown structure MD033
---
site/content/docs/5.1/forms/validation.md | 24 +++++++++++------------
1 file changed, 12 insertions(+), 12 deletions(-)
diff --git a/site/content/docs/5.1/forms/validation.md b/site/content/docs/5.1/forms/validation.md
index a6962d6774..ed78d9eae6 100644
--- a/site/content/docs/5.1/forms/validation.md
+++ b/site/content/docs/5.1/forms/validation.md
@@ -1,7 +1,7 @@
---
layout: docs
title: Validation
-description: Provide valuable, actionable feedback to your users with HTML5 form validation, via browser default behaviors or custom styles and JavaScript.
+description: Provide valuable, actionable feedback to your users with HTML5 form validation via browser default behaviors or custom styles and JavaScript.
group: forms
toc: true
extra_js:
@@ -10,7 +10,7 @@ extra_js:
---
{{< callout warning >}}
-We are aware that currently the client-side custom validation styles and tooltips are not accessible, since they are not exposed to assistive technologies. While we work on a solution, we'd recommend either using the server-side option or the default browser validation method.
+We are aware that the client-side custom validation styles and tooltips are currently not accessible since they are not exposed to assistive technologies. While working on a solution, we'd recommend either using the server-side option or the default browser validation method.
{{< /callout >}}
## How it works
@@ -18,7 +18,7 @@ We are aware that currently the client-side custom validation styles and tooltip
Here's how form validation works with Bootstrap:
- HTML form validation is applied via CSS's two pseudo-classes, `:invalid` and `:valid`. It applies to `<input>`, `<select>`, and `<textarea>` elements.
-- Bootstrap scopes the `:invalid` and `:valid` styles to parent `.was-validated` class, usually applied to the `<form>`. Otherwise, any required field without a value shows up as invalid on page load. This way, you may choose when to activate them (typically after form submission is attempted).
+- Bootstrap scopes the `:invalid` and `:valid` styles to parent `.was-validated` class, usually applied to the `<form>`. Otherwise, any required field without a value is invalid on page load. You may choose when to activate them (typically after form submission is attempted).
- To reset the appearance of the form (for instance, in the case of dynamic form submissions using AJAX), remove the `.was-validated` class from the `<form>` again after submission.
- As a fallback, `.is-invalid` and `.is-valid` classes may be used instead of the pseudo-classes for [server-side validation](#server-side). They do not require a `.was-validated` parent class.
- Due to constraints in how CSS works, we cannot (at present) apply styles to a `<label>` that comes before a form control in the DOM without the help of custom JavaScript.
@@ -30,9 +30,9 @@ With that in mind, consider the following demos for our custom form validation s
## Custom styles
-For custom Bootstrap form validation messages, you'll need to add the `novalidate` boolean attribute to your `<form>`. This disables the browser default feedback tooltips, but still provides access to the form validation APIs in JavaScript. Try to submit the form below; our JavaScript will intercept the submit button and relay feedback to you. When attempting to submit, you'll see the `:invalid` and `:valid` styles applied to your form controls.
+For custom Bootstrap form validation messages, you'll need to add the `novalidate` boolean attribute to your `<form>`. This disables the browser default feedback tooltips but still provides access to the form validation APIs in JavaScript. Try to submit the form below; our JavaScript will intercept the submit button and relay feedback to you. You'll see the `:invalid` and `:valid` styles applied to your form controls when attempting to submit.
-Custom feedback styles apply custom colors, borders, focus styles, and background icons to better communicate feedback. Background icons for `<select>`s are only available with `.form-select`, and not `.form-control`.
+Custom feedback styles apply colors, borders, focus styles, and background icons to communicate feedback better. Background icons for `<select>`s are only available with `.form-select`, and not `.form-control`.
{{< example >}}
<form class="row g-3 needs-validation" novalidate>
@@ -109,7 +109,7 @@ Custom feedback styles apply custom colors, borders, focus styles, and backgroun
## Browser defaults
-Not interested in custom validation feedback messages or writing JavaScript to change form behaviors? All good, you can use the browser defaults. Try submitting the form below. Depending on your browser and OS, you'll see a slightly different style of feedback.
+Not interested in custom validation feedback messages or writing JavaScript to change form behaviors? All good; you can use the browser defaults. Try submitting the form below. Depending on your browser and OS, you'll see a slightly different feedback style.
While these feedback styles cannot be styled with CSS, you can still customize the feedback text through JavaScript.
@@ -159,11 +159,11 @@ While these feedback styles cannot be styled with CSS, you can still customize t
</form>
{{< /example >}}
-## Server side
+## Server-side
-We recommend using client-side validation, but in case you require server-side validation, you can indicate invalid and valid form fields with `.is-invalid` and `.is-valid`. Note that `.invalid-feedback` is also supported with these classes.
+We recommend using client-side validation, but if you require server-side validation, you can indicate invalid and valid form fields with `.is-invalid` and `.is-valid`. Note that `.invalid-feedback` is also supported with these classes.
-For invalid fields, ensure that the invalid feedback/error message is associated with the relevant form field using `aria-describedby` (noting that this attribute allows more than one `id` to be referenced, in case the field already points to additional form text).
+For invalid fields, ensure that the invalid feedback/error message is associated with the relevant form field using `aria-describedby` (noting that this attribute allows more than one `id` to be referenced in case the field already points additional form text).
To fix [issues with border radius](https://github.com/twbs/bootstrap/issues/25110), input groups require an additional `.has-validation` class.
@@ -357,7 +357,7 @@ If your form layout allows it, you can swap the `.{valid|invalid}-feedback` clas
### Mixins
-Two mixins are combined together, through our [loop](#loop), to generate our form validation feedback styles.
+Through our [loop](#loop), two mixins are combined to generate our form validation feedback styles.
{{< scss-docs name="form-validation-mixins" file="scss/mixins/_forms.scss" >}}
@@ -371,10 +371,10 @@ Maps of `$form-validation-states` can contain three optional parameters to overr
### Loop
-Used to iterate over `$form-validation-states` map values to generate our validation styles. Any modifications to the above Sass map will be reflected in your compiled CSS via this loop.
+Used to iterate over `$form-validation-states` map values to generate our validation styles. Any modifications to the Sass map will be reflected in your compiled CSS via this loop.
{{< scss-docs name="form-validation-states-loop" file="scss/forms/_validation.scss" >}}
### Customizing
-Validation states can be customized via Sass with the `$form-validation-states` map. Located in our `_variables.scss` file, this Sass map is how we generate the default `valid`/`invalid` validation states. Included is a nested map for customizing each state's color, icon, tooltip color, and focus shadow. While no other states are supported by browsers, those using custom styles can easily add more complex form feedback.
+Validation states can be customized via Sass with the `$form-validation-states` map. Located in our `_variables.scss` file, this Sass map is how we generate the default `valid`/`invalid` validation states. Included is a nested map for customizing each state's color, icon, tooltip color, and focus shadow. While browsers support no other states, those using custom styles can easily add more complex form feedback.
--
GitLab
From 7baf842afab59ef2199e8fef559238449095ce2a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?=
<20430676+supermavster@users.noreply.github.com>
Date: Mon, 9 May 2022 22:33:29 -0500
Subject: [PATCH 37/53] Update clearfix.md
General structure for a specific sentence of the document
---
site/content/docs/5.1/helpers/clearfix.md | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/site/content/docs/5.1/helpers/clearfix.md b/site/content/docs/5.1/helpers/clearfix.md
index f1329d5b42..4b0bf2f450 100644
--- a/site/content/docs/5.1/helpers/clearfix.md
+++ b/site/content/docs/5.1/helpers/clearfix.md
@@ -6,7 +6,7 @@ group: helpers
aliases: "/docs/5.1/helpers/"
---
-Easily clear `float`s by adding `.clearfix` **to the parent element**. Can also be used as a mixin.
+Easily clear `float`s by adding `.clearfix` **to the parent element**. It can also be used as a mixin.
Use in HTML:
@@ -26,7 +26,7 @@ Use the mixin in SCSS:
}
```
-The following example shows how the clearfix can be used. Without the clearfix the wrapping div would not span around the buttons which would cause a broken layout.
+The following example shows how the clearfix can be used. Without the clearfix, the wrapping div would not span around the buttons, which would cause a broken layout.
{{< example >}}
<div class="bg-info clearfix">
--
GitLab
From fddc6e5a20f36cf4afbe511b3a520b59d3eaa921 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?=
<20430676+supermavster@users.noreply.github.com>
Date: Mon, 9 May 2022 22:34:02 -0500
Subject: [PATCH 38/53] Update position.md
General structure for a specific sentence of the document
---
site/content/docs/5.1/helpers/position.md | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/site/content/docs/5.1/helpers/position.md b/site/content/docs/5.1/helpers/position.md
index b4e1f71f95..1301c39cf2 100644
--- a/site/content/docs/5.1/helpers/position.md
+++ b/site/content/docs/5.1/helpers/position.md
@@ -8,7 +8,7 @@ toc: true
## Fixed top
-Position an element at the top of the viewport, from edge to edge. Be sure you understand the ramifications of fixed position in your project; you may need to add additional CSS.
+Position an element at the top of the viewport, from edge to edge. Be sure you understand the ramifications of a fixed position in your project; you may need to add additional CSS.
```html
<div class="fixed-top">...</div>
@@ -16,7 +16,7 @@ Position an element at the top of the viewport, from edge to edge. Be sure you u
## Fixed bottom
-Position an element at the bottom of the viewport, from edge to edge. Be sure you understand the ramifications of fixed position in your project; you may need to add additional CSS.
+Position an element at the bottom of the viewport, from edge to edge. Be sure you understand the ramifications of a fixed position in your project; you may need to add additional CSS.
```html
<div class="fixed-bottom">...</div>
--
GitLab
From 20b2975f0dc88907155a65be4d67f7764df2a6ef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?=
<20430676+supermavster@users.noreply.github.com>
Date: Mon, 9 May 2022 22:34:53 -0500
Subject: [PATCH 39/53] Update utilities.md
General structure for a specific sentence of the document
---
site/content/docs/5.1/layout/utilities.md | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/site/content/docs/5.1/layout/utilities.md b/site/content/docs/5.1/layout/utilities.md
index 009d2416d1..d4fd5e90d2 100644
--- a/site/content/docs/5.1/layout/utilities.md
+++ b/site/content/docs/5.1/layout/utilities.md
@@ -1,7 +1,7 @@
---
layout: docs
title: Utilities for layout
-description: For faster mobile-friendly and responsive development, Bootstrap includes dozens of utility classes for showing, hiding, aligning, and spacing content.
+description: For faster, mobile-friendly, and responsive development, Bootstrap includes dozens of utility classes for showing, hiding, aligning, and spacing content.
group: layout
toc: true
---
@@ -22,4 +22,4 @@ Use the `margin` and `padding` [spacing utilities]({{< docsref "/utilities/spaci
## Toggle `visibility`
-When toggling `display` isn't needed, you can toggle the `visibility` of an element with our [visibility utilities]({{< docsref "/utilities/visibility" >}}). Invisible elements will still affect the layout of the page, but are visually hidden from visitors.
+When toggling `display` isn't needed, you can toggle the `visibility` of an element with our [visibility utilities]({{< docsref "/utilities/visibility" >}}). Invisible elements will still affect the page's layout but are visually hidden from visitors.
--
GitLab
From 7a6035747f34491891be37b05dea1fbdae5def45 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?=
<20430676+supermavster@users.noreply.github.com>
Date: Mon, 9 May 2022 22:36:10 -0500
Subject: [PATCH 40/53] Update colors.md
General structure for a specific sentence of the document
---
site/content/docs/5.1/utilities/colors.md | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/site/content/docs/5.1/utilities/colors.md b/site/content/docs/5.1/utilities/colors.md
index eb917f91c2..352d32ef9f 100644
--- a/site/content/docs/5.1/utilities/colors.md
+++ b/site/content/docs/5.1/utilities/colors.md
@@ -48,11 +48,11 @@ Consider our default `.text-primary` utility.
}
```
-We use an RGB version of our `--bs-primary` (with the value of `13, 110, 253`) CSS variable and attached a second CSS variable, `--bs-text-opacity`, for the alpha transparency (with a default value `1` thanks to a local CSS variable). That means anytime you use `.text-primary` now, your computed `color` value is `rgba(13, 110, 253, 1)`. The local CSS variable inside each `.text-*` class avoids inheritance issues so nested instances of the utilities don't automatically have a modified alpha transparency.
+We used an RGB version of our `--bs-primary` (with the value of `13, 110, 253`) CSS variable and attached a second CSS variable, `--bs-text-opacity`, for the alpha transparency (with a default value `1` thanks to a local CSS variable). That means anytime you use `.text-primary` now, your computed `color` value is `rgba(13, 110, 253, 1)`. The local CSS variable inside each `.text-*` class avoids inheritance issues, so nested instances of the utilities don't automatically have modified alpha transparency.
### Example
-To change that opacity, override `--bs-text-opacity` via custom styles or inline styles.
+To change that opacity, override `--bs-text-opacity` via custom or inline styles.
{{< example >}}
<div class="text-primary">This is default primary text</div>
@@ -78,7 +78,7 @@ In addition to the following Sass functionality, consider reading about our incl
### Variables
-Most `color` utilities are generated by our theme colors, reassigned from our generic color palette variables.
+Most `color` utilities are generated by our theme colors, reassigned from generic color palette variables.
{{< scss-docs name="color-variables" file="scss/_variables.scss" >}}
@@ -90,7 +90,7 @@ Grayscale colors are also available, but only a subset are used to generate any
### Map
-Theme colors are then put into a Sass map so we can loop over them to generate our utilities, component modifiers, and more.
+These theme colors are then put into a Sass map so we can loop over them to generate our utilities, component modifiers, and more.
{{< scss-docs name="theme-colors-map" file="scss/_variables.scss" >}}
--
GitLab
From 19048a08c257dfa5d553bc58e653a2e85b450a78 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?=
<20430676+supermavster@users.noreply.github.com>
Date: Mon, 9 May 2022 22:37:11 -0500
Subject: [PATCH 41/53] Update sizing.md
General structure for a specific sentence of the document and markdown structure MD033
---
site/content/docs/5.1/utilities/sizing.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/site/content/docs/5.1/utilities/sizing.md b/site/content/docs/5.1/utilities/sizing.md
index 962575ffe3..726dcdbfc5 100644
--- a/site/content/docs/5.1/utilities/sizing.md
+++ b/site/content/docs/5.1/utilities/sizing.md
@@ -1,7 +1,7 @@
---
layout: docs
title: Sizing
-description: Easily make an element as wide or as tall with our width and height utilities.
+description: Easily make an element as broad or tall with our width and height utilities.
group: utilities
toc: true
---
--
GitLab
From b1c9c5f592261d460615ef8dd18e83429ecd4c5e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?=
<20430676+supermavster@users.noreply.github.com>
Date: Mon, 9 May 2022 22:39:42 -0500
Subject: [PATCH 42/53] Update alerts.md
General structure for a specific sentence of the document and markdown structure MD033
---
site/content/docs/5.1/components/alerts.md | 30 +++++++++++-----------
1 file changed, 15 insertions(+), 15 deletions(-)
diff --git a/site/content/docs/5.1/components/alerts.md b/site/content/docs/5.1/components/alerts.md
index 59f9a349f8..3c60cee9d3 100644
--- a/site/content/docs/5.1/components/alerts.md
+++ b/site/content/docs/5.1/components/alerts.md
@@ -1,14 +1,14 @@
---
layout: docs
title: Alerts
-description: Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
+description: Provide contextual feedback messages for typical user actions with a handful of available and flexible alert messages.
group: components
toc: true
---
## Examples
-Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight **required** contextual classes (e.g., `.alert-success`). For inline dismissal, use the [alerts JavaScript plugin](#dismissing).
+Alerts are available for any text length and an optional close button. For proper styling, use one of the eight **required** contextual classes (e.g., `.alert-success`). For inline dismissal, use the [alerts JavaScript plugin](#dismissing).
{{< example >}}
{{< alerts.inline >}}
@@ -59,7 +59,7 @@ if (alertTrigger) {
### Link color
-Use the `.alert-link` utility class to quickly provide matching colored links within any alert.
+Use the `.alert-link` utility class to provide matching colored links within any alert quickly.
{{< example >}}
{{< alerts.inline >}}
@@ -72,7 +72,7 @@ Use the `.alert-link` utility class to quickly provide matching colored links wi
### Additional content
-Alerts can also contain additional HTML elements like headings, paragraphs and dividers.
+Alerts can also contain additional HTML elements like headings, paragraphs, and dividers.
{{< example >}}
<div class="alert alert-success" role="alert">
@@ -98,7 +98,7 @@ Similarly, you can use [flexbox utilities]({{< docsref "/utilities/flex" >}}) an
</div>
{{< /example >}}
-Need more than one icon for your alerts? Consider using more Bootstrap Icons and making a local SVG sprite like so to easily reference the same icons repeatedly.
+Need more than one icon for your alerts? Consider using more Bootstrap Icons and making a local SVG sprite to reference the same icons quickly.
{{< example >}}
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
@@ -143,10 +143,10 @@ Need more than one icon for your alerts? Consider using more Bootstrap Icons and
Using the alert JavaScript plugin, it's possible to dismiss any alert inline. Here's how:
-- Be sure you've loaded the alert plugin, or the compiled Bootstrap JavaScript.
+- Be sure you've loaded the alert plugin or the compiled Bootstrap JavaScript.
- Add a [close button]({{< docsref "/components/close-button" >}}) and the `.alert-dismissible` class, which adds extra padding to the right of the alert and positions the close button.
-- On the close button, add the `data-bs-dismiss="alert"` attribute, which triggers the JavaScript functionality. Be sure to use the `<button>` element with it for proper behavior across all devices.
-- To animate alerts when dismissing them, be sure to add the `.fade` and `.show` classes.
+- On the close button, add the `data-bs-dismiss="alert"` attribute, which triggers the JavaScript functionality. Be sure to use the `<button>` element for proper behavior across all devices.
+- To animate alerts when dismissing them, add the `.fade` and `.show` classes.
You can see this in action with a live demo:
@@ -158,7 +158,7 @@ You can see this in action with a live demo:
{{< /example >}}
{{< callout warning >}}
-When an alert is dismissed, the element is completely removed from the page structure. If a keyboard user dismisses the alert using the close button, their focus will suddenly be lost and, depending on the browser, reset to the start of the page/document. For this reason, we recommend including additional JavaScript that listens for the `closed.bs.alert` event and programmatically sets `focus()` to the most appropriate location in the page. If you're planning to move focus to a non-interactive element that normally does not receive focus, make sure to add `tabindex="-1"` to the element.
+The element is completely removed from the page structure when an alert is dismissed. If a keyboard user dismisses the alert using the close button, their focus will suddenly be lost and, depending on the browser, reset to the start of the page/document. For this reason, we recommend including additional JavaScript that listens for the `closed.bs.alert` event and programmatically sets `focus()` to the most appropriate location on the page. If you're planning to move focus to a non-interactive element that usually does not receive focus, add `tabindex="-1"` to the element.
{{< /callout >}}
## CSS
@@ -167,7 +167,7 @@ When an alert is dismissed, the element is completely removed from the page stru
{{< added-in "5.2.0" >}}
-As part of Bootstrap's evolving CSS variables approach, alerts now use local CSS variables on `.alert` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+As part of Bootstrap's evolving CSS variables approach, alerts now use local CSS variables on `.alert` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is also supported.
{{< scss-docs name="alert-css-vars" file="scss/_alert.scss" >}}
@@ -183,7 +183,7 @@ Used in combination with `$theme-colors` to create contextual modifier classes f
### Sass loop
-Loop that generates the modifier classes with the `alert-variant()` mixin.
+The loop generates the modifier classes with the `alert-variant()` mixin.
{{< scss-docs name="alert-modifiers" file="scss/_alert.scss" >}}
@@ -199,7 +199,7 @@ const alerts = [...alertList].map(element => new bootstrap.Alert(element))
```
{{< callout info >}}
-For the sole purpose of dismissing an alert, it isn't necessary to initialize the component manually via the JS API. By making use of `data-bs-dismiss="alert"`, the component will be initialized automatically and properly dismissed.
+For the sole purpose of dismissing an alert, it isn't necessary to initialize the component manually via the JS API. By making use of `data-bs-dismiss="alert"`, the component will be initialized automatically and adequately dismissed.
See the [triggers](#triggers) section for more details.
{{< /callout >}}
@@ -218,15 +218,15 @@ You can create an alert instance with the alert constructor, for example:
const bsAlert = new bootstrap.Alert('#myAlert')
```
-This makes an alert listen for click events on descendant elements which have the `data-bs-dismiss="alert"` attribute. (Not necessary when using the data-api’s auto-initialization.)
+This makes an alert listen for click events on descendant elements, which have the `data-bs-dismiss="alert"` attribute. (Not necessary when using the data-api’s auto-initialization.)
{{< bs-table >}}
| Method | Description |
| --- | --- |
| `close` | Closes an alert by removing it from the DOM. If the `.fade` and `.show` classes are present on the element, the alert will fade out before it is removed. |
| `dispose` | Destroys an element's alert. (Removes stored data on the DOM element) |
-| `getInstance` | Static method which allows you to get the alert instance associated to a DOM element. For example: `bootstrap.Alert.getInstance(alert)`. |
-| `getOrCreateInstance` | Static method which returns an alert instance associated to a DOM element or create a new one in case it wasn't initialized. You can use it like this: `bootstrap.Alert.getOrCreateInstance(element)`. |
+| `getInstance` | Static method allows you to get the alert instance associated with a DOM element. For example: `bootstrap.Alert.getInstance(alert)`. |
+| `getOrCreateInstance` | Static method returns an alert instance associated with a DOM element or creates a new one in case it wasn't initialized. You can use it like this: `bootstrap.Alert.getOrCreateInstance(element)`. |
{{< /bs-table >}}
Basic usage:
--
GitLab
From 6e2610d4f87289a7d6c4120c7e6389b3068e43ff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?=
<20430676+supermavster@users.noreply.github.com>
Date: Mon, 9 May 2022 22:41:55 -0500
Subject: [PATCH 43/53] Update navbar.md
General structure for a specific sentence of the document and markdown structure MD033
---
site/content/docs/5.1/components/navbar.md | 36 +++++++++++-----------
1 file changed, 18 insertions(+), 18 deletions(-)
diff --git a/site/content/docs/5.1/components/navbar.md b/site/content/docs/5.1/components/navbar.md
index 392531160d..e92ade767c 100644
--- a/site/content/docs/5.1/components/navbar.md
+++ b/site/content/docs/5.1/components/navbar.md
@@ -11,12 +11,12 @@ toc: true
Here's what you need to know before getting started with the navbar:
- Navbars require a wrapping `.navbar` with `.navbar-expand{-sm|-md|-lg|-xl|-xxl}` for responsive collapsing and [color scheme](#color-schemes) classes.
-- Navbars and their contents are fluid by default. Change the [container](#containers) to limit their horizontal width in different ways.
+- Navbars and their contents are fluid by default. Change the [container](#containers) to limit their horizontal width differently.
- Use our [spacing]({{< docsref "/utilities/spacing" >}}) and [flex]({{< docsref "/utilities/flex" >}}) utility classes for controlling spacing and alignment within navbars.
- Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin.
- Ensure accessibility by using a `<nav>` element or, if using a more generic element such as a `<div>`, add a `role="navigation"` to every navbar to explicitly identify it as a landmark region for users of assistive technologies.
- Indicate the current item by using `aria-current="page"` for the current page or `aria-current="true"` for the current item in a set.
-- **New in v5.2.0:** Navbars can be themed with CSS variables that are scoped to the `.navbar` base class. `.navbar-light` has been deprecated and `.navbar-dark` has been rewritten to override CSS variables instead of adding additional styles.
+- **New in v5.2.0:** Navbars can be themed with CSS variables scoped to the `.navbar` base class. `.navbar-light` has been deprecated, and `.navbar-dark` has been rewritten to override CSS variables instead of adding additional styles.
{{< callout info >}}
{{< partial "callout-info-prefersreducedmotion.md" >}}
@@ -79,7 +79,7 @@ This example uses [background]({{< docsref "/utilities/background" >}}) (`bg-lig
### Brand
-The `.navbar-brand` can be applied to most elements, but an anchor works best, as some elements might require utility classes or custom styles.
+The `.navbar-brand` can be applied to most elements, but an anchor works best, as some might require utility classes or custom styles.
#### Text
@@ -117,7 +117,7 @@ You can replace the text within the `.navbar-brand` with an `<img>`.
#### Image and text
-You can also make use of some additional utilities to add an image and text at the same time. Note the addition of `.d-inline-block` and `.align-text-top` on the `<img>`.
+You can also use some additional utilities to add an image and text at the same time. Note the addition of `.d-inline-block` and `.align-text-top` on the `<img>`.
{{< example >}}
<nav class="navbar bg-light">
@@ -132,11 +132,11 @@ You can also make use of some additional utilities to add an image and text at t
### Nav
-Navbar navigation links build on our `.nav` options with their own modifier class and require the use of [toggler classes](#toggler) for proper responsive styling. **Navigation in navbars will also grow to occupy as much horizontal space as possible** to keep your navbar contents securely aligned.
+Navbar navigation links build on our `.nav` options with their modifier class and require the use of [toggler classes](#toggler) for proper responsive styling. **Navigation in navbars will also grow to occupy as much horizontal space as possible** to align your navbar contents securely.
Add the `.active` class on `.nav-link` to indicate the current page.
-Please note that you should also add the `aria-current` attribute on the active `.nav-link`.
+You should also add the `aria-current` attribute on the active `.nav-link`.
{{< example >}}
<nav class="navbar navbar-expand-lg bg-light">
@@ -186,7 +186,7 @@ And because we use classes for our navs, you can avoid the list-based approach e
</nav>
{{< /example >}}
-You can also use dropdowns in your navbar. Dropdown menus require a wrapping element for positioning, so be sure to use separate and nested elements for `.nav-item` and `.nav-link` as shown below.
+You can also use dropdowns in your navbar. Dropdown menus require a wrapping element for positioning, so use separate and nested elements for `.nav-item` and `.nav-link` as shown below.
{{< example >}}
<nav class="navbar navbar-expand-lg bg-light">
@@ -324,7 +324,7 @@ Mix and match with other components and utilities as needed.
**New in v5.2.0:** Navbar theming is now powered by CSS variables and `.navbar-light` has been deprecated. CSS variables are applied to `.navbar`, defaulting to the "light" appearance, and can be overridden with `.navbar-dark`.
{{< /callout >}}
-Navbar themes are easier than ever thanks to Bootstrap's combination of Sass and CSS variables. The default is our "light navbar" for use with light background colors, but you can also apply `.navbar-dark` for dark background colors. Then, customize with `.bg-*` utilities.
+Navbar themes are more accessible than ever thanks to Bootstrap's combination of Sass and CSS variables. The default is our "light navbar" for use with light background colors, but you can also apply `.navbar-dark` for dark background colors. Then, customize with `.bg-*` utilities.
<div class="bd-example">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
@@ -443,7 +443,7 @@ Although it's not required, you can wrap a navbar in a `.container` to center it
</div>
{{< /example >}}
-Use any of the responsive containers to change how wide the content in your navbar is presented.
+Use any responsive containers to change how wide the content in your navbar is presented.
{{< example >}}
<nav class="navbar navbar-expand-lg bg-light">
@@ -501,7 +501,7 @@ Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow
## Scrolling
-Add `.navbar-nav-scroll` to a `.navbar-nav` (or other navbar sub-component) to enable vertical scrolling within the toggleable contents of a collapsed navbar. By default, scrolling kicks in at `75vh` (or 75% of the viewport height), but you can override that with the local CSS custom property `--bs-navbar-height` or custom styles. At larger viewports when the navbar is expanded, content will appear as it does in a default navbar.
+Add `.navbar-nav-scroll` to a `.navbar-nav` (or other navbar sub-component) to enable vertical scrolling within the toggleable contents of a collapsed navbar. By default, scrolling kicks in at `75vh` (or 75% of the viewport height), but you can override that with the local CSS custom property `--bs-navbar-height` or custom styles. When the navbar is expanded at larger viewports, the content will appear as it does in a default navbar.
Please note that this behavior comes with a potential drawback of `overflow`—when setting `overflow-y: auto` (required to scroll the content here), `overflow-x` is the equivalent of `auto`, which will crop some horizontal content.
@@ -548,13 +548,13 @@ Here's an example navbar using `.navbar-nav-scroll` with `style="--bs-scroll-hei
## Responsive behaviors
-Navbars can use `.navbar-toggler`, `.navbar-collapse`, and `.navbar-expand{-sm|-md|-lg|-xl|-xxl}` classes to determine when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.
+Navbars can use `.navbar-toggler`, `.navbar-collapse`, and `.navbar-expand{-sm|-md|-lg|-xl|-xxl}` classes to determine when their content collapses behind a button. You can easily choose when to show or hide particular elements in combination with other utilities.
For navbars that never collapse, add the `.navbar-expand` class on the navbar. For navbars that always collapse, don't add any `.navbar-expand` class.
### Toggler
-Navbar togglers are left-aligned by default, but should they follow a sibling element like a `.navbar-brand`, they'll automatically be aligned to the far right. Reversing your markup will reverse the placement of the toggler. Below are examples of different toggle styles.
+Navbar toggles are left-aligned by default, but they'll automatically be aligned to the far right if they follow a sibling element like a `.navbar-brand`. Reversing your markup will reverse the placement of the toggler. Below are examples of different toggle styles.
With no `.navbar-brand` shown at the smallest breakpoint:
@@ -648,7 +648,7 @@ With a toggler on the left and brand name on the right:
### External content
-Sometimes you want to use the collapse plugin to trigger a container element for content that structurally sits outside of the `.navbar` . Because our plugin works on the `id` and `data-bs-target` matching, that's easily done!
+Sometimes you want to use the collapse plugin to trigger a container element for content that structurally sits outside of the `.navbar` . Because our plugin works on the `id` and `data-bs-target` matching, that's quickly done!
{{< example >}}
<div class="collapse" id="navbarToggleExternalContent">
@@ -666,13 +666,13 @@ Sometimes you want to use the collapse plugin to trigger a container element for
</nav>
{{< /example >}}
-When you do this, we recommend including additional JavaScript to move the focus programmatically to the container when it is opened. Otherwise, keyboard users and users of assistive technologies will likely have a hard time finding the newly revealed content - particularly if the container that was opened comes *before* the toggler in the document's structure. We also recommend making sure that the toggler has the `aria-controls` attribute, pointing to the `id` of the content container. In theory, this allows assistive technology users to jump directly from the toggler to the container it controls–but support for this is currently quite patchy.
+When you do this, we recommend including additional JavaScript to move the focus programmatically to the container when it is opened. Otherwise, keyboard users and users of assistive technologies will likely have a hard time finding the newly revealed content - particularly if the opened container comes *before* the toggler in the document's structure. We also recommend ensuring that the toggler has the `aria-controls` attribute, pointing to the `id` of the content container. In theory, this allows assistive technology users to jump directly from the toggler to the container it controls–but support for this is currently quite patchy.
### Offcanvas
-Transform your expanding and collapsing navbar into an offcanvas drawer with the offcanvas plugin. We extend both the offcanvas default styles and use our `.navbar-expand-*` classes to create a dynamic and flexible navigation sidebar.
+With the off-canvas plugin, transform your expanding and collapsing navbar into an off-canvas drawer. We extend both the off-canvas default styles and use our `.navbar-expand-*` classes to create a dynamic and flexible navigation sidebar.
-In the example below, to create an offcanvas navbar that is always collapsed across all breakpoints, omit the `.navbar-expand-*` class entirely.
+In the example below, to create an off-canvas navbar that is always collapsed across all breakpoints, omit the `.navbar-expand-*` class entirely.
{{< example >}}
<nav class="navbar bg-light fixed-top">
@@ -718,7 +718,7 @@ In the example below, to create an offcanvas navbar that is always collapsed acr
</nav>
{{< /example >}}
-To create an offcanvas navbar that expands into a normal navbar at a specific breakpoint like `lg`, use `.navbar-expand-lg`.
+To create an off-canvas navbar that expands into a normal navbar at a specific breakpoint like `lg`, use `.navbar-expand-lg`.
```html
<nav class="navbar navbar-expand-lg bg-light fixed-top">
@@ -738,7 +738,7 @@ To create an offcanvas navbar that expands into a normal navbar at a specific br
{{< added-in "5.2.0" >}}
-As part of Bootstrap's evolving CSS variables approach, navbars now use local CSS variables on `.navbar` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+As part of Bootstrap's evolving CSS variables approach, navbars now use local CSS variables on `.navbar` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is also supported.
{{< scss-docs name="navbar-css-vars" file="scss/_navbar.scss" >}}
--
GitLab
From 2780124b09113ce2f4769bcaf5590ffd26f32855 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?=
<20430676+supermavster@users.noreply.github.com>
Date: Mon, 9 May 2022 22:43:42 -0500
Subject: [PATCH 44/53] Update toasts.md
General structure for a specific sentence of the document and markdown structure MD033
---
site/content/docs/5.1/components/toasts.md | 22 +++++++++++-----------
1 file changed, 11 insertions(+), 11 deletions(-)
diff --git a/site/content/docs/5.1/components/toasts.md b/site/content/docs/5.1/components/toasts.md
index 46f241cb3b..673458ce87 100644
--- a/site/content/docs/5.1/components/toasts.md
+++ b/site/content/docs/5.1/components/toasts.md
@@ -6,7 +6,7 @@ group: components
toc: true
---
-Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. They're built with flexbox, so they're easy to align and position.
+Toasts are lightweight notifications designed to mimic the push notifications that mobile and desktop operating systems have popularized. They're built with flexbox, so they're easy to align and position.
## Overview
@@ -23,7 +23,7 @@ Things to know when using the toast plugin:
### Basic
-To encourage extensible and predictable toasts, we recommend a header and body. Toast headers use `display: flex`, allowing easy alignment of content thanks to our margin and flexbox utilities.
+To encourage extensible and predictable toasts, we recommend a header and body. Toast headers use `display: flex`, allowing easy content alignment thanks to our margin and flexbox utilities.
Toasts are as flexible as you need and have very little required markup. At a minimum, we require a single element to contain your "toasted" content and strongly encourage a dismiss button.
@@ -42,7 +42,7 @@ Toasts are as flexible as you need and have very little required markup. At a mi
{{< /example >}}
{{< callout warning >}}
-Previously, our scripts dynamically added the `.hide` class to completely hide a toast (with `display:none`, rather than just with `opacity:0`). This is now not necessary anymore. However, for backwards compatibility, our script will continue to toggle the class (even though there is no practical need for it) until the next major version.
+Previously, our scripts dynamically added the `.hide` class to completely hide a toast (with `display:none`, rather than just with `opacity:0`). This is now not necessary anymore. However, for backward compatibility, our script will continue to toggle the class (even though there is no practical need for it) until the next major version.
{{< /callout >}}
### Live example
@@ -119,7 +119,7 @@ Toasts are slightly translucent to blend in with what's below them.
### Stacking
-You can stack toasts by wrapping them in a toast container, which will vertically add some spacing.
+You can stack toasts by wrapping them in a toast container, vertically adding some spacing.
{{< example class="bg-light" >}}
<div class="toast-container position-static">
@@ -195,7 +195,7 @@ Building on the above example, you can create different toast color schemes with
## Placement
-Place toasts with custom CSS as you need them. The top right is often used for notifications, as is the top middle. If you're only ever going to show one toast at a time, put the positioning styles right on the `.toast`.
+Place toasts with custom CSS as you need them. The top right is often used for notifications, as is the top middle. If you're only ever going to show one toast at a time, but the positioning styles right on the `.toast`.
{{< example >}}
<form>
@@ -269,7 +269,7 @@ For systems that generate more notifications, consider using a wrapping element
</div>
{{< /example >}}
-You can also get fancy with flexbox utilities to align toasts horizontally and/or vertically.
+You can also get fancy with flexbox utilities to align toasts horizontally or vertically.
{{< example class="bg-dark bd-example-toasts d-flex" >}}
<!-- Flexbox container for aligning the toasts -->
@@ -292,13 +292,13 @@ You can also get fancy with flexbox utilities to align toasts horizontally and/o
## Accessibility
-Toasts are intended to be small interruptions to your visitors or users, so to help those with screen readers and similar assistive technologies, you should wrap your toasts in an [`aria-live` region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions). Changes to live regions (such as injecting/updating a toast component) are automatically announced by screen readers without needing to move the user's focus or otherwise interrupt the user. Additionally, include `aria-atomic="true"` to ensure that the entire toast is always announced as a single (atomic) unit, rather than just announcing what was changed (which could lead to problems if you only update part of the toast's content, or if displaying the same toast content at a later point in time). If the information needed is important for the process, e.g. for a list of errors in a form, then use the [alert component]({{< docsref "/components/alerts" >}}) instead of toast.
+Toasts are intended to be minor interruptions to your visitors or users. To help those with screen readers and similar assistive technologies, you should wrap your toasts in an [`aria-live` region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions). Changes to live regions (such as injecting/updating a toast component) are automatically announced by screen readers without needing to move the user's focus or otherwise interrupt the user. Additionally, include `aria-atomic="true"` to ensure that the entire toast is always announced as a single (atomic) unit, rather than just announcing what was changed (which could lead to problems if you only update part of the toast's content, or if displaying the same toast content at a later point in time). If the information needed is vital for the process, e.g., for a list of errors in a form, then use the [alert component]({{< docsref "/components/alerts" >}}) instead of toast.
-Note that the live region needs to be present in the markup *before* the toast is generated or updated. If you dynamically generate both at the same time and inject them into the page, they will generally not be announced by assistive technologies.
+Note that the live region must be present in the markup *before* the toast is generated or updated. If you dynamically generate both simultaneously and inject them into the page, they will generally not be announced by assistive technologies.
You also need to adapt the `role` and `aria-live` level depending on the content. If it's an important message like an error, use `role="alert" aria-live="assertive"`, otherwise use `role="status" aria-live="polite"` attributes.
-As the content you're displaying changes, be sure to update the [`delay` timeout](#options) so that users have enough time to read the toast.
+As the content you're displaying changes, update the [`delay` timeout](#options) so that users have enough time to read the toast.
```html
<div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-bs-delay="10000">
@@ -322,7 +322,7 @@ When using `autohide: false`, you must add a close button to allow users to dism
</div>
{{< /example >}}
-While technically it's possible to add focusable/actionable controls (such as additional buttons or links) in your toast, you should avoid doing this for autohiding toasts. Even if you give the toast a long [`delay` timeout](#options), keyboard and assistive technology users may find it difficult to reach the toast in time to take action (since toasts don't receive focus when they are displayed). If you absolutely must have further controls, we recommend using a toast with `autohide: false`.
+While technically it's possible to add focusable/actionable controls (such as adding buttons or links) in your toast, you should avoid doing this for autohiding toasts. Even if you give the toast a long [`delay` timeout](#options), keyboard and assistive technology users may find it difficult to reach the toast in time to take action (since toasts don't receive focus when they are displayed). If you absolutely must have further controls, we recommend using a toast with `autohide: false`.
## CSS
@@ -330,7 +330,7 @@ While technically it's possible to add focusable/actionable controls (such as ad
{{< added-in "5.2.0" >}}
-As part of Bootstrap's evolving CSS variables approach, toasts now use local CSS variables on `.toast` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+As part of Bootstrap's evolving CSS variables approach, toasts now use local CSS variables on `.toast` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is also supported.
{{< scss-docs name="toast-css-vars" file="scss/_toasts.scss" >}}
--
GitLab
From c89cfd82c4a8a2f293176e68e12e5f45b3f4c442 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?=
<20430676+supermavster@users.noreply.github.com>
Date: Mon, 9 May 2022 22:44:55 -0500
Subject: [PATCH 45/53] Update options.md
General structure for a specific sentence of the document
---
site/content/docs/5.1/customize/options.md | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/site/content/docs/5.1/customize/options.md b/site/content/docs/5.1/customize/options.md
index 5013fb9b31..c5e4f6fb25 100644
--- a/site/content/docs/5.1/customize/options.md
+++ b/site/content/docs/5.1/customize/options.md
@@ -1,11 +1,11 @@
---
layout: docs
title: Options
-description: Quickly customize Bootstrap with built-in variables to easily toggle global CSS preferences for controlling style and behavior.
+description: Quickly customize Bootstrap with built-in variables to easily toggle global CSS preferences to control style and behavior.
group: customize
---
-Customize Bootstrap with our built-in custom variables file and easily toggle global CSS preferences with new `$enable-*` Sass variables. Override a variable's value and recompile with `npm run test` as needed.
+Customize Bootstrap with our built-in custom variables file and easily toggle global CSS preferences with new `$enable-*` Sass variables. Override a variable's value and recompile with `npm run test`.
You can find and customize these variables for key global options in Bootstrap's `scss/_variables.scss` file.
--
GitLab
From 10c9a8146711b10909258e09ed424d9da4088496 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?=
<20430676+supermavster@users.noreply.github.com>
Date: Mon, 9 May 2022 22:46:03 -0500
Subject: [PATCH 46/53] Update input-group.md
General structure for a specific sentence of the document
---
site/content/docs/5.1/forms/input-group.md | 12 ++++++------
1 file changed, 6 insertions(+), 6 deletions(-)
diff --git a/site/content/docs/5.1/forms/input-group.md b/site/content/docs/5.1/forms/input-group.md
index 00e9eeec9a..cfdc8965d8 100644
--- a/site/content/docs/5.1/forms/input-group.md
+++ b/site/content/docs/5.1/forms/input-group.md
@@ -1,7 +1,7 @@
---
layout: docs
title: Input group
-description: Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.
+description: Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and file inputs.
group: forms
toc: true
---
@@ -47,7 +47,7 @@ Place one add-on or button on either side of an input. You may also place one on
## Wrapping
-Input groups wrap by default via `flex-wrap: wrap` in order to accommodate custom form field validation within an input group. You may disable this with `.flex-nowrap`.
+Input groups wrap by default via `flex-wrap: wrap` to accommodate custom form field validation within an input group. You may disable this with `.flex-nowrap`.
{{< example >}}
<div class="input-group flex-nowrap">
@@ -58,7 +58,7 @@ Input groups wrap by default via `flex-wrap: wrap` in order to accommodate custo
## Sizing
-Add the relative form sizing classes to the `.input-group` itself and contents within will automatically resize—no need for repeating the form control size classes on each element.
+Add the relative form sizing classes to the `.input-group` itself, and the contents within will automatically resize—no need for repeating the form control size classes on each element.
**Sizing on the individual input group elements isn't supported.**
@@ -81,7 +81,7 @@ Add the relative form sizing classes to the `.input-group` itself and contents w
## Checkboxes and radios
-Place any checkbox or radio option within an input group's addon instead of text. We recommend adding `.mt-0` to the `.form-check-input` when there's no visible text next to the input.
+Place any checkbox or radio option within an input group's add-on instead of text. We recommend adding `.mt-0` to the `.form-check-input` when there's no visible text next to the input.
{{< example >}}
<div class="input-group mb-3">
@@ -111,7 +111,7 @@ While multiple `<input>`s are supported visually, validation styles are only ava
</div>
{{< /example >}}
-## Multiple addons
+## Multiple add-ons
Multiple add-ons are supported and can be mixed with checkbox and radio input versions.
@@ -129,7 +129,7 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve
</div>
{{< /example >}}
-## Button addons
+## Button add-ons
{{< example >}}
<div class="input-group mb-3">
--
GitLab
From f24cc48cb2157f716207c86c034b8bd0a35a5878 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?=
<20430676+supermavster@users.noreply.github.com>
Date: Mon, 9 May 2022 22:47:36 -0500
Subject: [PATCH 47/53] Update containers.md
General structure for a specific sentence of the document and markdown structure MD033
---
site/content/docs/5.1/layout/containers.md | 12 ++++++------
1 file changed, 6 insertions(+), 6 deletions(-)
diff --git a/site/content/docs/5.1/layout/containers.md b/site/content/docs/5.1/layout/containers.md
index 6801aca6ba..295bf80a03 100644
--- a/site/content/docs/5.1/layout/containers.md
+++ b/site/content/docs/5.1/layout/containers.md
@@ -1,14 +1,14 @@
---
layout: docs
title: Containers
-description: Containers are a fundamental building block of Bootstrap that contain, pad, and align your content within a given device or viewport.
+description: Containers are a fundamental building block of Bootstrap that contains, pad, and align your content within a given device or viewport.
group: layout
toc: true
---
## How they work
-Containers are the most basic layout element in Bootstrap and are **required when using our default grid system**. Containers are used to contain, pad, and (sometimes) center the content within them. While containers *can* be nested, most layouts do not require a nested container.
+Containers are Bootstrap's most basic layout element and are **required when using our default grid system**. Containers are used to contain, pad, and (sometimes) center the content. While containers *can* be nested, most layouts do not require a nested container.
Bootstrap comes with three different containers:
@@ -44,7 +44,7 @@ Our default `.container` class is a responsive, fixed-width container, meaning i
## Responsive containers
-Responsive containers allow you to specify a class that is 100% wide until the specified breakpoint is reached, after which we apply `max-width`s for each of the higher breakpoints. For example, `.container-sm` is 100% wide to start until the `sm` breakpoint is reached, where it will scale up with `md`, `lg`, `xl`, and `xxl`.
+Responsive containers allow you to specify a class that is 100% wide until the specified breakpoint is reached, after which we apply `max-width's for each of the higher breakpoints. For example,`.container-sm` is 100% wide to start until the `sm` breakpoint is reached, where it will scale up with `md`,`lg`,`xl`, and`xxl`.
```html
<div class="container-sm">100% wide until small breakpoint</div>
@@ -56,7 +56,7 @@ Responsive containers allow you to specify a class that is 100% wide until the s
## Fluid containers
-Use `.container-fluid` for a full width container, spanning the entire width of the viewport.
+Use `.container-fluid` for a full-width container spanning the entire width of the viewport.
```html
<div class="container-fluid">
@@ -70,7 +70,7 @@ As shown above, Bootstrap generates a series of predefined container classes to
{{< scss-docs name="container-max-widths" file="scss/_variables.scss" >}}
-In addition to customizing the Sass, you can also create your own containers with our Sass mixin.
+In addition to customizing the Sass, you can also create your containers with our Sass mixin.
```scss
// Source mixin
@@ -88,4 +88,4 @@ In addition to customizing the Sass, you can also create your own containers wit
}
```
-For more information and examples on how to modify our Sass maps and variables, please refer to [the Sass section of the Grid documentation]({{< docsref "/layout/grid#sass" >}}).
+For more information and examples on how to modify our Sass maps and variables, please refer to [the Sass section of the Grid documentation]({{< docsref "/layout/grid#sass">}}).
--
GitLab
From 436354ddf1df98f65d256629af67141dde434cd0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?=
<20430676+supermavster@users.noreply.github.com>
Date: Mon, 9 May 2022 22:49:03 -0500
Subject: [PATCH 48/53] Update borders.md
General structure for a specific sentence of the document
---
site/content/docs/5.1/utilities/borders.md | 10 +++++-----
1 file changed, 5 insertions(+), 5 deletions(-)
diff --git a/site/content/docs/5.1/utilities/borders.md b/site/content/docs/5.1/utilities/borders.md
index 1df69f3725..577b7f7eba 100644
--- a/site/content/docs/5.1/utilities/borders.md
+++ b/site/content/docs/5.1/utilities/borders.md
@@ -1,7 +1,7 @@
---
layout: docs
title: Borders
-description: Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.
+description: Use border utilities to quickly style an element's border and radius. Great for images, buttons, or any other element.
group: utilities
toc: true
---
@@ -81,11 +81,11 @@ Consider our default `.border-success` utility.
}
```
-We use an RGB version of our `--bs-success` (with the value of `25, 135, 84`) CSS variable and attached a second CSS variable, `--bs-border-opacity`, for the alpha transparency (with a default value `1` thanks to a local CSS variable). That means anytime you use `.border-success` now, your computed `color` value is `rgba(25, 135, 84, 1)`. The local CSS variable inside each `.border-*` class avoids inheritance issues so nested instances of the utilities don't automatically have a modified alpha transparency.
+We used an RGB version of our `--bs-success` (with the value of `25, 135, 84`) CSS variable and attached a second CSS variable, `--bs-border-opacity`, for the alpha transparency (with a default value `1` thanks to a local CSS variable). That means anytime you use `.border-success` now, your computed `color` value is `rgba(25, 135, 84, 1)`. The local CSS variable inside each `.border-*` class avoids inheritance issues, so nested instances of the utilities don't automatically have modified alpha transparency.
### Example
-To change that opacity, override `--bs-border-opacity` via custom styles or inline styles.
+To change that opacity, override `--bs-border-opacity` via custom or inline styles.
{{< example >}}
<div class="border border-success p-2 mb-2">This is default success border</div>
@@ -114,7 +114,7 @@ Or, choose from any of the `.border-opacity` utilities:
## Radius
-Add classes to an element to easily round its corners.
+Add classes to an element to quickly round its corners.
{{< example class="bd-example-rounded-utils" >}}
{{< placeholder width="75" height="75" class="rounded" title="Example rounded image" >}}
@@ -128,7 +128,7 @@ Add classes to an element to easily round its corners.
### Sizes
-Use the scaling classes for larger or smaller rounded corners. Sizes range from `0` to `3`, and can be configured by modifying the utilities API.
+Use the scaling classes for larger or smaller rounded corners. Sizes range from `0` to `3` and can be configured by modifying the utility API.
{{< example class="bd-example-rounded-utils" >}}
{{< placeholder width="75" height="75" class="rounded-0" title="Example non-rounded image" >}}
--
GitLab
From 3b5d358ad4e21d54acb69af3bdbd4cd69b1971b4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?=
<20430676+supermavster@users.noreply.github.com>
Date: Mon, 9 May 2022 22:49:55 -0500
Subject: [PATCH 49/53] Update display.md
General structure for a specific sentence of the document and markdown structure MD033
---
site/content/docs/5.1/utilities/display.md | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/site/content/docs/5.1/utilities/display.md b/site/content/docs/5.1/utilities/display.md
index 65eb333c7b..872ee5528b 100644
--- a/site/content/docs/5.1/utilities/display.md
+++ b/site/content/docs/5.1/utilities/display.md
@@ -1,7 +1,7 @@
---
layout: docs
title: Display property
-description: Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as well as some extras for controlling display when printing.
+description: Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values and some extras for controlling display when printing.
group: utilities
toc: true
---
@@ -12,7 +12,7 @@ Change the value of the [`display` property](https://developer.mozilla.org/en-US
## Notation
-Display utility classes that apply to all [breakpoints]({{< docsref "/layout/breakpoints" >}}), from `xs` to `xxl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0;` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
+Display utility classes that apply to all [breakpoints]({{< docsref "/layout/breakpoints" >}}), from `xs` to `xxl`, have no breakpoint abbreviation in them. These classes are applied from `min-width: 0;` and up and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
As such, the classes are named using the format:
@@ -50,7 +50,7 @@ The media queries affect screen widths with the given breakpoint *or larger*. Fo
## Hiding elements
-For faster mobile-friendly development, use responsive display classes for showing and hiding elements by device. Avoid creating entirely different versions of the same site, instead hide elements responsively for each screen size.
+For faster mobile-friendly development, use responsive display classes for showing and hiding elements by the device. Avoid creating entirely different versions of the same site; instead, hide elements responsively for each screen size.
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.
--
GitLab
From 679bb0117fdc53112cb61c6aa6e974b882b3cff5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?=
<20430676+supermavster@users.noreply.github.com>
Date: Mon, 9 May 2022 22:50:52 -0500
Subject: [PATCH 50/53] Update opacity.md
General structure for a specific sentence of the document
---
site/content/docs/5.1/utilities/opacity.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/site/content/docs/5.1/utilities/opacity.md b/site/content/docs/5.1/utilities/opacity.md
index 5cc4c225fa..9ea285b8cb 100644
--- a/site/content/docs/5.1/utilities/opacity.md
+++ b/site/content/docs/5.1/utilities/opacity.md
@@ -6,7 +6,7 @@ group: utilities
added: "5.1"
---
-The `opacity` property sets the opacity level for an element. The opacity level describes the transparency level, where `1` is not transparent at all, `.5` is 50% visible, and `0` is completely transparent.
+The `opacity` property sets the opacity level for an element. The opacity level describes the transparency level, where `1` is not transparent, `.5` is 50% visible, and `0` is entirely transparent.
Set the `opacity` of an element using `.opacity-{value}` utilities.
--
GitLab
From b325b39948f9853a2be2949a15bc1b877a83600c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?=
<20430676+supermavster@users.noreply.github.com>
Date: Mon, 9 May 2022 22:58:23 -0500
Subject: [PATCH 51/53] Fix quotes code Markdown
---
site/content/docs/5.1/forms/select.md | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/site/content/docs/5.1/forms/select.md b/site/content/docs/5.1/forms/select.md
index 4c7a441e35..a89dbf4e54 100644
--- a/site/content/docs/5.1/forms/select.md
+++ b/site/content/docs/5.1/forms/select.md
@@ -1,14 +1,14 @@
---
layout: docs
title: Select
-description: Customize the native `<select>'s with custom CSS that changes the element's initial appearance.
+description: Customize the native `<select>`s with custom CSS that changes the element's initial appearance.
group: forms
toc: true
---
## Default
-Custom `<select>` menus need only a custom class, `.form-select` to trigger the custom styles. Custom styles are limited to the `<select>`'s initial appearance and cannot modify the `<option>'s due to browser limitations.
+Custom `<select>` menus need only a custom class, `.form-select` to trigger the custom styles. Custom styles are limited to the `<select>`s initial appearance and cannot modify the `<option>`s due to browser limitations.
{{< example >}}
<select class="form-select" aria-label="Default select example">
--
GitLab
From 7b435a54742747845d28ae78deaa43a43f60046e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?=
<20430676+supermavster@users.noreply.github.com>
Date: Mon, 9 May 2022 22:59:32 -0500
Subject: [PATCH 52/53] Fix Quotes code Layout.md
---
site/content/docs/5.1/forms/layout.md | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/site/content/docs/5.1/forms/layout.md b/site/content/docs/5.1/forms/layout.md
index a8a43f1ef6..05a10a5100 100644
--- a/site/content/docs/5.1/forms/layout.md
+++ b/site/content/docs/5.1/forms/layout.md
@@ -19,7 +19,7 @@ Since Bootstrap applies `display: block` and `width: 100%` to almost all our for
[Margin utilities]({{< docsref "/utilities/spacing" >}}) are the easiest way to add some structure to forms. They provide a basic grouping of labels, controls, optional form text, and form validation messaging. We recommend sticking to `margin-bottom` utilities and using a single direction throughout the form for consistency.
-Feel free to build your forms however you like, with `<fieldset>'s, `<div>'s, or nearly any other element.
+Feel free to build your forms however you like, with `<fieldset>`s, `<div>`s, or nearly any other element.
{{< example >}}
<div class="mb-3">
@@ -113,7 +113,7 @@ More complex layouts can also be created with the grid system.
## Horizontal form
-Create horizontal forms with the grid by adding the `.row` class to form groups and using the `.col-*-*` classes to specify the width of your labels and controls. Be sure to add `.col-form-label` to your `<label>'s so they're vertically centered with their associated form controls.
+Create horizontal forms with the grid by adding the `.row` class to form groups and using the `.col-*-*` classes to specify the width of your labels and controls. Be sure to add `.col-form-label` to your `<label>`s so they're vertically centered with their associated form controls.
You may need to use margin or padding utilities to create that perfect alignment you need. For example, we've removed the `padding-top` on our stacked radio inputs label to align the text baseline better.
@@ -195,7 +195,7 @@ Be sure to use `.col-form-label-sm` or `.col-form-label-lg` to your `<label>`s o
## Column sizing
-As the previous examples show, our grid system allows you to place any number of `.col's within a `.row`. They'll split the available width equally between them. You may also pick a subset of your columns to take up more or less space, while the remaining `.col's equally split the rest, with specific column classes like `.col-sm-7`.
+As the previous examples show, our grid system allows you to place any number of `.col`s within a `.row`. They'll split the available width equally between them. You may also pick a subset of your columns to take up more or less space, while the remaining `.col`s equally split the rest, with specific column classes like `.col-sm-7`.
{{< example >}}
<div class="row g-3">
--
GitLab
From 86dbc416ffd1cb5a7f271cc75b1a14b3ee60d6a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?=
<20430676+supermavster@users.noreply.github.com>
Date: Wed, 11 May 2022 14:46:41 -0500
Subject: [PATCH 53/53] Update migration.md
Fix doc sref to docsref
---
site/content/docs/5.1/migration.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/site/content/docs/5.1/migration.md b/site/content/docs/5.1/migration.md
index d1b8c47248..62dc7f7bba 100644
--- a/site/content/docs/5.1/migration.md
+++ b/site/content/docs/5.1/migration.md
@@ -369,7 +369,7 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co
- <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.
-- Dropdown menus can now be clickable with a new `autoClose` option to handle the [auto close behavior]({{< doc ref "/components/dropdowns#auto-close-behavior" >}}). You can use this option to accept the click inside or outside the dropdown menu to make it interactive.
+- Dropdown menus can now be clickable with a new `autoClose` option to handle the [auto close behavior]({{< docsref "/components/dropdowns#auto-close-behavior" >}}). You can use this option to accept the click inside or outside the dropdown menu to make it interactive.
- Dropdowns now support `.dropdown-item`s wrapped in `<li>`s.
--
GitLab