diff options
| author | Mark Otto <[email protected]> | 2022-12-28 21:55:54 -0800 |
|---|---|---|
| committer | GitHub <[email protected]> | 2022-12-28 21:55:54 -0800 |
| commit | 7d9aa9d71602ff6856c02ee9b9d2bacf2ee3d2f4 (patch) | |
| tree | 358760a7c28c431beecb55d89fed72db7cbf8249 /site/content/docs | |
| parent | 97576345b16751a3f4f54afa5aaa581cff323c89 (diff) | |
| download | bootstrap-7d9aa9d71602ff6856c02ee9b9d2bacf2ee3d2f4.tar.xz bootstrap-7d9aa9d71602ff6856c02ee9b9d2bacf2ee3d2f4.zip | |
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
Diffstat (limited to 'site/content/docs')
| -rw-r--r-- | site/content/docs/5.3/components/navs-tabs.md | 27 |
1 files changed, 27 insertions, 0 deletions
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: </ul> {{< /example >}} +### Underline + +Take that same HTML, but use `.nav-underline` instead: + +{{< example >}} +<ul class="nav nav-underline"> + <li class="nav-item"> + <a class="nav-link active" aria-current="page" href="#">Active</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#">Link</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> +</ul> +{{< /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" >}} |