Docs: Breaks out Utilities into separate section and optimizes its pages (#20678)

Author: Kovah

docs/_data/nav.yml

@@ -53,6 +53,20 @@
     - title: Tooltips
     - title: Utilities
 
+- title: Utilities
+  pages:
+    - title: Clearfix
+    - title: Close icon
+    - title: Colors
+    - title: Display property
+    - title: Image replacement
+    - title: Invisible content
+    - title: Responsive helpers
+    - title: Screenreaders
+    - title: Sizing and positioning
+    - title: Spacing
+    - title: Typography
+
 # - title: Extend
 #   pages:
 #     - title: Approach

docs/_includes/page-headers.html

@@ -18,6 +18,11 @@ <h1>Components</h1>
   <p class="lead">
     Over a dozen reusable components built to provide buttons, dropdowns, input groups, navigation, alerts, and much more.
   </p>
+{% elsif page.group == "utilities" %}
+  <h1>Utilities</h1>
+  <p class="lead">
+    Bootstrap includes dozens of utilities—classes with a single purpose to reduce the frequency of highly repetitive declarations.
+  </p>
 {% elsif page.group == "javascript" %}
   <h1>JavaScript plugins</h1>
   <p class="lead">