v4: Flexbox nav options (#21201)

* Add some flexbox nav components
  - Includes .nav-justified for inline, tab, and pill nav components
  - Includes example of using the flex utils (.d- and .flex-items-) for centered nav
* redo heading hierarchy a bit

1 files changed, 22 insertions, 0 deletions

diff --git a/scss/_nav.scss b/scss/_nav.scss
index 640956ca2..0f635e794 100644
--- a/scss/_nav.scss
+++ b/scss/_nav.scss
@@ -155,3 +155,25 @@
     display: block;
   }
 }
+
+
+// Justified navigation (flexbox only)
+//
+// Justified nav components are only built for flexbox mode in Bootstrap 4. In
+// previous versions, this component variation was limited to anchor-based nav
+// implementations--meaning it couldn't be used on button elements. This is due
+// to a longstanding Safari bug in responsive table styles.
+//
+// Using flexbox, we avoid that problem altogether at the cost of no default
+// justified navigation for default Bootstrap. Sorry, y'all <3.
+
+@if $enable-flex {
+  .nav-justified {
+    display: flex;
+
+    .nav-item {
+      flex: 1;
+      text-align: center;
+    }
+  }
+}