Refactor some docs examples CSS (#36194)

* Fix some more borders and margins

* Flex utilities docs: remove .bd-highlight class from snippets

* Explicit close target

* Reorder to keep base class up top

* Fix custom position example

* Tooltips: add code snippet, use scss-docs ref for custom tooltip

* Tweak text for pagination examples

* Modals: move custom styles to utilities

* Grid docs: Combine selectors and share coloring

* Refactor tons of little things

site/content/docs/5.1/components/modal.md

@@ -38,8 +38,8 @@ Keep reading for demos and usage guidelines.
 
 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.
 
-<div class="bd-example bd-example-modal">
-  <div class="modal" tabindex="-1">
+<div class="bd-example bg-light">
+  <div class="modal position-static d-block" tabindex="-1">
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-header">

site/content/docs/5.1/components/offcanvas.md

@@ -151,7 +151,7 @@ Responsive offcanvas classes hide content outside the viewport from a specified
 <div class="offcanvas-lg offcanvas-end" tabindex="-1" id="offcanvasResponsive" aria-labelledby="offcanvasResponsiveLabel">
   <div class="offcanvas-header">
     <h5 class="offcanvas-title" id="offcanvasResponsiveLabel">Responsive offcanvas</h5>
-    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#offcanvasResponsive" aria-label="Close"></button>
   </div>
   <div class="offcanvas-body">
     <p class="mb-0">This is content within an <code>.offcanvas-lg</code>.</p>

site/content/docs/5.1/components/pagination.md

@@ -122,7 +122,7 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for
 
 ## Alignment
 
-Change the alignment of pagination components with [flexbox utilities]({{< docsref "/utilities/flex" >}}).
+Change the alignment of pagination components with [flexbox utilities]({{< docsref "/utilities/flex" >}}). For example, with `.justify-content-center`:
 
 {{< example >}}
 <nav aria-label="Page navigation example">
@@ -140,6 +140,8 @@ Change the alignment of pagination components with [flexbox utilities]({{< docsr
 </nav>
 {{< /example >}}
 
+Or with `.justify-content-end`:
+
 {{< example >}}
 <nav aria-label="Page navigation example">
   <ul class="pagination justify-content-end">

site/content/docs/5.1/components/tooltips.md

@@ -47,10 +47,10 @@ var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
 
 Hover over the links below to see tooltips:
 
-<div class="bd-example tooltip-demo">
-  <p class="muted">Placeholder text to demonstrate some <a href="#" data-bs-toggle="tooltip" title="Default tooltip">inline links</a> with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of <a href="#" data-bs-toggle="tooltip" title="Another tooltip">real text</a>. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how <a href="#" data-bs-toggle="tooltip" title="Another one here too">these tooltips on links</a> can work in practice, once you use them on <a href="#" data-bs-toggle="tooltip" title="The last tip!">your own</a> site or project.
-  </p>
-</div>
+{{< example class="tooltip-demo" >}}
+<p class="muted">Placeholder text to demonstrate some <a href="#" data-bs-toggle="tooltip" title="Default tooltip">inline links</a> with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of <a href="#" data-bs-toggle="tooltip" title="Another tooltip">real text</a>. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how <a href="#" data-bs-toggle="tooltip" title="Another one here too">these tooltips on links</a> can work in practice, once you use them on <a href="#" data-bs-toggle="tooltip" title="The last tip!">your own</a> site or project.
+</p>
+{{< /example >}}
 
 ### Custom tooltips
 
@@ -58,11 +58,8 @@ Hover over the links below to see tooltips:
 
 You can customize the appearance of tooltips using [CSS variables](#variables). We set a custom class with `data-bs-custom-class="custom-tooltip"` to scope our custom appearance and use it to override a local CSS variable.
 
-```scss
-.custom-tooltip {
-  --bs-tooltip-bg: var(--bs-primary);
-}
-```
+{{< scss-docs name="custom-tooltip" file="site/assets/scss/_component-examples.scss" >}}
+
 
 {{< example class="tooltip-demo" >}}
 <button type="button" class="btn btn-secondary"