Responsive containers (follow-up to #29095) (#29118)

* 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

site/content/docs/4.3/examples/grid/index.html

@@ -126,12 +126,14 @@ include_js: false
 
 </div>
 
-<div class="container">
-  <h2 class="mt-4">Responsive containers</h2>
+<div class="container" id="containers">
+  <h2 class="mt-4">Containers</h2>
   <p>Additional classes added in Bootstrap v4.4 allow containers that are 100% wide until a particular breakpoint.</p>
 </div>
 
+<div class="container themed-container">.container</div>
 <div class="container-sm themed-container">.container-sm</div>
 <div class="container-md themed-container">.container-md</div>
 <div class="container-lg themed-container">.container-lg</div>
 <div class="container-xl themed-container">.container-xl</div>
+<div class="container-fluid themed-container">.container-fluid</div>

site/content/docs/4.3/examples/navbars/index.html

@@ -220,6 +220,44 @@ extra_css:
   </div>
 </nav>
 
+<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+  <div class="container-xl">
+    <a class="navbar-brand" href="#">Container XL</a>
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample07XL" aria-controls="navbarsExample07XL" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+
+    <div class="collapse navbar-collapse" id="navbarsExample07XL">
+      <ul class="navbar-nav mr-auto">
+        <li class="nav-item active">
+          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="#">Link</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
+        </li>
+        <li class="nav-item dropdown">
+          <a class="nav-link dropdown-toggle" href="#" id="dropdown07XL" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
+          <div class="dropdown-menu" aria-labelledby="dropdown07XL">
+            <a class="dropdown-item" href="#">Action</a>
+            <a class="dropdown-item" href="#">Another action</a>
+            <a class="dropdown-item" href="#">Something else here</a>
+          </div>
+        </li>
+      </ul>
+      <form class="form-inline my-2 my-md-0">
+        <input class="form-control" type="text" placeholder="Search" aria-label="Search">
+      </form>
+    </div>
+  </div>
+</nav>
+
+<div class="container-xl mt-n2 mb-3">
+  Matching .container-xl...
+</div>
+
 <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample08" aria-controls="navbarsExample08" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>