* remove load event
* use `forEach` and `querySelectorAll`
* simplify check

- Rename and move the variable to variables file
- Move code to the grid file
- Use the mixin to generate our own classes
- Wrap in a grid classes enabled conditional
- Document the mixin

Trying to find a new way to do responsive card decks while not locking ourselves into the cards themselves. My thinking here is we can easily control the column (.col) width by the parent, but I don't know how many we need (have 0-5 now) across each breakpoint. This works for cards so far, and I think could get us equal height, too.

The example shortcode already adds this.

Use the built-in utilities instead.

Also, add a warning in _root.scss so that we don't miss it again.

While important in the past, it has become obsolete, so removing it seems the best solution.

- Add example to the new form control docs
- Reset the [list] selector in Reboot to hide the random dropdown arrow in Chrome

* Follow-up to #29095

This PR fixes the responsive containers that were added in #29095, originally stubbed out in #25631. Apologies to @browner12 for getting that wrong.

Fixes #25631.

* update navbar as well because we cannot reset all containers uniformly

* Update navbars example to include container-xl example to ensure containers match

* rewrite responsive containers docs, add table of max-widths

* Update container docs
- Move table up to the intro
- Remove the container example because it's actually hella confusing
- Update and link to grid example as a demo instead

Fix Readonly plain text form alignment

Improvement to better understand how utilities class name are generated by the (_api.scss) base in the line of code below:
`$property-class: if($property-class, $property-class, nth($properties, 1));`

https://github.com/twbs/bootstrap/blob/fc02932946424e986a72bb7b47044eab815851cb/scss/mixins/_utilities.scss#L21