From 7d9aa9d71602ff6856c02ee9b9d2bacf2ee3d2f4 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 28 Dec 2022 21:55:54 -0800 Subject: Add .nav-underline modifier class (#33126) * Add .nav-underline modifier class * Tweak sizing and spacing, add underline on hover * Rebuild with Sass and CSS variables * Document CSS vars * Bump bundlewatch --- site/content/docs/5.3/components/navs-tabs.md | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) (limited to 'site/content/docs') diff --git a/site/content/docs/5.3/components/navs-tabs.md b/site/content/docs/5.3/components/navs-tabs.md index 57c47e0cb..ca1effd70 100644 --- a/site/content/docs/5.3/components/navs-tabs.md +++ b/site/content/docs/5.3/components/navs-tabs.md @@ -167,6 +167,27 @@ Take that same HTML, but use `.nav-pills` instead: {{< /example >}} +### Underline + +Take that same HTML, but use `.nav-underline` instead: + +{{< example >}} + +{{< /example >}} + ### Fill and justify Force your `.nav`'s contents to extend the full available width one of two modifier classes. To proportionately fill all available space with your `.nav-item`s, use `.nav-fill`. Notice that all horizontal space is occupied, but not every nav item has the same width. @@ -324,6 +345,12 @@ On the `.nav-pills` modifier class: {{< scss-docs name="nav-pills-css-vars" file="scss/_nav.scss" >}} +{{< added-in "5.3.0" >}} + +On the `.nav-underline` modifier class: + +{{< scss-docs name="nav-underline-css-vars" file="scss/_nav.scss" >}} + ### Sass variables {{< scss-docs name="nav-variables" file="scss/_variables.scss" >}} -- cgit v1.2.3