v6: Remove extra bottom border on card navigation nav-tabs (#42571)

* v6: Remove extra bottom border on card navigation nav-tabs

Adding navigation to a card’s header with the current v6 adds an extra border which is visible in the documentation, see https://v6-dev--twbs-bootstrap.netlify.app/docs/6.0/components/card/#navigation

<img width="1834" height="766" alt="Image" src="https://github.com/user-attachments/assets/2b87d10f-1cf5-4a74-a2df-047a55ae0fb9" />

This commit removes the extra border.

* Update scss/_card.scss

Co-authored-by: Mark Otto <markdotto@gmail.com>
---------

Co-authored-by: Mark Otto <markdotto@gmail.com>

diff --git a/scss/_card.scss b/scss/_card.scss
index 4a89d125be55b7eeaa172690ad73a60da56fed75..ee99de756b187eac5974fcc250676167140f069a 100644 (file)
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -171,7 +171,7 @@ $card-tokens: defaults(
   // Combined selector because of specificity match with `.nav` base class
   .nav.card-header-tabs {
     margin-inline: calc(-.5 * var(--card-cap-padding-x));
-    margin-bottom: calc(-1 * var(--card-cap-padding-y));
+    margin-bottom: calc(-1 * var(--card-cap-padding-y) - var(--nav-tabs-border-width));
     border-block-end: 0;
 
     .nav-link.active {